/* RHEA */
@font-face {
  font-family: "PexicoMicroRegular";
  src: url("/shrines/ai_art/style/PexicoMicroRegular/font.woff2")
      format("woff2"),
    url("/shrines/ai_art/style/PexicoMicroRegular/font.woff") format("woff");
}
@font-face {
  font-family: "MultiTypeGamerGridDisplay";
  src: url("/shrines/ai_art/style/MultiTypeGamerGridDisplay/font.woff2")
      format("woff2"),
    url("/shrines/ai_art/style/MultiTypeGamerGridDisplay/font.woff")
      format("woff");
}
@font-face {
  font-family: "QuarantypeSackrace";
  src: url("/shrines/ai_art/style/QuarantypeSackrace/font.woff2")
      format("woff2"),
    url("/shrines/ai_art/style/QuarantypeSackrace/font.woff") format("woff");
}
@font-face {
  font-family: "AntapaniExtraBold";
  src: url("/shrines/ai_art/style/AntapaniExtraBold/font.woff2") format("woff2"),
    url("/shrines/ai_art/style/AntapaniExtraBold/font.woff") format("woff");
}
@font-face {
  font-family: "NowGrotesk";
  src: url("/shrines/ai_art/style/NowGrotesk/font.woff2") format("woff2"),
    url("/shrines/ai_art/style/NowGrotesk/font.woff") format("woff");
}

body {
  background-color: lime;
  border: 4px solid #c1c1c1;
  margin: 30px;
}

main {
  background-color: yellow;
  padding: 30px;
}

header,
footer {
  background-color: #d7d7d7;
  display: flex;
  justify-content: space-between;
  font-family: "PexicoMicroRegular";
}

header button {
  border: 3px outset white;
}

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

#close,
#min,
#max {
  border: 2px solid #868686;
  outline: 1px outset white;
  margin-right: 4px;
  width: 30px;
  height: 30px;
  background-color: #d7d7d7;
  display: flex;
  justify-content: center;
  align-items: center;
}

#close:hover {
  cursor: pointer;
}

#buttons,
#tabs {
  display: flex;
  flex-direction: row;
  margin: 6px;
}

.tab {
  background-color: #d7d7d7;
  width: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #868686;
}

.tab:hover {
  border: 3px outset white;
  background-color: black;
}

#active-tab {
  background-color: yellow;
  border: 3px outset white;
}

.tab:hover a {
  color: white;
}

#folder-button {
  display: none;
  height: 110px;
  width: 110px;
  position: absolute;
  top: 10px;
  left: 10px;
  background: none;
  border: none;
}

#folder-button img {
  width: 90px;
  height: 90px;
}

/* for gallery */

.hello {
  opacity: 1 !important;
}

.full {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.full .content {
  background-color: rgba(127, 255, 0, 0.75) !important;
  height: 100%;
  width: 100%;
  display: grid;
}

.full .content img {
  left: 50%;
  transform: translate3d(0, 0, 0);
  animation: zoomin 1s ease;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.byebye {
  opacity: 0;
}

.byebye:hover {
  transform: scale(0.2) !important;
}

.gallery {
  display: grid;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 8px;
}

.gallery img {
  max-width: 100%;
}

.gallery .content {
  padding: 4px;
}

.gallery .gallery-item {
  transition: grid-row-start 300ms linear;
  transition: transform 300ms ease;
  transition: all 0.5s ease;
  cursor: pointer;
}

.gallery .gallery-item:hover {
  border: 5px solid turquoise;
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  }
}

@media (max-width: 400px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  }
}

@-moz-keyframes zoomin {
  0% {
    max-width: 50%;
    transform: rotate(-30deg);
    filter: blur(4px);
  }

  30% {
    filter: blur(4px);
    transform: rotate(-80deg);
  }

  70% {
    max-width: 50%;
    transform: rotate(45deg);
  }

  100% {
    max-width: 100%;
    transform: rotate(0deg);
  }
}

@-webkit-keyframes zoomin {
  0% {
    max-width: 50%;
    transform: rotate(-30deg);
    filter: blur(4px);
  }

  30% {
    filter: blur(4px);
    transform: rotate(-80deg);
  }

  70% {
    max-width: 50%;
    transform: rotate(45deg);
  }

  100% {
    max-width: 100%;
    transform: rotate(0deg);
  }
}

@-o-keyframes zoomin {
  0% {
    max-width: 50%;
    transform: rotate(-30deg);
    filter: blur(4px);
  }

  30% {
    filter: blur(4px);
    transform: rotate(-80deg);
  }

  70% {
    max-width: 50%;
    transform: rotate(45deg);
  }

  100% {
    max-width: 100%;
    transform: rotate(0deg);
  }
}

@keyframes zoomin {
  0% {
    max-width: 50%;
    transform: rotate(-30deg);
    filter: blur(4px);
  }

  30% {
    filter: blur(4px);
    transform: rotate(-80deg);
  }

  70% {
    max-width: 50%;
    transform: rotate(45deg);
  }

  100% {
    max-width: 100%;
    transform: rotate(0deg);
  }
}