@font-face {
  font-variation-settings: "FILL" 1;
  font-family: "Material Symbols";
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url(/material-symbols.woff2) format("woff");
}

mi {
  content: "";
  font-variation-settings: "FILL" 1;
  font-family: "Material Symbols";
  font-style: normal;
  font-weight: 400;
  font-size: 0.68em;
  word-wrap: normal;
  -moz-osx-font-smoothing: grayscale;
  direction: ltr;
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;

  &[mid] {
    font-size: 42px;
  }

  &[wide] {
    font-size: 62px;
  }
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  outline: 0;
  font-style: inherit;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  font-family: "Material", sans-serif;
  /* letter-spacing: -.06em; */

  &,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}

html {
  font-size: 100%;
}

body {
  font-family: "Roboto", sans-serif;
  background: #14080e;
  color: #e9eb9e;
}

[floating-content] {
  display: flex;
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  text-align: center;
  width: 100vw;
  max-width: 750px;
  flex-direction: column;
  align-items: center;
  gap: 1.2em;

  @media screen and (max-width: 780px) {
    padding-inline: 2.8em;
  }
}

ip-container {
  padding-inline: clamp(12px, 3.4vw, 120px);
  padding-block: clamp(12px, 3vw, 42px);
  background: #6b2784;
  border-radius: 0 clamp(32px, 4vw, 240px) clamp(32px, 4vw, 240px);

  [ip] {
    position: relative;
    font-weight: 700;
    font-size: clamp(2.4em, calc(8vw + 0.5em), 12em);
    line-height: 1;
    margin: 0;

    /*
    @media screen and (max-width: 780px) {
      font-size: 4.8em;
    }

    @media screen and (max-width: 640px) {
      font-size: 2.4em;
    } */

    [dot] {
      position: absolute;
      bottom: calc(1vw + 0.02em);
      right: calc(-4.2vw + -0.02em);
      height: clamp(12px, 3vw, 42px);
      min-width: clamp(12px, 3vw, 42px);
      border-radius: 50%;
      background: white;
    }
  }
}

* {
  transition: all 0.1s linear;
}

a {
  color: inherit;
  text-decoration: none;

  &:hover {
    opacity: 0.8;
  }
}

[background] {
  &[background="slight-light"] {
    background: rgba(255, 255, 255, 0.24);
  }

  &[background="slighter-light"] {
    background: rgba(255, 255, 255, 0.12);
  }

  &[background="slighterer-light"] {
    background: rgba(255, 255, 255, 0.08);
  }

  &[background="slightest-light"] {
    background: rgba(255, 255, 255, 0.04);
  }
}

[box] {
  background: #49475b;
}

[text] {
  &[smol] {
    font-size: 0.8em;
  }
}

[fl] {
  display: flex;

  &[fldircol] {
    flex-direction: column;
  }

  &[alic] {
    align-items: center;
  }

  &[alistart] {
    align-items: flex-start;
  }

  &[jucc] {
    justify-content: center;
  }

  &[jucsb] {
    justify-content: space-between;
  }
}

[gap] {
  gap: 1.2em;

  &[gap="smol"] {
    gap: 0.8em;
  }
}