:root {
  --main-colors-1: #eed7ac;
  --main-colors-2: #2a1f07;
  --main-colors-3: #8b9525;
}

@font-face {
  font-family: 'ByteBounce';
  src: url('./assets/ByteBounce.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  font-size: 8rem;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: ByteBounce, serif;
  background-color: var(--main-colors-3);

  p {
    font-size: 2rem;
  }

  .main {
    height: 100%;
  }

  .main-logo {
    background-image: url('./assets/logo_vert3.png');
    height: 8em;
    width: 15em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    &.animated {
      background-image: url('./assets/gif/logo-name-animation-T.gif');
      height: 10em;
      width: 18em;
    }
  }

  .box-centered {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .welcome-loading {
    opacity: 1;
    transition: opacity 1s ease;

    ruby {
      ruby-position: over; /* ensure furigana is on top */
    }

    rt {
      font-size: 0.6em;       /* adjust size of furigana */
      margin-bottom: 0.5em;  /* adds space *between* kanji and furigana */
      letter-spacing: 0.1em;  /* spreads furigana letters a bit */
    }
  }
  
  .is-fading-out {
    opacity: 0;
  }

  .hidden {
    display: none;
  }

  .home {

    .normal {
      color: var(--main-colors-1);
      font-size: 2rem;
    }

    .big {
      color: var(--main-colors-1);
      font-size: 4rem;
      padding: 1rem 2.5rem;
      border: 3px solid var(--main-colors-1);
      background-color: var(--main-colors-2);
      cursor: pointer;
    }

    .icons {
      > * {
        height: 3em;
        width: 3em;
        background-size: 78px;
        background-position: -14px -14px;
        background-repeat: no-repeat;
        cursor: pointer;
      }
      
      display: flex;

      .email-icon {
        background-image: url('./assets/mail-icon-t.png');
      }
      .ig-icon {
        background-image: url('./assets/ig-icon-t.png');
      }
      .x-icon {
        background-image: url('./assets/x-icon-t.png');
      }
      .ng-icon {
        background-image: url('./assets/newgrounds-icon-t.png');
      }
      .tt-icon {
        background-image: url('./assets/tiktok-icon-t.png');
      }
      .cara-icon {
        background-image: url('./assets/cara-icon-t.png');
      }
      .threads-icon {
        background-image: url('./assets/threads-icon-t.png');
      }
    }
  }

  .portfolio {

    &.container {
      width: 100%;
      // display: flex;
      // justify-content: center;
      // height: 94%;
      // gap: 10px;
      // padding: 1rem 0;
      .loading-message {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 92px;

        &.hidden {
          display: none;
        }
      }

      > div {
        flex: 0 0 120px;
        border-radius: 0.5rem;
        // transition: 0.5s ease-in-out;
        cursor: pointer;
        box-shadow: 1px 5px 15px black;
        position: relative;
        overflow: hidden;
        height: 100px;

        &.loading {
          filter: blur(2px);
        }

        &:nth-of-type(1) {
          background: url('./assets/gif/1k\ ig.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(2) {
          background: url('./assets/gif/arcade.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(3) {
          background: url('./assets/gif/bass\ girl.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(4) {
          background: url('./assets/gif/Chill.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 97vw;
          }
        }
        &:nth-of-type(5) {
          background: url('./assets/gif/Fresh\ air.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 97vw;
          }
        }
        &:nth-of-type(6) {
          background: url('./assets/gif/Galaga.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 117vw;
          }
        }
        &:nth-of-type(7) {
          background: url('./assets/gif/Gamegirl.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(8) {
          background: url('./assets/gif/Halloween\ 25.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(9) {
          background: url('./assets/gif/Hi.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 97vw;
          }
        }
        &:nth-of-type(10) {
          background: url('./assets/gif/Kawaii.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(11) {
          background: url('./assets/gif/MENSAJE\ ES.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(12) {
          background: url('./assets/gif/Nail\ art.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 97vw;
          }
        }
        &:nth-of-type(13) {
          background: url('./assets/gif/oishii.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(14) {
          background: url('./assets/gif/Out\ of\ money.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(15) {
          background: url('./assets/gif/photo\ cute\ ES.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(16) {
          background: url('./assets/gif/Plants.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(17) {
          background: url('./assets/gif/rain\ girl\ G.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(18) {
          background: url('./assets/gif/reze.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(19) {
          background: url('./assets/gif/ride.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(20) {
          background: url('./assets/gif/Space\ girl\ G.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(21) {
          background: url('./assets/gif/spring\ girl.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(22) {
          background: url('./assets/gif/Stickers.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 97vw;
          }
        }
        &:nth-of-type(23) {
          background: url('./assets/gif/Swords.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 97vw;
          }
        }
        &:nth-of-type(24) {
          background: url('./assets/gif/travel\ ESP.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(25) {
          background: url('./assets/gif/Victory.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 97vw;
          }
        }
        &:nth-of-type(26) {
          background: url('./assets/gif/Waiting.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
        &:nth-of-type(27) {
          background: url('./assets/gif/Wind.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 97vw;
          }
        }
        &:nth-of-type(28) {
          background: url('./assets/gif/Wish.gif')
            no-repeat 50% / cover;

          &.zoom {
            height: 173vw;
          }
        }
      }
    }

  }
}

.glass-effect {
  width: 300px;
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  border-radius: 10px; /* optional */
}

/* Create glass "blink" animation as a sweeping light */
.glass-effect::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: blink-glass 2.5s infinite;
}

@keyframes blink-glass {
  0% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}