:root {
  --pink: #F94F5A;
  --purp: #374A84;
  --navy: #00072D;
  --blue: #001C55;
  --li-blue: #A6E1FA;
  --lav: #a682ff;
  --dk-lav: #715aff;
  --fire: #FB3640;
  --green: #1EFFBC;
  --dk-green: #3ddc97;
  --teal: #17bebb;
  --dk-teal: #004e64;
  --light1: var(--li-blue);
  --light2: var(--lav);
  --light3: var(--dk-lav);
  --light4: white;
  --dark1: var(--purp);
  --dark2: var(--blue);
  --dark3: var(--navy);
  --dark4: black;
  --pop1: var(--fire);
  --pop2: var(--pink);
  --pop3: var(--green);
  --pop4: var(--dk-green);
  --pop5: var(--teal);
  --pop6: var(--dk-teal);
}

body {
  font-family: 'Open Sans', sans-serif;
  background: var(--navy);
  color: var(--li-blue);
}

#main-nav {
  font-size: 1.5em;
  font-family: 'Staatliches', monospace;
}

#main-nav ul {
  margin: 0;
  list-style: none;
  padding: .5em;
}

@media screen and (min-width: 600px) {
  #main-nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

#main-nav li {
  padding: .5em 0;
}

#main-nav button {
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  color: var(--dk-lav);
  background: none;
  border: none;
  border-left: 3px solid var(--li-blue);
  margin: 0 .4em;
  cursor: pointer;
  outline-style: none;
  padding-left: .3em;
}

@media screen and (min-width: 600px) {
  #main-nav button {
    padding: .1em 0;
    border-left: none;
    padding-left: 0;
    border-bottom: 3px solid var(--navy);
  }
}

#main-nav button:hover {
  color: var(--fire);
  padding-left: .7em;
  border-color: var(--dk-lav);
}

@media screen and (min-width: 600px) {
  #main-nav button:hover {
    padding-left: 0;
    margin: 0 1em;
  }
}

#main-nav button:focus {
  color: var(--lav);
  margin: 0 .4em;
  border-color: var(--green);
}

@media screen and (min-width: 600px) {
  #main-nav button:focus {
    border-color: var(--navy);
  }
}

#main-nav button:active {
  border-color: var(--fire);
}

#header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: header;
}

#main {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: main;
}

#footer {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  grid-area: footer;
}

.tbd {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: tbd;
  background: var(--dk-lav);
}

#main,
section {
  margin: auto;
  padding: 1em;
}

body {
      grid-template-areas: "header" "main" "tbd" "footer";
}

@media screen and (min-width: 600px) {
  body {
    background: black;
        grid-template-areas: "header header header" "main main tbd" "footer footer footer";
  }
}

#hero {
  display: -ms-grid;
  display: grid;
  padding: 0;
}

#hero picture {
  -ms-grid-row: 1;
  grid-row: 1;
  -ms-grid-column: 1;
  grid-column: 1;
}

#hero img {
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  object-fit: contain;
}

#hero-portrait {
  -ms-flex-item-align: end;
      -ms-grid-row-align: end;
      align-self: end;
  -ms-grid-column-align: center;
      justify-self: center;
  max-width: 60vmax;
}

#hero-portrait img {
  margin-top: 20vh;
}

#hero-background {
  -ms-grid-row: 1;
  grid-row: 1;
  -ms-grid-column: 1;
  grid-column: 1;
  background: white;
  background-image: linear-gradient(350deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, black 90%), url("https://bunkrich.github.io/tsquared/img/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#hero-banner {
  -ms-grid-column-align: center;
      justify-self: center;
}

#hero-banner img {
  padding-top: 5vmax;
  max-width: 80vmin;
}

#hero-logo {
  -ms-grid-column-align: center;
      justify-self: center;
}

#hero-logo img {
  margin-top: 10vmin;
}

/* Tiny reset thingy */
.wrapper {
  /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
  height: 100vh;
  /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
  overflow-x: hidden;
  /* Enable scrolling on the page. */
  overflow-y: auto;
  /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
  -webkit-perspective: 2px;
          perspective: 2px;
}

#todd {
  height: 100vh;
  /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
  overflow-x: hidden;
  /* Enable scrolling on the page. */
  overflow-y: auto;
  /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
  -webkit-perspective: 2px;
          perspective: 2px;
  border: 3px solid yellow;
}

.pic-para {
  background-color: pink;
  opacity: .5;
  border: 3px solid orange;
}

.section, .pic-para {
  /* Needed for children to be absolutely positioned relative to the parent. */
  position: relative;
  /* The height of the container. Must be set, but it doesn't really matter what the value is. */
  height: 100vh;
  /* For text formatting. */
}

.parallax::after, .pic-para::after {
  /* Display and position the pseudo-element */
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
  -webkit-transform: translateZ(-1px) scale(1.5);
          transform: translateZ(-1px) scale(1.5);
  /* Force the background image to fill the whole element. */
  background-size: 100%;
  /* Keep the image from overlapping sibling elements. */
  z-index: -1;
}

/* The styling for the static div. */
.static {
  background: red;
}

/* Sets the actual background images to adorable kitties. This part is crucial. */
.bg1::after {
  background-image: url("/img/background.jpg");
}

.bg2::after {
  background-image: url("https://placekitten.com/g/800/600");
}

img {
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
}

#parallax-container {
  display: block;
  height: 500px;
  margin-bottom: 50px;
}

#parallax-container div {
  position: fixed;
  top: 0;
  background-position: center !important;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  height: 500px;
  width: 100%;
  max-width: 500px;
  right: 0;
  left: 0;
  margin-right: auto;
  margin-left: auto;
}

#content {
  position: relative;
  background: var(--navy);
  z-index: 100;
}
/*# sourceMappingURL=main.css.map */