/* small devices (phones, 600px and up) */

:root {
 --font: Recoleta;
 --green: #2a644f; 
 --lavender: #a18fdf;
 --yellow: #f2b963;
 --ivory: #fbf5ea;
  background-color: var(--ivory);
}

body {
  margin: 0;
  height: 100vh;
}

#navbar{
  padding: 1rem;
  display:flex;
  justify-content: space-around;
  align-items: end;
  font-family: var(--font);
  font-weight: bold;
  color: var(--ivory);
  background-color: var(--green);
  margin: 0px;
}

.navlink {
  display: none;
}

a {
  color: unset;
  text-decoration: none;
}

.navlink:hover{
  color: var(--yellow);
}

#navbar-logo {
  max-height: 15vh;
} 

.menu {
  display: inline;
}

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

.contentbox {
color: var(--green);
width: 100%;
display:flex;
flex-direction: column;
align-items: center;
padding: 1rem 0;
}

.innercontent{
width: 50vw;
}

.horizontalbox {
display: flex;
justify-content:space-around;
flex-wrap: wrap;
}

.lav {
background-color: var(--lavender);
color: var(--ivory);
}

.galleryimg {
 max-width: 30%;
 object-fit: cover;
}

#meet {
  display: none;
}

.artist {
  max-width:unset;
  text-align: center;
  border: solid 3px var(--green);
  border-radius: 5px;
  padding: 1rem;
  margin: 1rem auto;
}

.artist:hover {
  background-color: var(--green);
  color: var(--ivory);
}

#shop h3 {
  margin: -2rem 0 2rem 0;
}

#wip {
  max-height: 90vh;
  max-width: 80vw;
  aspect-ratio: 1;
  margin: 0 auto 0 auto;
  color:var(--green);
  text-align: center;
}

#wiplogo {
width:100%;
}

#footer {
  background-color: var(--green);
  position: fixed;
  width: 100%;
  bottom: 0;
  color: var(--ivory);
  padding: .5rem;
}

 /* small devices (phones, 650px and up) */
@media only screen and (min-width: 650px) {

  .navlink {
    display: inline;
  }
  
   .menu {
    display: none;
  }

  .innercontent {
  width: 90%;
  }  

  .artist {
  max-width:40%;
  }
}

/* Medium devices (landscape tablets, 1000px and up) */
@media only screen and (min-width: 1000px) {
  .artist {
  max-width:27%;
  }
}
   .innercontent {
  width: 60%;
  } 
}