/* GENERAL */
* {
  color: whitesmoke;
  font-family: 'Prosto One', serif;
  font-size: 18px;
  margin: 0px;
  padding: 0px;
  scroll-behavior: smooth;
}

p, a {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: black;
}

::-webkit-scrollbar-thumb {
  background: deepskyblue;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(0deg,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.25))
    deepskyblue;
}

a {
  color: deepskyblue;
  font-weight: 400;
}

a:link, a:visited {
  text-decoration: none;
}

.highlight-on-hover:hover, .highlight-on-hover:hover i {
  color: deepskyblue;
}

.underline-on-hover:hover {
  text-decoration: underline;
}

.box, .header-box, .header-1-box, .portrait-box, .resume-box {
  background-color: black;
  border-radius: 10px;
}

.header-box, .header-1-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 80vw;
  height: 10vh;
  margin-bottom: 50px;
}

.header-1-box {
  margin: 0px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  height: 15vh;
  align-self: center;
}

h1, h2, p {
  z-index: 1;
}

h1 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  align-self: center;
  text-align: center;
  font-size: max(18px, 3vw);
}

h2 {
  width: 100%;
  text-align: center;
  font-size: max(18px, 2vw);
}

p, a {
  line-height: 135%;
}

p {
  margin: 25px;
}

#about, .companies-section, .recommendations-section, .awards-section, #projects, footer {
  display: flex;
  flex-direction: column;
  margin-top: 50vh;
  width: 80vw;
}

#about, #projects, #contact {
  scroll-margin-top: 100px;
}

#contact {
  scroll-margin-top: 45vh;
}

/* NAVIGATION BAR */
nav {
  background-color: black;
  display: flex;
  flex-direction: row;
  position: fixed;
  width: 100%;
  z-index: 3;
}

nav img {
  border-radius: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 30px;
  height: 50px;
  aspect-ratio: 1;
}

.navigation-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  margin-right: 25px;
  margin-left: auto;
}

.navigation-links a {
  padding: 15px;
  color: ghostwhite;
  font-family: 'Prosto One', serif;
}

/* FRAME */
.frame {
  border: solid black;
  border-width: 25px;
  position: fixed;
  width: calc(100% - 49px);
  height: calc(100% - 50px);
  pointer-events: none;
  z-index: 2;
}

/* BANNER */
.banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
}

.banner img {
  height: 100%;
}

/* MAIN */
main, body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 50vh;
}

/* ABOUT */
#about {
  margin-top: 100vh;
}

#about .profile {
  margin-right: 50px;
}

#about .content, #contact {
  display: flex;
  flex-direction: row;
}

#about .content .box {
  width: 100%;
  height: auto;
}

.portrait-box {
  width: auto;
  height: 550px;
}

#about img {
  border-radius: 10px;
  margin: 25px;
  height: 500px;
}

#contact {
  margin-top: 15px;
  margin-bottom: 15px;
}

#contact .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  aspect-ratio: 1;
}

#contact .box:last-of-type {
  margin: 0px;
}

#contact .box i {
  font-size: 200%;
}

.resume-box {
  display: flex;
  flex-direction: column;
  color: white;
  line-height: 50px;
  text-align: center;
  font-family: 'Prosto One', serif;
}

/* COMPANIES */
.companies-section .content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 15px;
  column-gap: 15px;
  justify-content: center;
}

.companies-section .content .box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon-background {
  display: flex;
  background-color: ghostwhite;
  border-radius: 10px;
  margin: 25px;
}

.companies-section img {
  margin: 15px;
  width: auto;
  height: 75px;
}

/* RECOMMENDATIONS AND AWARDS */
.recommendations-section .content, .awards-section .content {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
}

.recommendation, .award {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 15px;
}

.recommendation .fa-solid, .award .fa-solid {
  color: gold;
  min-width: 100px;
  max-width: 100px;
  min-height: 100px;
  max-height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 200%;
}

.recommendation p:last-of-type, .recommendation p:last-of-type a {
  font-style: italic;
}

.award .box:first-of-type {
  width: 100%;
}

.award .title {
  margin: 25px;
  margin-bottom: 0px;
}

.award .title a {
  font-family: 'Prosto One', serif;
  font-size: 20px;
}

.award .issuer {
  margin-top: 0px;
  margin-bottom: 0px;
}

.award .issuer, .award .issuer a, .award .date {
  font-size: 16px;
}

.award .date {
  margin-top: 0px;
}

/* PROJECTS */
#projects .box {
  display: flex;
  flex-direction: column;
}

#projects p {
  text-align: center;
  font-style: italic;
}

/* FOOTER */
footer {
  flex-direction: row;
  margin: 0px;
}

footer .header-box {
  margin-right: 50px;
  width: auto;
}

footer h2 {
  margin: 25px;
}

footer .content {
  width: 100%;
}

footer .content .box {
  display: flex;
  flex-direction: column;
}

footer p {
  margin-top: 0px;
}

footer p:first-of-type {
  margin-top: 25px;
}

/* RESPONSIVITY */
@media screen and (max-width: 1023px) {
  /* GENERAL */
  * {
    font-size: 14px;
  }

  .header-box {
    margin-bottom: 25px;
  }

  /* ABOUT */
  #about .profile {
    margin-right: 0px;
    margin-bottom: 25px;
  }

  #about .content {
    flex-direction: column;
    align-items: center;
  }

  .portrait-box {
    margin-right: 0px;
    max-width: 331px;
    height: auto;
  }

  #about img {
    width: min(calc(100% - 50px), 281px);
    height: auto;
  }

  /* COMPANIES */
  .companies-section img {
    height: 50px;
  }
  
  /* RECOMMENDATIONS AND AWARDS */
  .recommendation .fa-solid, .award .fa-solid {
    min-width: 50px;
    max-width: 50px;
    min-height: 50px;
    max-height: 50px;
    line-height: 50px;
    font-size: 150%;
  }

  .award .title a {
    font-size: 16px;
  }

  .award .issuer, .award .issuer a, .award .date {
    font-size: 12px;
  }

  /* FOOTER */
  footer {
    flex-direction: column;
  }

  footer .header-box {
    margin-right: 0px;
    margin-bottom: 25px;
  }
}