/*font-family: 'Oxygen', sans-serif; */
:root {
  --white: #f9f9f9;
  --green: #9fd3c7;
  --blue: #385170;
  --dark: #142d4c;
  --default-font: "Roboto Mono", monospace;
}
h1 {
  font-weight: bold;
}
.container-fluid {
  background-color: var(--green);
  color: var(--dark);
  border: var(--dark);
}
.hero {
  font-family: var(--default-font);
  background: var(--white);
  color: var(--blue);
  text-align: center;
  padding: 160px 20px;
}
.btn-branding {
  background: var(--green);
  color: var(--dark);
  border-radius: 8px;
  border-color: var(--dark);
  padding: 12px 25px;
  font-size: 16px;
  line-height: 25px;
  transition-delay: 100ms;
  transition-timing-function: ease-in-out;
}
.btn-branding:hover {
  background: var(--blue);
  color: var(--white);
}
.text-center {
  font-family: var(--default-font);
  color: var(--blue);
  background: var(--green);
  font-weight: bold;
}
.container {
  font-family: var(--default-font);
  background: var(--white);
  color: var(--blue);
  text-align: center;
}
.container h2 {
  color: var(--dark);
}
.project-image {
  border-radius: 10px;
  border-color: var(--dark);
}
.skills-container {
  font-family: var(--default-font);
  color: var(--dark);
  background: var(--white);
}
.about-section {
  font-family: var(--default-font);
  background: var(--white);
  color: var(--blue);
  text-align: center;
  padding: 160px 20px;
}
.about-image {
  max-height: 400px;
  border-radius: 50px;
  border-color: var(--dark);
}
.resume {
  font-family: var(--default-font);
  background: var(--white);
  color: var(--blue);
  text-align: center;
  padding: 160px 20px;
}
.resume h1 {
  color: var(--dark);
}
.education-image {
  background: var(--white);
  width: 320px;
  height: 240px;
  border-style: solid;
  border-width: thin;
  border-color: var(--blue);
  box-shadow: inset;
  border-radius: 30px;
}
.education-description {
  color: var(--blue);
  font-weight: bold;
  height: 20px;
}
.certificate-image {
  width: 300px;
  height: 240px;
  height: 240px;
  border-style: solid;
  border-width: thin;
  border-color: var(--blue);
  box-shadow: inset;
  border-radius: 30px;
}

.contact-section {
  font-family: var(--default-font);
  background: var(--white);
  color: var(--dark);
  text-align: center;
  padding: 160px 20px;
}
footer .email-link {
  text-decoration: none;
  font-family: var(--default-font);
  color: var(--blue);
}
footer .email-link:hover {
  color: var(--green);
}
footer .social-links a {
  color: var(--dark);
  text-decoration: none;
  padding: 15px;
  height: 20px;
}
footer .social-links a:hover {
  color: var(--green);
}