:root {
  --max--width: 1350px;

  --background: #035033;

  --avatar-frame-color: #e8e8e5;

  --color-primary: #f7f7f7;
  --color-black: #000000;
  --color-white: #ffffff;

  --color-gray: #8b8b8b;

  --color-green: #7fd856;
  --color-red: #ff312f;
  --color-blue: #004bad;
  --color-cyan: #5ee0e6;
  --color-purple: #8b52ff;
  --color-yellow: #ffdc03;
  --color-orange: #ff8c00;

  /* brands */
  --color-twitch: #6441a5;

  /* inputs */
  --input-background-color: #f7f7f7;
  --input-border-color: #000000;
  --input-shadow-color: #000000;
  --input-color: #000000;

  --input-background-color--disabled: #8a8a8a;
  --input-border-color--disabled: #000000;
  --input-shadow-color--disabled: #000000;
  --input-color--disabled: #000000;

  --input-background-color--hover: #d8d8d8;
  --input-border-color--hover: #000000;
  --input-shadow-color--hover: #000000;
  --input-color--hover: #000000;

  --input-background-color--focus: #d8d8d8;
  --input-border-color--focus: #000000;
  --input-shadow-color--focus: #000000;
  --input-color--focus: #000000;
}

* {
  box-sizing: border-box;
}

@font-face {
  font-family: 'Bangers';
  src: url('/fonts/jays-bangers.ttf') format('truetype');
}

html, body {
  background-color: var(--background);
  color: var(--color-primary);
  font-family: 'Bangers', sans-serif;
  margin: 0;
  padding: 0;
  inline-size: 100dvi;
  min-block-size: 100vh;
  overflow-x: clip;

  & img {
    object-position: center;
  }

  & input {
    background-color: var(--color-white);
    border: 3px solid black;
    color: var(--color-black);
    font-family: 'Bangers', sans-serif;
    font-size: 1rem;
    padding: 0.4rem;

    &[type="file"] {
      &::-webkit-file-upload-button {
        background-color: var(--color-black);
        border: none;
        color: var(--color-white);
        cursor: pointer;
        font-family: 'Bangers', sans-serif;
        font-size: 1rem;
        padding: 0.45rem;
      }
    }
  }

  .tippy-box {
    background: var(--color-white);
    border: 3px solid var(--color-black);
    box-shadow: 8px 8px 0 hsl(from var(--color-black) h s l / 80%);
    border-radius: 0;
    font-family: sans-serif;
    font-weight: 900;
    font-size: 20px;

    & .tippy-content {
      color: var(--color-black);
    }

    & .tippy-arrow {
      color: var(--color-white);
      filter:
        drop-shadow(0 -1px 0 var(--color-black))
        drop-shadow(0 -1px 0 var(--color-black))
        drop-shadow(0 -1px 0 var(--color-black))
      ;
    }
  }
}

@keyframes swinging-bauble {
  0% { transform: rotate(8deg); }
  50% { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}