/* color palette as follows
think VAPORWAVE

#ff71ce
#01cdfe
#05ffa1
#b967ff
#fffb96

end color pallete */

*{
  font-family: monospace, monospace;
  margin: 0;
  padding: 0;
}

/* this is how you create resusable variable */
:root{
  --main-radius:5px;
  --main-padding:5px;
}
.container{
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr;
  grid-template-rows: 0.6fr 0.1fr 70vh .25fr;
  grid-template-areas:
  "header"
  "nav"
  "main"
  "footer";
  grid-gap: 0.5rem;
}

/* change color of background */
html{
  background-image: linear-gradient(#ff71ce,#01cdfe);
  background-repeat: repeat-y;
}

/* BEGIN HEADER */
header {
  background-image: url("../assets/header_vw.gif");
  background-size: 100% 100%;
  grid-area: header;
}

#hdr_imgs {
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
}
/* END HEADER */

/* BEGIN FLEXBOX NAV CODE */
nav{
  background: black;
  grid-area: nav;
  padding: 20px;
}

#nav_list{
  list-style: none;
  display: flex;
  justify-content: space-around;
}

#nav_list li a{
  color: #01cdfe;
  text-decoration: none;
  font-family: monospace;
  font-size: 20px;
}

#nav_list li a:hover{
  color: #fffb96;
  text-decoration: underline overline;
  font-style: italic;
}

#dropdown{
  display: none;
}

#nav_menu ul li:hover > ul {
  list-style: none;
  position: absolute;
  background: black;
  display: block;
  border: 3px #ff71ce solid;
}

#nav_menu ul li ul li{
  padding:5px;
}
/* END NAV CODE */

/* BEGIN MAIN CODE */
main{
  text-align: center;
  background: black;
  grid-area: main;
  padding: 20px;
  overflow: auto;
}


/* --- for about page, review function --- */
#review{
  color: white;
  display: inline-block;
}

main p{
  color: #05ffa1;
  font-size: 20px;
  margin-top: 30px;
  text-align: center;
}

main iframe{
  text-align: center;
}

main #left-list{
  color: white;
  list-style-type: none;
}

main h2{
  font-size: 25px;
  padding-top: 25px;
  color: #01cdfe;
}

footer{
  background-image: url("../assets/header_vw.gif");
  background-size: 100% 100%;
  color: #ff71ce;
  grid-area: footer;
}

#footer_text{
  text-align: center;
  padding: 30px;
  font-size: 20px;
}

/* sets the order of the elements based on < 550px screen size */
@media only screen and (max-width:800px){
  .container{
    grid-template-columns: 100%;
    grid-template-rows: 0.4fr 0.2fr 2fr 5vh;
    grid-template-areas:
    "header"
    "nav"
    "main"
    "footer";
  }

  #nav_list{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  header{
    grid-area: header;
    display: flex;
    justify-content: center;
  }

  #hdr_img{
    width: 100%;
    max-width: 550px;
  }

  main{
    display: grid;
    justify-content: center;
    align-items: center;
  }

  #bust {
    display: none;
  }
}