/* Nick Goode --- Today is 10/3/19 however 99.99% of this was completed long ago. I will add whatever the assignment dictates, but I will comment it out because I dont want my website to look like trash. */
:root{
  --darkestG: #1a3333;
  --darkerG: #346565;
  --darkG: #458787;
  --midG: #57a8a8;
  --lightG: #78baba;
  --lighterG: #9acbcb;
  --lightestG: #ddeeee;

  --darkestP: #331a33;
  --darkerP: #653465;
  --darkP: #874587;
  --midP: #a857a8;
  --lightP: #ba78ba;
  --lighterP: #cb9acb;
  --lightestP: #eeddee;

  --darkestB: #1a1a33;
  --darkerB: #343465;
  --darkB: #454587;
  --midB: #5757a8;
  --lightB: #7878ba;
  --lighterB: #9a9acb;
  --lightestB: #ddddee;
}

p {
  font-size: 1.1vw;
  color: var(--darkestG);
}

a {
  font-size: 1.1vw;
  color: var(--darkestG);
}

a:hover {
  color: var(--midB);
}

li {
  font-size: 1.1vw;
  color: var(--darkestG);
}

h1 {
  font-size: 3vw;
  color: var(--darkestG);
}

h2 {
  font-size: 2vw;
  color: var(--darkestG);
}

h3 {
  font-size: 1.5vw;
  color: var(--darkestG);
}

h4 {
  font-size: 1.1vw;
  color: var(--darkestG);
}

h5 {
  font-size: .9vw;
  color: var(--darkestG);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 97.7vw;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(#112222, var(--darkestG));
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96vw;
  height: 17vh;
  background-image: linear-gradient(var(--darkerG), var(--midG), var(--darkG) 10vw);
  border-bottom: .15vw solid var(--darkestG);
  border-left: .15vw solid var(--darkestG);
  border-top: .15vw solid var(--lightestG);
  border-right: .15vw solid var(--lightestG);
  border-radius: 1vw 1vw 0 0;
  margin: .2vw .5vw;
  padding: .1vw;
}

nav {
  margin: 5vw 10vw 5vw 5vw;
}

nav li {
  margin: .5vw;
  padding: .25vw;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 35vw;
  width: 75vw;
  background-image: linear-gradient(var(--midP) 2vw, var(--lighterP) 4vw, var(--lightestP));
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  margin: 2vw 0 0 0;
  padding: 1.5vw auto 0 auto;
  background-image: linear-gradient(var(--darkestG) .25vw, var(--darkG));
  color: var(--darkG);
}

footer div {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1vw 5vw;
  padding: 0;
}

.welcome {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background: linear-gradient(-35deg, var(--darkestG), darkslategrey, rebeccapurple, maroon);
  background-size: 400% 400%;
}

.welcStart {
  display: flex;
  animation: welcome 6s .75s 1 normal ease-out both;
}

.welcome h1 {
  font-size: 10vw;
  text-shadow: 2vh -2vw 5vw var(--darkestG),2vh 2vw 5vw var(--darkerG);
  color: var(--lightG);
  animation: rainbow 4s 0s 1 alternate ease-out forwards;
}

.title {
  margin: 1vw auto .5vw 1.5vw;
  padding: .1vw;
}

.intro {
  margin: .75vw 1.5vw;
  padding: .5vw 1vw;
  background-color: var(--darkG);
  border-bottom: .2vw solid var(--darkestG);
  border-left: .1vw solid var(--darkestG);
  border-top: .2vw solid var(--lightestG);
  border-right: .1vw solid var(--lightestG);
}

.intro p {
  margin: 0;
  padding: .5vw;
  border: .1vw solid var(--darkestG);
  background-color: var(--lightestG);
}

.box {
  margin: 2vw;
}

.button {
  text-decoration: none;
}

.overlay {
  position: fixed;
  top: 15.5vw;
  transition: .5s;
  visibility: collapse;
  opacity: 0;
  margin: .75vw 1.5vw;
  padding: .5vw 1vw;
  background-color: var(--darkG);
  border-bottom: .2vw solid var(--darkestG);
  border-left: .1vw solid var(--darkestG);
  border-top: .2vw solid var(--lightestG);
  border-right: .1vw solid var(--lightestG);
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.poppin {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: .5vw;
  border: .1vw solid var(--darkestG);
  background-color: var(--lightestG);
}

.poppinb {
  margin: 0;
  padding: 0;
}

.codeModuleH {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 65vw;
  margin: 1vw 5vw;
  padding: 1vw;
  background-color: var(--lighterB);
  border-bottom: .2vw solid var(--darkerB);
  border-left: .1vw solid var(--darkerB);
  border-top: .2vw solid var(--lightestB);
  border-right: .1vw solid var(--lightestB);
}

.codeTit {
  margin: .5vw auto;
}

.codeContainer {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin: .5vw;
  padding: 0;
  background-color: var(--lightB);
  border-bottom: .1vw solid var(--darkerB);
  border-left: .05vw solid var(--darkerB);
  border-top: .1vw solid var(--lightestB);
  border-right: .05vw solid var(--lightestB);
}

.code {
  white-space: nowrap;
  margin: .5vw;
  padding: .1vw;
  width: auto;
  background-color: var(--darkestB);
  border-bottom: .1vw solid var(--lightestB);
  border-left: .05vw solid var(--lightestB);
  border-top: .1vw solid var(--darkerB);
  border-right: .05vw solid var(--darkerB);
}

.codeExp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin: .25vw;
  padding: .25vw;
}

/* .videos {
  display: flex;
  margin: 1vw 2vw;
  padding: .5vw 1vw;
  background-color: var(--darkG);
  border-bottom: .2vw solid var(--darkestG);
  border-left: .1vw solid var(--darkestG);
  border-top: .2vw solid var(--lightestG);
  border-right: .1vw solid var(--lightestG);
}

.videocard {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1vw .5vw;
  padding: .5vw .25vw;
  background-color: var(--darkerG);
  border-bottom: .2vw solid var(--darkestG);
  border-left: .1vw solid var(--darkestG);
  border-top: .2vw solid var(--lightestG);
  border-right: .1vw solid var(--lightestG);
}

.videocard h3 {
  margin: .5vw .25vw;
  padding: 0;
} */

@keyframes rainbow {
  0% {color: var(--lightG);}
  7.1% {color: mediumslateblue;}
  21.4% {color: mediumorchid;}
  35.7% {color: lightcoral;}
  50% {color: lightsalmon;}
  64.3% {color: lightgoldenrodyellow;}
  78.6% {color: mediumseagreen;}
  92.9% {color: var(--lightG);}
  100% {color: var(--lightG);}
}

@keyframes welcome {
  0% {
    opacity: 1;
    z-index: 13;
    background-position: 0% 50%;
  }
  70% {
    opacity: 1;
    z-index: 13;
    width: 100vw;
    height: 100vh;
    background-position: 100% 50%;
  }
  75% {
    opacity: .9;
    z-index: 13;
    width: 300vw;
    height: 600vh;
    background-position: 0% 0%;
  }
  85% {
    opacity: .6;
    z-index: 13;
    width: 300vw;
    height: 600vh;
  }

  90% {
    opacity: .1;
    z-index: 13;
    width: 300vw;
    height: 600vh;
  }
  91% {
    opacity: 0;
    z-index: -1;
    width: 300vw;
    height: 600vh;
  }
  93% {
    opacity: 0;
    z-index: -1;
    width: 300vw;
    height: 600vh;
  }
  100% {
    opacity: 0;
    z-index: -1;
    width: 300vw;
    height: 600vh;
  }
}