/* color palette as follows
think VAPORWAVE

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

end color pallete */

*{
  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 1fr 1fr 1fr;
  grid-template-rows: 0.6fr 0.1fr 1.5fr 1.2fr .3fr;
  grid-template-areas:
  "header header header header"
  "nav nav nav nav"
  "main main main sidebar"
  "main main main sidebar"
  "footer footer footer 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;
}

main p{
  color: #05ffa1;
  font-family: monospace;
  font-size: 20px;
}

main iframe{
  float: right;
}

/* BEGIN SIDEBAR CONTENT */
#sidebar {
  display: flex;
  flex-direction: column;
  color: white;
  background: black;
  grid-area: sidebar;
  justify-content: space-around;
  text-align: center;
  align-items: center;
  object-fit: cover;
}

/* BEGIN CONTENT 1 (FAR LEFT) */
#content1 {
  background: black;
  grid-area: content1;
  color: white;
  text-align: center;
}

/* END CONTENT 1 */

/* BEGIN CONTENT 2 (MIDDLE) */
#content2 {
  background: black;
  grid-area: content2;
  color: white;
  text-align: center;
}
/* END CONTENT 2 */

/* BEGIN CONTENT 3 (RIGHT) */
#content3 {
  background: black;
  grid-area: content3;
  color: white;
  text-align: center;
}

/* END CONENT 3 */
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 .8fr 5fr 5fr .8fr .4fr;
    grid-template-areas:
    "header"
    "nav"
    "main"
    "main"
    "main"
    "main"
    "sidebar"
    "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;
  }
}