*,
::after,
::before {
  box-sizing: border-box;
  padding: 0;
}

:root {
  --inbetween-yellow: rgb(255, 247, 0);
  --inbetween-blue: rgb(60, 126, 206);
  --wucypher-white: rgb(255, 255, 255);
  --wucypher-orange: rgb(242, 152, 73);
  --leader-white: rgb(238, 238, 238);
  --leader-green: #97bf7a;
  --light-fontColor: rgb(22, 22, 22);
  --dark-fontColor-header: #ff7501;
  --dark-fontColor: white;
  --dark-background: #202020;

  --button-dimension: 90px;
  --button-smallDimension: 80px;
}

@font-face {
  font-family: Roboto;
  src: url(../media/fonts/RobotoSlab-VariableFont_wght.ttf);
}

body {
  background-color: var(--dark-background);
  color: #3674ff;
  font-family: Roboto, serif;
}

/* || nav */
header {
  position: sticky;
  top: -1px;
}
.flexWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding-left: 0;
}

.flexWrapper li {
  margin-right: calc(0.1em + 5vw);
  font-size: calc(0.1em + 1.5vw + 0.5vh);
}

.flexWrapper li:first-child {
  margin-right: auto;
}

.flexWrapper img {
  max-width: 100%;
}

.imgWrapper {
  width: calc(60px + 2vw);
  height: calc(60px + 2vw);
  display: inline-block;
}

header a {
  text-decoration: overline;
  text-decoration-thickness: 3px;
  font-family: "Roboto", serif;
}

header a:link,
header a:visited {
  color: var(--dark-fontColor);
}

header a:hover {
  color: var(--dark-fontColor);
}

.flexWrapper li:nth-child(2) a {
  color: #fd87ff;
}
.flexWrapper li:nth-child(3) a {
  color: #3674ff;
}
.flexWrapper li:nth-child(4) a {
  color: #bff29b;
}

.flexWrapper li:nth-child(4) a {
  cursor: url(./../media/DriveSVGSmall.jpeg) 0 0, pointer;
}

.flexWrapper li:nth-child(5) a {
  color: var(--dark-fontColor-header);
}
.flexWrapper li:nth-child(5) {
  margin: 0;
}

.flexWrapper li:nth-child(2) a:hover,
.flexWrapper li:nth-child(3) a:hover,
.flexWrapper li:nth-child(4) a:hover,
.flexWrapper li:nth-child(5) a:hover {
  color: white;
}

.navAbout {
  text-decoration: none;
}

/* || main */

body {
  margin: 0 5vw 0 5vw;
}

/* || about image */
.splash img {
  pointer-events: none;
  filter: grayscale(0.7);
  display: block;
  position: fixed;
  z-index: 0;
  top: 15%;
  right: -60vw;
  width: calc(40vw + 20vh);
  border-radius: 100%;

  mix-blend-mode: color-dodge;

  transition: transform ease-out 0.8s, right ease-out 0.8s,
    opacity ease-in-out 1.5s;
  opacity: 0;
  transform: rotateZ(20deg);
}
.splash img.fromRight {
  opacity: 0.8;
  right: -18vw;
  transform: rotateZ(-10deg);
}

.splash h1 {
  font-weight: bolder;
  color: #3674ff;
  font-size: calc(2rem + 3vw);
  text-align: right;
  font-family: "Roboto", serif;
  margin: 0;
}

.splash h1 span {
  font-size: calc(2rem + 1vw);
}

.splash {
  margin: 5vw 0 0 10vw;
}

/* || about text */

.blurbWrapper p {
  margin: 0;
  padding: 0 1rem;
  line-height: normal;
  font-size: large;
}

/* element boiler */

.infoBox {
  width: 85%;
  height: auto;
  /* outline: 1px solid green; */
}

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

.infoBox ul {
  height: 15vh;

  padding: 0;
  border: rgb(238, 238, 238) 1px ridge;
  border-radius: 20px;
  margin: 0;

  list-style: none;
}

.infoBox button {
  padding: calc(20px + 1vw + 1vh);
  border-radius: 50%;
  border: 0;

  transition: 0.3s all;

  cursor: pointer;
}

.infoBox > p:first-child {
  /* using > selects direct descendents. if you do 
  this selector without >, it chooses all first-child P  */

  margin: 10px;
}

li:hover button {
  background-color: rgb(71, 71, 194);
}

.blurbWrapper {
  margin-top: 1rem;
}

.blurbWrapper p:first-child {
  font-size: calc(1rem + 2.2vw + 2.2vh);
}

.blurbWrapper p:nth-child(2) {
  font-size: calc(1rem + 1.8vw + 1.8vh);
}

.blurbWrapper p:nth-child(3) {
  font-size: calc(1rem + 1.3vw + 1.3vh);
}

.blurbWrapper p:nth-child(4) {
  font-size: calc(1rem + 1vw + 1vh);
}

.blurbWrapper p:nth-child(5) {
  font-size: calc(1rem + 0.6vw + 0.6vh);
}

@media screen and (max-width: 480px) {
  .infoBox {
    width: 100%;
  }

  .blurbWrapper {
    height: 650px;
    /* addresses the jerky nature that's found on mobile.
    problem: was getting jumpy screen when selecting long bio, then a shorter one.
    reason: container (this element) was set to grow depending on content. so, when switching from 
    large content to shorter, screen had no choice but to jump back up the page.
    solution: manually setting height of container to encapsulate even the largest bio prevents page jumping */
  }

  .flexWrapper li:nth-child(n + 2) {
    display: none;
  }

  body {
    margin: 0 0 0 0;
  }

  nav {
    height: 12vh;
    transition: 0.65s all ease-out;
  }

  main {
    margin: 0 0 0 5vw;
  }

  .flexWrapper {
    justify-content: center;
    margin: 0;
  }

  .flexWrapper li:first-child {
    margin-right: unset;
    position: absolute;
    z-index: 1;
    top: 10px;
    background-color: var(--dark-background);
    rotate: 45deg;

    border-radius: 20%;
  }

  .flexWrapper li:first-child img {
    rotate: -45deg;
  }
}

/* || media queries */

@media screen and (min-width: 480px) {
  .mobileContainer {
    display: none;
  }

  body {
    margin: 0 5vw 0 5vw;
  }
}

@media screen and (max-width: 480px) {
  .flexWrapper li:nth-child(n + 2) {
    display: none;
  }

  nav {
    height: 12vh;
    transition: 0.65s all ease-out;
  }

  main {
    margin: 0 5vw 0 5vw;
  }

  .flexWrapper {
    justify-content: center;
    margin: 0;
  }

  .flexWrapper li:first-child {
    margin-right: unset;
    position: absolute;
    z-index: 1;
    top: 10px;
    background-color: var(--dark-background);
    rotate: 45deg;

    border-radius: 20%;
  }

  .flexWrapper li:first-child img {
    rotate: -45deg;
  }

  .hero {
    margin: 25px;
  }
}

@media (prefers-reduced-motion) {
  *,
  ::before,
  ::after {
    transition: all 0s;
  }
}