@charset "UTF-8";
html {
  box-sizing: border-box;
  font-size: calc(16px + 0.2 * (100vw - 320px) / 680);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  transition: all 0.4s ease-in-out;
}

main {
  max-width: 970px;
  margin: 0 auto;
  transition: all 0.4s ease-in-out;
}

footer {
  margin: 0.5em 0 3em;
  text-align: center;
}

h1 {
  font-size: 1.25rem;
  font-weight: 400;
}

h2 {
  font-size: 1.2rem;
  font-weight: 400;
}

h3 {
  font-size: 1rem;
  font-weight: 400;
}

h4,
h5,
h6 {
  font-size: 1rem;
  font-weight: 400;
}

p {
  color: rgb(65, 65, 65);
  line-height: 1.3em;
}

em {
  color: rgb(44, 44, 44);
}

a {
  color: #5287e2;
}
a:hover {
  color: #28cab5;
}
a:active {
  color: #e25252;
}

.side-nav {
  position: fixed;
  left: -5em;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  opacity: 0;
}
.side-nav.active {
  left: 2em;
  opacity: 1;
}
.side-nav li:first-child {
  margin-bottom: 0.5em;
}

.mobile-nav {
  position: fixed;
  right: -10%;
  height: 100vh;
  display: flex;
  justify-content: center;
  width: 10%;
  transition: all 0.4s ease-in-out;
}
.mobile-nav ul {
  list-style: none;
  text-align: center;
  font-size: 1.4rem;
  margin-top: 1.5em;
}
.mobile-nav ul li:first-child {
  margin-bottom: 1.5em;
}
.mobile-nav ul li:not(:first-child) {
  margin-bottom: 0.4em;
}

.sections section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sections section:not(:last-child) {
  margin-bottom: 3em;
}
.sections section > h2 {
  margin: 2em 0;
}
.sections section .section-container {
  width: 90%;
  margin: 0 auto;
}

.inline-block {
  display: inline-block;
}

.hidden {
  display: none;
}

header {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.23s ease-in-out;
}
header nav {
  margin: 1em 0 0 1.5em;
}
header nav ul > li:not(:last-child) {
  margin-bottom: 0.2em;
}
header.active {
  opacity: 100%;
}
header .loader-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
}
header .loader-wrapper .loader::after {
  content: "…";
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  animation: dots steps(4, end) 2s infinite;
  width: 0;
}
@keyframes dots {
  to {
    width: 1.5em;
  }
}

#projects .section-container > ul {
  list-style: none;
  margin-bottom: 3.5em;
}
#projects .section-container > ul > li:not(:last-child) {
  margin-bottom: 2em;
}
#projects .project h2 {
  margin-bottom: 1em;
}
#projects .project .project-description {
  margin-left: 0.5em;
}

#experience .section-container > .work-containers {
  list-style: none;
}
#experience .section-container > .work-containers > li:not(:last-child) {
  margin-bottom: 1.8em;
}
#experience .section-container > .work-containers .work-role {
  margin-bottom: 0.1em;
}
#experience .section-container > .work-containers .work-role-details {
  margin-bottom: 0.5em;
}
#experience .section-container > .work-containers .work-container .work-summary {
  margin-bottom: 0.5rem;
}
#experience .section-container > .work-containers .work-container .dropdown-inner > h4 {
  font-weight: 600;
  margin-bottom: 0.4em;
}
#experience .section-container > .work-containers .work-container .dropdown-inner > .work-details {
  margin-left: 1.5em;
  list-style: disc;
}
#experience .section-container > .work-containers .work-container .dropdown-inner > .work-details > .work-detail:not(:last-child) {
  margin-bottom: 0.2em;
}

/* START DROPDOWN */
/* Dropdown animation variables */
@keyframes dropdownFadeIn {
  0% {
    opacity: 0;
    transform: translateY(0.8rem);
    animation-timing-function: ease-in;
  }
  30% {
    opacity: 0.3;
    transform: translateY(0.3rem);
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dropdownFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: linear;
  }
  50% {
    opacity: 0.3;
    transform: translateY(0.2rem);
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 0;
    transform: translateY(0.8rem);
  }
}
.dropdown {
  width: 100%;
}
.dropdown-trigger {
  cursor: pointer;
}
.dropdown-trigger .dropdown-status-text {
  display: inline-grid;
}
.dropdown-trigger .dropdown-status-text span {
  grid-area: 1/1;
  transition: opacity 0.7s cubic-bezier(1, 0.09, 0.63, 0.74);
}
.dropdown-trigger .dropdown-status-text .text-closed {
  opacity: 1;
}
.dropdown-trigger .dropdown-status-text .text-open {
  opacity: 0;
}
.dropdown-trigger[aria-expanded=true] .dropdown-status-text .text-closed {
  opacity: 0;
}
.dropdown-trigger[aria-expanded=true] .dropdown-status-text .text-open {
  opacity: 1;
}
.dropdown-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.75s cubic-bezier(0, 1.12, 0.96, 0.99);
}
.dropdown-wrapper.is-open {
  grid-template-rows: 1fr;
}
.dropdown-inner {
  overflow: hidden;
  opacity: 0;
  margin-top: 0.5rem;
  transform: translateY(0.8rem);
}
.dropdown-wrapper.is-open .dropdown-inner {
  animation: dropdownFadeIn 0.75s forwards;
}
.dropdown-wrapper.is-closing .dropdown-inner {
  animation: dropdownFadeOut 0.75s forwards;
}

/* END DROPDOWN */
#education .section-container > ul {
  list-style: none;
}
#education .section-container > ul > li:not(:last-child) {
  margin-bottom: 1.8em;
}
#education .section-container > ul h2 {
  margin-bottom: 0.1em;
}
#education .section-container > ul h3 {
  margin-bottom: 0.5em;
}
#education .education-container p {
  margin-left: 0.5em;
}
#education .education-container ul {
  margin-left: 1.5em;
  list-style: disc;
}

#info .section-header {
  margin-bottom: 1.5em;
}
#info .bio {
  margin-bottom: 3em;
}
#info .bio .details {
  display: flex;
  margin-bottom: 1.5em;
  align-items: center;
}
#info .bio .details .portrait {
  width: 150px;
  height: 150px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 100%;
  margin-right: 2em;
}
#info .bio .details .summary {
  text-indent: 2em;
}
#info .contact {
  width: 50%;
  margin: 0 auto;
  text-align: center;
  transition: all 0.3s ease-in-out;
}
#info .contact h3 {
  margin-bottom: 1em;
  opacity: 1;
  transition: all 0.2s ease;
}
#info .contact h3.submitted {
  opacity: 0;
  cursor: default;
}
#info .contact input,
#info .contact textarea {
  padding: 0.5em;
  font-size: 0.8rem;
}
#info .contact .contact-container {
  margin-bottom: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
#info .contact .contact-container .contact-form {
  opacity: 1;
  transition: all 0.2s ease;
}
#info .contact .contact-container .contact-form input,
#info .contact .contact-container .contact-form textarea {
  font-family: Arial, Helvetica, sans-serif;
}
#info .contact .contact-container .contact-form #name {
  width: 100%;
  margin-bottom: 0.5em;
}
#info .contact .contact-container .contact-form #email {
  width: 100%;
  margin-bottom: 0.5em;
}
#info .contact .contact-container .contact-form #message {
  height: 6em;
  width: 100%;
  margin-bottom: 0.6em;
}
#info .contact .contact-container .contact-form input[type=submit] {
  font-size: 1rem;
}
#info .contact .contact-container .contact-form.submitted {
  opacity: 0;
}
#info .contact .contact-container .contact-confirmation {
  position: absolute;
  opacity: 0;
  transition: all 0.5s ease;
}
#info .contact .contact-container .contact-confirmation.active {
  opacity: 1;
}
#info .social-links a {
  font-size: 1.6rem;
}

.mode-toggle {
  text-decoration: underline;
  cursor: pointer;
}

.dark-mode {
  background: rgb(35, 35, 35);
  color: rgb(240, 240, 240);
}
.dark-mode p {
  color: rgb(220, 220, 220);
  line-height: 1.3em;
}
.dark-mode em {
  color: rgb(183, 183, 183);
}
.dark-mode a {
  color: rgb(145, 145, 255);
}
.dark-mode a:hover {
  color: rgb(110, 232, 173);
}
.dark-mode a:active {
  color: rgb(195, 110, 110);
}
.dark-mode .loader-wrapper {
  background: rgb(25, 25, 25);
}
.dark-mode .contact-form input,
.dark-mode .contact-form textarea {
  background: rgb(50, 50, 50);
  color: rgb(220, 220, 220);
  border: 2px inset rgb(100, 100, 100);
}

/* On screens that are 1667px or less */
@media screen and (max-width: 1667px) {
  main {
    margin: 0 20%;
  }
}
/* On screens that are 1309px or less */
@media screen and (max-width: 1309px) {
  #info .contact {
    width: 70%;
  }
}
/* On screens that are 900px or less */
@media screen and (max-width: 900px) {
  main {
    margin: 0 10%;
  }
  .side-nav.active {
    left: -5em;
  }
  .mobile-nav.active {
    right: 0;
  }
  #info .contact {
    width: 90%;
  }
}
/* On screens that are 740px or less */
@media screen and (max-width: 740px) {
  #info .section-header {
    margin-bottom: 1.2em;
  }
  #info .bio .details {
    flex-direction: column;
  }
  #info .bio .details .portrait {
    margin-right: 0;
    margin-bottom: 2em;
  }
}/*# sourceMappingURL=style.css.map */