@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Xanh+Mono:ital@0;1&display=swap');

#light {
    z-index: 0;
    width: min(700px, 90vw);
    height: min(700px, 90vw);
}

#noise {
  width: 100%;
  height: 100%;
  margin-top: -45%;

  position: relative;
  isolation: isolate;
}

#noise::before,
#noise::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--background);
  transition: background 0.3s;
}

#noise::after {
  background: var(--foreground);
  mix-blend-mode: normal;
  mask-image: url('../assets/img/mask.png');
  mask-position: 50% 50%;
  mask-size: cover;
  mask-repeat: no-repeat;

  -webkit-mask-image: url('../assets/img/mask.png');
  -webkit-mask-position: 50% 50%;
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  transition: background 0.3s;
}

#text {
    font-family: var(--decoratory-font);
}

#text #axolum {
    font-size: 100px;
}

#text #quote {
    font-size: 40px;
}

@media (max-width: 630px) {
    #text #axolum {
        font-size: 60px;
    }

    #text #quote {
        font-size: 25px;
    }
}