/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {  
  background-color: white;
  color: black;
  font-family: Verdana;
}

h1 {
  font-size: 70px;
  margin: 10px;

}


/* CLASSES */

/* positioning */
.center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh
  
}
  
.footer-image {
  position: fixed;
  bottom: 20px;
  width: 350px;
  height: auto;
}

 

/* font shenanigans */
.darumadrop-one-regular {
  font-family: "Darumadrop One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.work-sans-subheading {
  font-family: "Work Sans", sans-serif;
  font-weight: bold;
  font-style: normal;
  color: #1EA5E9
}


.work-sans-normal {
  font-family: "Work Sans", sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #1C1C1C
}



/*  _------------------------------------------------------------MENU BUTTONS*/
#menuItems {
  display: none;
  }

#menuItems.show {
  display: flex;

  /* Put buttons in rows */
  flex-wrap: wrap;

  /* Center everything */
  justify-content: center;
  align-items: center;

  /* Space between buttons */
  gap: 20px;

  /* Space above the buttons */
  margin-top: 25px;

  /* Keep the menu from becoming too wide */
  max-width: 900px;

  /* Center the whole block */
  margin-left: auto;
  margin-right: auto;
}

.drawnButton {
  width: auto;       /* change this number to make all buttons bigger/smaller */
  height: 50px;       /* keep proportions */
  
}


.homeButton {
  position: fixed;
  top: 20px;
  right: 20px;
  transition: transform 0.2s ease;
  z-index: 1000;
}


.homeButton:hover {
  transform: scale(1.1) rotate(2deg);
}


  
.itemButton {
  display: block;
  transition: transform 0.2s ease;

}

.itemButton:hover {
  transform: scale(1.1) rotate(2deg);;
}



/*  ------------------------------------------------------------------------*/

#photoSelectItems {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 30px;
}

.categoryButton {
  width: 400px;
  height: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.categoryButton:hover {
  transform: scale(1.05);
}

#gallery {
  margin-top: 40px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;

  min-height: 200px;
}

#gallery img {
  width: 75%;
  height: auto;

  opacity: 0;
  transform: translateY(-20px) scale(0.95);
  animation: flyIn 0.35s ease forwards;
}

@keyframes flyIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}