@keyframes picture-fly-in {
  from {
    transform: translateY(90vh);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes profile-fly-in {
  from {
    transform: translateX(60vw);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes arrow-fly-in {
  from {
    transform: translateY(20vh);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes arrow-bounce {
  0%, 50%, 62%, 88%, 100% {
    transform: translateY(0) rotate(45deg);
  }
  75% {
    transform: translateY(10px) rotate(45deg);
  }
}
:root {
  --main-background-color: #003262;
  --main-background-color-dark: #001631;
  --main-text-color-rgb: 255, 255, 255;
  --main-text-color: rgb(var(--main-text-color-rgb));
  --main-background-gradient: linear-gradient(30deg, #003262, #004893);
  --alt-background-color: #d7cb84;
  --alt-text-color-rgb: 0, 50, 98;
  --alt-text-color: rgb(var(--alt-text-color-rgb));
  --box-shadow: 0 5px 15px black;
  --alt-box-shadow: 0 5px 25px black;
  --fly-in-duration: 0.6s;
  --fly-in-timing-function: cubic-bezier(0.27, 0.57, 0.54, 1.02);
  --width-ratio: 1;
  --height-ratio: 1;
  --width-0: 0;
  --width-1: 0;
  --width-2: 0;
  --width-3: 0;
  --theme-text-color: white;
  scrollbar-width: thin;
  scrollbar-color: #444444 black;
  scrollbar-face-color: #444444;
  scrollbar-track-color: black;
}
:root::-webkit-scrollbar {
  width: 1.2em;
  height: 100%;
}
:root::-webkit-scrollbar-thumb {
  background: #444444;
  border: 0.3636363636em solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 0.6em;
}
:root::-webkit-scrollbar-thumb:hover {
  background: #3a3a3a;
  border: 0.3636363636em solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
}
:root::-webkit-scrollbar-thumb:active {
  background: #303030;
  border: 0.3636363636em solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
}
:root::-webkit-scrollbar-track {
  background: black;
}

:root.dark-theme {
  --main-background-color: black;
  --main-background-color-dark: black;
  --main-text-color-rgb: 255, 255, 255;
  --main-background-gradient: black;
  --alt-background-color: #1d2020;
  --alt-text-color-rgb: 255, 255, 255;
  --box-shadow: 0 0 2px white;
  --alt-box-shadow: 0 0 2px yellow;
}

* {
  box-sizing: border-box;
  font-family: Lato, Helvetica, Verdana, Tahoma, sans-serif;
  letter-spacing: 0.03em;
  line-height: 1.2em;
}

html {
  font-size: calc(100% * var(--width-ratio));
}

html, body {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

.title-xs {
  font-size: calc(1.3rem * var(--width-ratio));
}

.title-small {
  font-size: calc(1.8rem * var(--width-ratio));
}

.title-medium {
  font-size: calc(3rem * var(--width-ratio));
}

.title-large {
  font-size: calc(4rem * var(--width-ratio));
}

.text-small {
  font-size: calc(1.1rem * var(--width-ratio));
}

.text-medium {
  font-size: calc(1.4rem * var(--width-ratio));
}

.text-large {
  font-size: calc(1.7rem * var(--width-ratio));
}

.small-caps {
  font-variant: small-caps;
}

.alt-color {
  color: var(--alt-text-color);
}

.plain {
  text-decoration: none;
}

.profile {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  align-content: stretch;
  overflow: hidden;
  background: var(--main-background-gradient);
  color: var(--main-text-color);
}

.profile-picture {
  border-radius: 50%;
  box-shadow: 0 0 10px black;
  border: 1.5px solid var(--main-text-color);
}

.profile-picture-container {
  flex: 4 4 40%;
  height: auto;
  padding: 4%;
  margin: 0;
}
.profile-picture-container .profile-picture {
  width: 70%;
  height: auto;
  margin-left: 20%;
  animation: picture-fly-in var(--fly-in-duration) var(--fly-in-timing-function);
}

.profile-description {
  flex: 6 6 60%;
  height: auto;
  padding: 4%;
  padding-right: 10%;
  margin: auto;
  font-size: 20px;
  animation: profile-fly-in var(--fly-in-duration) var(--fly-in-timing-function);
}

.icons {
  display: flex;
  justify-content: flex-start;
}
.icons a {
  color: var(--main-text-color);
  transition: color 0.5s;
  margin-right: 5%;
  text-decoration: none;
}
.icons a .icon {
  color: var(--main-text-color);
  height: 3.5em;
  width: 3.5em;
  border-radius: 50%;
  border: 1px solid var(--main-text-color);
}
.icons a .icon:hover {
  cursor: pointer;
  border: 2px solid var(--main-text-color);
}
.icons a:focus {
  outline: none;
}
.icons a:focus .icon {
  border: 2px solid var(--main-text-color);
}

i {
  color: var(--main-text-color);
}

.down-arrow {
  flex: 0 0 100%;
  height: auto;
  text-align: center;
  align-self: flex-end;
  margin-bottom: 50px;
  animation: arrow-fly-in var(--fly-in-duration) var(--fly-in-timing-function);
}
.down-arrow a:focus {
  outline: none;
}
.down-arrow a:focus .arrow {
  border-width: 0 3.5px 3.5px 0;
}

.arrow {
  width: 2vw;
  height: 2vw;
  border-width: 0 2px 2px 0;
  border-style: solid;
  border-color: var(--main-text-color);
  transform: rotate(45deg);
  animation: arrow-bounce 4s 1s infinite;
}
.arrow:hover {
  border-width: 0 3.5px 3.5px 0;
  cursor: pointer;
}

.portfolio-menu {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  box-shadow: 1px 0 2px var(--alt-text-color);
  position: fixed;
  top: 0;
  left: 0;
  background: var(--main-background-color-dark);
  z-index: 5;
}

/*
Not using for now at least
.portfolio-menu::after {
    content: '';
    display: block;
    position: absolute;
    top: calc(100% - 3px);
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--main-background-color-dark);
    z-index: 2;
}
*/
.menu-buttons {
  z-index: 3;
  height: auto;
}
@media only screen and (max-width: 1150px) {
  .menu-buttons {
    justify-content: center !important;
  }
}

.name-container {
  flex: 0 0 20%;
  text-align: center;
  margin: 0;
  height: auto;
  width: 100%;
}
.name-container a {
  width: auto;
  height: auto;
  margin-right: 5vw;
  text-decoration: none;
}
.name-container a p {
  color: var(--main-text-color);
  height: auto;
  width: auto;
  margin: 0;
  display: inline-block;
  text-transform: uppercase;
}
@media only screen and (max-width: 1150px) {
  .name-container {
    display: none;
  }
}

.portfolio {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 10%;
  text-align: center;
  background: var(--alt-background-color);
  /* old, not needed i think: align-items: flex-start !important; */
}

.progress-container {
  width: 100%;
  height: 3px;
  background-color: var(--main-background-color);
}

.progress-bar {
  width: 0%;
  height: 3px;
  background-color: var(--main-text-color);
}

.menu a, .menu a h2, .portfolio-title {
  color: var(--alt-text-color);
  display: inline;
  text-decoration: none;
}

.title-container {
  width: 100%;
}

.portfolio-title {
  margin: 8vh 3vw;
  text-align: left;
  width: 100%;
}

.menu {
  flex: 0 0 15%;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  position: relative;
  transition: background 0.2s;
  /*
  Not using for now at least
  &::after {
      content: '';
      display: block;
      position: absolute;
      top: calc(100% - 3px);
      left: 0;
      width: 0;
      height: 3px;
      background-color: var(--main-text-color);
      z-index: 6;
  }
  */
}
.menu:hover {
  cursor: pointer;
  background: rgba(var(--main-text-color-rgb), 0.1);
  /* alt text color with alpha of 0.1 */
}
.menu:focus {
  outline: none;
}
.menu.selected, .menu:active {
  background: rgba(var(--main-text-color-rgb), 0.2);
  /* alt text color with alpha of 0.2 */
}
.menu a {
  display: block;
  width: 100%;
  height: 100%;
}
.menu a h2 {
  display: inline-block;
  text-align: center;
  padding: 3% 10%;
  margin: 0;
  width: 100%;
  height: 100%;
  color: var(--main-text-color);
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  line-height: 1.8em;
  font-weight: 200;
}

/*
Not using for now at least
#Experience::after {
    width: var(--width-0);
}

#Projects::after {
    width: var(--width-1);
}

#Coursework::after {
    width: var(--width-2);
}

#Resume::after {
    width: var(--width-3);
}
*/
.section-container {
  width: 100%;
  height: auto;
  padding: 0 4%;
}

.section-container:last-child {
  padding-bottom: 2%;
}

.grid-3 {
  display: grid;
  gap: 1vw;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-flow: row;
}
@media only screen and (max-width: 1440px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 768px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
}

.flex-vertical {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

.flex-horizontal {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  width: calc(100% - 2vw);
  border-radius: 20px;
  background: var(--main-background-color);
  color: var(--main-text-color);
  margin: 1vw;
  box-shadow: var(--box-shadow);
}
.card a {
  color: inherit;
}

.project.card {
  height: calc(100% - 2vw);
  padding: 4%;
}

.resume.card {
  height: 100%;
}
.resume.card .full {
  display: inline-block;
  padding: 1% 2%;
  height: 100%;
  width: 100%;
}

.resume.card:hover {
  box-shadow: var(--alt-box-shadow);
}

.experience.card {
  height: 100%;
  padding: 1% 2%;
}

.experience.content {
  width: auto;
  height: auto;
  flex: 80%;
}

.experience.image-container {
  width: auto;
  height: 12vh;
  margin: 1% 0;
  flex: 20%;
}

.project.image-container {
  width: auto;
  height: 55vh;
  margin: 5% 0;
}

.fa-8x {
  font-size: 8em !important;
  border: none !important;
}

.image {
  max-height: 99%;
  max-width: 99%;
  border-radius: 5px;
  border: 2px solid white;
}

.image.background {
  background: white;
}

.title {
  width: 100%;
  height: auto;
  padding: 1%;
}

.experience.title {
  width: 100%;
  text-align: left;
}

.project.title p {
  margin: 3% 0;
}

.experience.title p {
  margin: 0.2em 2%;
}

.description {
  padding: 1%;
  text-align: left;
}
.description li {
  line-height: 1.8;
}
.description p {
  line-height: 1.5;
}

.experience.description {
  width: 100%;
}

.disable-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.disable-drag {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

footer {
  background: var(--main-background-gradient);
  color: var(--main-text-color);
  text-align: center;
  padding: 1%;
}
footer p {
  margin: 0;
  padding: 0;
}
footer a {
  color: var(--main-text-color);
}

.dark-mode-slider {
  width: 5rem;
  height: 2rem;
  background-color: var(--main-text-color);
  border-radius: 1rem;
  border: 2px solid var(--main-text-color);
  position: fixed;
  bottom: 15px;
  right: 15px;
  cursor: pointer;
  color: var(--theme-text-color);
}

.dark-mode-slider::before {
  content: attr(data-theme);
  position: absolute;
  bottom: calc(2rem + 10px);
  left: 0;
  right: 0;
  height: auto;
  width: auto;
  text-align: center;
  color: inherit;
  font-weight: bold;
  border-radius: 5px;
  font-size: calc(0.8rem * var(--width-ratio));
}

.dark-mode-thumb {
  border-radius: 50%;
  width: calc(2rem - 2px);
  height: calc(2rem - 2px);
  transform: translateX(calc(5rem / 2 - 2rem / 2));
  background-color: var(--main-background-color-dark);
  z-index: 2;
  transition: transform 0.3s;
}

.dark-mode-thumb.dark-theme {
  transform: translateX(calc(-1 * (5rem / 2 - 2rem / 2)));
}

/*# sourceMappingURL=main.css.map */