@charset "UTF-8";

@import "norm.css";
@import "vars.css";
@import "components/things.css";
@import "main.css";

@layer font-face{
  @font-face {
    font-family: "Nasalization";
    src: url("../fonts/nasalization.otf") format("opentype");
  }

  @font-face {
    font-family: "Peridot";
    src: url("../fonts/peridot.otf") format("opentype");
    font-weight: 400;
  }
}

@layer base{
  html {
    height: 100dvh;
    width: 100vw;
  }

  body {
    height: 100dvh;
    width: 100vw;
    font: 3.5vw/1.5 var(--font);
    user-select: none;
    background:#000;
  }
  @media (min-aspect-ratio: 1/1) {
    body {
      font-size: 3vw;
    }
  }
  @media (min-aspect-ratio: 4/3) {
    body {
      font-size:2vw;
      @supports (font-size:sqrt(16vw)) {
        font-size: sqrt(16vw);
      }
    }
  }
  @media (min-aspect-ratio: 16/9) {
    body {
      font-size:1.75vh;
      @supports (font-size:sqrt(22vh)) {
        font-size:sqrt(22vh);
      }
    }
  }

  #wrap {
    position: relative;
    width:100%;
    height:100%;
    overflow:auto;
    scrollbar-width: none;
    @media (min-aspect-ratio:4/3){
      overflow: hidden;
    }
    &::-webkit-scrollbar{
      display:none;
    }
  }
}