/* 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: .75fr 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"
  "sidebar main main main"
  "sidebar content1 content2 content3"
  "footer footer footer footer";
  grid-gap: 0.5rem;
}

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

/* 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{
  background: black;
  grid-area: main;
  padding: 20px;
}

#main_img{
  float: right;
  padding: 20px;
}

main h2{
  color: #01cdfe;
  font-family: monospace;
  font-size: 25px;
}

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


/* 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;
}

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

#sidebar h3{
  color: #05ffa1;
  padding: 10px;
  font-family: monospace;
  font-size: 20px;
}

#sidebar img {
  width: 100%;
  height: 25%;
  object-fit: cover;
}

#last_side{
  align-items: flex-end;
}

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

#content1 h2{
  text-align: center;
  font-family: monospace;
  text-decoration: underline;
  padding: 20px;
  color: #b967ff;
  background: #fffb96;
}

#content1 h3{
  padding: 10px;
  color: #ff71ce;
  font-size: 1.5rem;
}

#content1 img {
  padding: 0;
  margin: 10px;
  border: 3px #fffb96 solid;
  border-radius: 10px;
}
/* END CONTENT 1 */

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

#content2 h2{
  text-align: center;
  font-family: monospace;
  padding: 20px;
  text-decoration: underline;
  color: #b967ff;
  background: #fffb96;
}

#content2 h3{
  padding: 5px;
  color: #ff71ce;
  font-size: 1.5rem;
}

#content2 img {
  padding: 0;
  margin: 10px;
  border: 3px #fffb96 solid;
  border-radius: 10px;
}
/* END CONTENT 2 */

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

#content3 h2{
  text-align: center;
  font-family: monospace;
  padding: 20px;
  text-decoration: underline;
  color: #b967ff;
  background: #fffb96;
}

#content3 h3{
  padding: 5px;
  color: #ff71ce;
  font-size: 1.5rem;
}

#content3 img {
  padding: 0;
  margin: 10px;
  border: 3px #fffb96 solid;
  border-radius: 10px;
}
/* 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 .8fr .8fr .8fr .4fr;
    grid-template-areas:
    "header"
    "nav"
    "main"
    "content1"
    "content2"
    "content3"
    "sidebar"
    "footer";
  }

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

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

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

  #bust {
    display: none;
  }
}