:root {
  --ev-c-white: #ffffff;
  --ev-c-white-soft: #f8f8f8;
  --ev-c-white-mute: #f2f2f2;

  --ev-c-black: #1b1b1f;
  --ev-c-black-soft: #222222;
  --ev-c-black-mute: #282828;

  --ev-c-gray-1: #515c67;
  --ev-c-gray-2: #414853;
  --ev-c-gray-3: #32363f;

  --ev-c-text-1: rgba(255, 255, 245, 0.86);
  --ev-c-text-2: rgba(235, 235, 245, 0.6);
  --ev-c-text-3: rgba(235, 235, 245, 0.38);

  --ev-button-alt-border: transparent;
  --ev-button-alt-text: var(--ev-c-text-1);
  --ev-button-alt-bg: var(--ev-c-gray-3);
  --ev-button-alt-hover-border: transparent;
  --ev-button-alt-hover-text: var(--ev-c-text-1);
  --ev-button-alt-hover-bg: var(--ev-c-gray-2);

  --color-vintage-white: #fff8e1;
  --color-coral: #FF7F50;
  --color-yellow-t: #FFCE1B;
  --color-red: #c61f1f;

  --color-blue: #3a7dc5; 
  --color-plum: #2a003f;
  --color-dark-teal: #003333; 
  --color-blurple: #2e2e5e;
  --color-violet-milky: #D8C5FF;

  --color-gold-flat: #d4af37; 
  --color-gold: linear-gradient(145deg, #ffd700, #ffb700);
  --color-gold-light: linear-gradient(145deg, #ffda2d, #ffc400);
  --color-gold-dark: linear-gradient(145deg, #e6b800, #cc9900);

  --gradient-fire: linear-gradient(to bottom, #ff6600, #ffcc00, #ffff00, #ff6600);

  --gradient-ff:  linear-gradient(120deg, #151515 0%, #1a1f24 20%, #2b3a44 50%, #1a1f24 80%, #151515 100%);
  
  --color-1: var(--ev-c-black);
  --color-2: var(--color-vintage-white);
  --color-3: var(--color-gold-flat);

  /* --text-shadow: 2px 2px 1px var(--color-1);
  --text-shadow-glow: 2px 2px 1px var(--color-1), 0 0 5px var(--color-2); */

  --text-shadow: drop-shadow(2px 2px 1px var(--color-1));
  --text-shadow-glow: drop-shadow(0 0 1px var(--color-2)) drop-shadow(2px 2px 1px var(--color-1));
  --text-shadow-glow2: drop-shadow(0 0 2px var(--color-violet-milky)) drop-shadow(0 0 1px var(--color-2)) drop-shadow(2px 2px 1px var(--color-1));
  --text-shadow-glow2-big: drop-shadow(0 0 15px var(--color-violet-milky)) drop-shadow(0 0 10px var(--color-2));

  --black-glow: drop-shadow(0px 0px 3px #1b1b1fa7) drop-shadow(-0px 0px 3px #1b1b1fa7) drop-shadow(-0px -0px 3px #1b1b1fa7) drop-shadow(0px -0px 3px #1b1b1fa7);
  --black-glow-big: drop-shadow(0px 0px 20px #1b1b1fa7) drop-shadow(-0px 0px 20px #1b1b1fa7) drop-shadow(-0px -0px 20px #1b1b1fa7) drop-shadow(0px -0px 20px #1b1b1fa7);
}
  
:root {
  --color-text: var(--color-1);
  --color-text-alt: var(--color-2);
  --color-text-dark: var(--ev-c-black);
  --color-text-light: var(--ev-c-white-soft);

  --color-bg: var(--color-2);
  --color-bg-alt: var(--color-1);

  --color-accent: var(--color-3);
  
  --color-good: #009A00FF;
  --color-bad: #9A0000FF;
  --color-selected: #FFFF00AF;

  --color-shadow: #666666;
  --color-shadow-dark: #333333;

}

@font-face {
  font-family: 'Cinzel Reg';
  src: url('/assets/fonts/Cinzel-Regular.ttf');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Cinzel Bold';
  src: url('/assets/fonts/Cinzel-Bold.ttf');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Cinzel Black';
  src: url('/assets/fonts/Cinzel-Black.ttf');
  font-weight: 400;
  font-style: normal;
}
  
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: normal;
  -moz-background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
  background-clip: padding-box !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: bold;
  letter-spacing: 1.4px;
  /* user-select: none;
  pointer-events: none; */
}
  
body {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-bg-alt);
  /* line-height: 1.6; */
  font-family:
    'Libertinus Mono',
    'Consolas',
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul {
  list-style: none;
}

button {
  outline: none;
  opacity: 1;
  border: none;
  cursor: pointer;
  background-color: transparent;
  user-select: visible;
  pointer-events: visible;
  color: inherit;
}

h1, h2, h3, h4, h5 {
  font-weight: bold;
  font-family:
    /* 'Libertinus Mono', */
    'Cinzel Black',
    'Consolas',
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  filter: var(--text-shadow-glow);
  /* -webkit-text-stroke: .1px var(--color-2); */
  padding: 0;
  margin: 0;
}

.avoid-wrap { display:inline-block; }

p {
    font-size: small;
    text-shadow: none;
}


.bold {
  font-family:
    'Cinzel Bold',
    'Consolas',
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif !important;
}

.mono {
  font-family:
    'Libertinus Mono',
    'Consolas',
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif !important;
}

.btn {
    background-color: var(--color-shadow);
    color: var(--color-1);
    box-shadow: 
        inset 0 0 10px var(--color-shadow);
    font-weight: bold;
    min-width: 90px;
    max-width: 200px;
    transition: all 0.2s ease-in-out;
    transition: background-position 0s;
    width: 100%;
    margin: .125rem;
    text-align: center;
    border-radius: 2px;
    padding: .5rem .5rem;

    -webkit-text-stroke: 1px var(--color-2);
    paint-order: stroke fill;

    font-family:
      'Cinzel Bold',
      'Consolas',
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      'Fira Sans',
      'Droid Sans',
      'Helvetica Neue',
      sans-serif;

    border: 2px solid var(--color-gold-flat);
    transition: all 1s ease;
    /*note: not transitioning width */
    transition-property: border, color, filter, box-shadow;
    animation: pulse 6s ease-in-out infinite;
}

.btn-alt {
  animation: pulse-big 1s ease-in-out infinite;
  border: 2px solid var(--color-2);
}

.btn p {
  font-size: large;
  letter-spacing: normal !important;
}

input {
  user-select: auto;
  pointer-events: all;
  border-radius: 2px !important;
  margin-right: .25rem; 
  text-align: right; 
  padding: .25rem;
  font-family: inherit;
  font-size: inherit;
}

a {
  user-select: auto;
  pointer-events: all;
  text-decoration: none;
  font-weight: bolder;
  font-family:
    'Cinzel Bold',
    'Consolas',
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
}

.card-link {
    color: var(--color-accent) !important;
    /* border: 1px solid var(--color-accent); */
    padding: 2px;
    filter: none;
    text-shadow: none;
}

.card-link a:visited {
    color: var(--color-accent) !important;
}


  .btn-tut {
      text-align: center;
      font-size: large;
      margin: .5rem;
      width: fit-content;
      color: var(--color-2);
      -webkit-text-stroke: 1px var(--color-1);
      paint-order: stroke fill;
      filter: var(--text-shadow);
      transition: filter .5s;
      font-family:
          'Cinzel Bold',
          'Consolas',
          Inter,
          -apple-system,
          BlinkMacSystemFont,
          'Segoe UI',
          Roboto,
          Oxygen,
          Ubuntu,
          Cantarell,
          'Fira Sans',
          'Droid Sans',
          'Helvetica Neue',
          sans-serif;
  }

  .btn-tut:hover {
      filter: var(--text-shadow-glow2-big);
  }

  .btn-tut:active {
      filter: var(--text-shadow);
  }


.box-link {
    color: var(--color-accent) !important;
    /* border: 1px solid var(--color-accent); */
    filter: none;
    text-shadow: none;
}

.box-link a:visited {
    color: var(--color-accent) !important;
}

/* Hide number input spin buttons */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    appearance: textfield;
    -moz-appearance:textfield; /* Firefox */
}

/* Hide input orange border on focus  */
input:focus {
    outline: none;
    box-shadow: none; 
}

p {
  text-align: center;
}

.row {
  display: flex;
  flex-direction: row;
}

.row-center {
  display: flex; 
  flex-direction: row; 
  justify-content: center;
}

.col {
  display: flex;
  flex-direction: column;
}

.col-center {
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center;
}

.space-between {
  justify-content: space-between;
}

.space-around {
  justify-content: space-around;
}

.flex-start {
  justify-content: flex-start;
}


.flex-end {
  justify-content: flex-end;
}

.scale-2 {
  transform: scale(2);
  transition: transform 0.5s ease;
}

.fill {
  width: 100%;
  height: 100%;
}

.fill-w {
  width: 100%;
}

.fill-h {
  height: 100%;
}

.h-50 {
  height: 50%;
}

.w-50 {
  width: 50%;
}

.w-33 {
  width: 33.33%;
}

.hidden {
  visibility: hidden !important;
  user-select: none !important;
  pointer-events: none !important;
}

.disabled {
  opacity: 0;
  display: none !important;
  pointer-events: none;
  user-select: none;
  -moz-user-select: none;
}

.disabled * {
  pointer-events: none;
  user-select: none;
  -moz-user-select: none;
}

.none, .none * {
  display: none !important;
}

.sunken {
  box-shadow: 
    inset 4px 4px 0px #13131330, 
    inset -2px -2px 0px #FFFFFF30;
}

.break {
  word-break: break-all;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.octagon {
  position: relative;
  clip-path: polygon(
      30% 0%, 70% 0%,
      100% 30%, 100% 70%,
      70% 100%, 30% 100%,
      0% 70%, 0% 30%
  );

  border-radius: 0 !important;
}

.data {
    color: var(--color-2);
    text-align: center;
    /* width: 80%; */
    max-width: 600px;
    /* background: rgba(1,1,1, .4); */
    padding: 5px 0;
}

.data p {
    filter: var(--text-shadow-glow);
    font-size: small;
}


.data span {
    /* filter: var(--text-shadow-glow); */
}

.info-outer .paragraph {
    color: var(--color-2);
    text-align: center;
    padding-bottom: 10px;
    font-family: "Gideon Roman";
    font-size: medium;
    filter: var(--text-shadow-glow);
}

.stats {
    width: 100%; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    margin-bottom: .25rem;
}

.marble-bg {
  background-color: var(--color-shadow);
  background-image: url("/assets/images/marble.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.marble-bg-blue {
  background-color: #d1e2ed;
  background-image: url("/assets/images/marble_blueLight2.png");
  background-size: contain;
  background-position: center;
  /* background-repeat: no-repeat; */
}

.marble-bg-red {
  background-color: #c86d74;
  background-image: url("/assets/images/marble_redLight2.png");
  background-size: contain;
  background-position: center;
  /* background-repeat: no-repeat; */
}

.marble-bg-dark {
  background-color: #33414e;
  background-image: url("/assets/images/marble-pillar-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dark-bg {
  background-color: rgba(1, 1, 1, 0) !important;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    /* transform: scale(1.2); */
    border: 2px solid var(--color-2);
    filter: brightness(120%);
  }

  .btn:hover p {
    color: var(--color-1);
    filter: brightness(120%);
  }

  .btn:active {
    /* transform: scale(1.2); */
    border: 2px solid var(--color-2);
    filter: none;
  }

  .btn:active p {
    color: var(--color-1);
    filter: none;
  }

  .card-link:hover {
    color: var(--color-2) !important;
  }

  .card-link:active {
      color: var(--color-accent) !important;
  }

  .box-link:hover {
    color: var(--color-2) !important;
  }

  .box-link:active {
    color: var(--color-accent) !important;
  }
      

  .glow:hover {
      transition: filter .5s;
      /* filter: drop-shadow(0 0 20px var(--color-2)); */
      filter: var(--text-shadow-glow2);
  }
}

@media (min-width: 1200px) { 
  .data {
      background: rgba(0,0,0,0);
  }

  .btn-tut {
      font-size: x-large;
  }


  /* .ui-container h2 {
      font-size: xx-large !important;
  } */

  .ui-container p {
      font-size: large;
  }
  .data p {
    font-size: medium;
    /* font-size: x-large; */
  }

  .dark-bg {
    background-color: rgba(1, 1, 1, .4) !important;
  }

  .info-outer .paragraph {
      font-size: large;
  }

  /* .btn p {
    font-size: large;
  } */
}


/* ANIMATIONS */
.pulse {
    animation: pulse 5s ease-in-out infinite;
}

@keyframes pulse {
    0% {
        color: var(--color-1);
        box-shadow: 
          inset 0 0 10px var(--color-shadow),
          0 0 15px #fff8e1ff,
          0 0 10px #fff8e1a7,
          0 0 5px #fff8e180;
    }

    50% {
        /* color: var(--color-2); */
        box-shadow:
          inset 0 0 10px var(--color-shadow),
          0 0 30px #fff8e1ff,
          0 0 20px #fff8e1a7,
          0 0 10px #fff8e180;
    }

    100% {
        color: var(--color-1);
        box-shadow: 
          inset 0 0 10px var(--color-shadow),
          0 0 15px #fff8e1ff,
          0 0 10px #fff8e1a7,
          0 0 5px #fff8e180;
    }
}

.pulse-fast {
    animation: pulse-big 1s ease-in-out infinite;
}

@keyframes pulse-big {
    0% {
        box-shadow:
          inset 0 0 5px var(--color-shadow),
          0 0 10px var(--color-2),
          0 0 0px var(--color-2),
          0 0 0px var(--color-2);
    }

    70% {
        box-shadow: 
          inset 0 0 5px var(--color-shadow),
          0 0 60px var(--color-2),
          0 0 20px var(--color-2),
          0 0 10px var(--color-2);
    }

    100% {
        box-shadow: 
          inset 0 0 5px var(--color-shadow),
          0 0 10px var(--color-2),
          0 0 0px var(--color-2),
          0 0 0px var(--color-2);
    }
}


.pulse-fast-filter {
    animation: pulse-big-filter 1s linear infinite;
}

@keyframes pulse-big-filter {
    0% {
        filter: drop-shadow(0 0 1px var(--color-2)) drop-shadow(0 0 1px var(--color-violet-milky));
    }

    70% {
        filter: drop-shadow(0 0 3px var(--color-2)) drop-shadow(0 0 1px var(--color-violet-milky));
    }

    100% {
        filter: drop-shadow(0 0 1px var(--color-2)) drop-shadow(0 0 1px var(--color-violet-milky));
    }
}

.flashing {
  animation: flash 1s step-start infinite;
}

@keyframes flash {
  50% {
      opacity: 0;
  }
}

.blink-red {
    animation: blinkTextRed 1.2s ease-out forwards;
}

@keyframes blinkTextRed {
    0% {
        color: inherit; /* returns to original text color */
    }
    10% {
        color: var(--color-red);
    }
    100% {
        color: inherit; /* returns to original text color */
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn .4s ease-out forwards;
}

.fade-out {
    opacity: 1;
    animation: fadeOut .4s ease-out forwards;
}

.fade-in-flash {
    opacity: 0;
    animation: fadeInFlash 2s ease-out forwards;
}

.fade-in-glow {
    opacity: 0;
    animation: fadeInGlow 2s ease-out forwards;
}


@keyframes fadeIn {
    from { 
      opacity: 0;
    }
    to { 
      opacity: 1;
    }
}

@keyframes fadeOut {
    from { 
      opacity: 1;
    }
    to { 
      opacity: 0;
    }
}

@keyframes fadeInFlash {
    from { 
      opacity: 0;
      filter: var(--text-shadow-glow2-big); 
    }
    to { 
      opacity: 1;
      filter: none;
    }
}

@keyframes fadeInGlow {
    from { 
      opacity: 0;
      filter: var(--text-shadow-glow2-big); 
    }
    to { 
      opacity: 1;
      filter: var(--text-shadow-glow2);
    }
}

.flashing-fast {
  animation: flash .5s step-start infinite;
}
.flashing-slow {
  animation: flash 2.5s step-start infinite;
}


@keyframes flash {
  50% {
      opacity: 0;
  }
}

.blink {
  animation: blinker .25s step-start 5;
}

@keyframes blinker {
  50% {
      opacity: 0;
  }
}

.grow {
  animation: grower .5s ease-in;
}

@keyframes grower {
  0%{
    scale: 0;
  }
  100% {
    scale: 1;
  }
}

.sand-loader {
  display: flex;
  flex-direction: row;
}

.sand-loader::after {
  content: '⠁';
  display: flex;
  justify-content: flex-end;
  animation: sand 2s steps(1, end) infinite;
}

@keyframes sand {
  0%   { content: '⠁'; }
  2.7% { content: '⠂'; }
  5.4% { content: '⠄'; }
  8.1% { content: '⡀'; }
  10.8% { content: '⡈'; }
  13.5% { content: '⡐'; }
  16.2% { content: '⡠'; }
  18.9% { content: '⣀'; }
  21.6% { content: '⣁'; }
  24.3% { content: '⣂'; }
  27%   { content: '⣄'; }
  29.7% { content: '⣌'; }
  32.4% { content: '⣔'; }
  35.1% { content: '⣤'; }
  37.8% { content: '⣥'; }
  40.5% { content: '⣦'; }
  43.2% { content: '⣮'; }
  45.9% { content: '⣶'; }
  48.6% { content: '⣷'; }
  51.3% { content: '⣿'; }
  54%   { content: '⡿'; }
  56.7% { content: '⠿'; }
  59.4% { content: '⢟'; }
  62.1% { content: '⠟'; }
  64.8% { content: '⡛'; }
  67.5% { content: '⠛'; }
  70.2% { content: '⠫'; }
  72.9% { content: '⢋'; }
  75.6% { content: '⠋'; }
  78.3% { content: '⠍'; }
  81%   { content: '⡉'; }
  83.7% { content: '⠉'; }
  86.4% { content: '⠑'; }
  89.1% { content: '⠡'; }
  91.8% { content: '⢁'; }
  100%  { content: '⠁'; }
}

.ellipsis {
  color: var(--color-2);
  /* text-shadow: none !important; */
  /* font-family:
    'Libertinus Mono',
    'Consolas',
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif !important; */
  position: relative;
  display: inline-block;
  margin-left: -1rem;
  font-weight: bolder !important;
}

.ellipsis::after {
  position: absolute;
  /* right: -1.2em;      adjust if needed */
  width: 1.2em;       /* width of '...' */
  text-align: left;
  content: '';
  animation: dots 3s steps(1) infinite;
}


@keyframes dots {
  0%   { content: ''; }
  12.5%  { content: '.'; }
  25%  { content: '..'; }
  37.5%  { content: '...'; }
  50% { content: '...'; }
  62.5%  { content: '..'; }
  75%  { content: '.'; }
  87.5%   { content: ''; }
}

.explosion-bg {
  background: var(--gradient-fire);
  background-size: 100% 200%;
  animation:
    explosionScroll 0.4s linear infinite,
    explosionFlicker 80ms steps(2, start) infinite;
}

@keyframes explosionScroll {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}

@keyframes explosionFlicker {
  0%, 100% {
    opacity: 1;
    /* filter: brightness(1); */
  }
  50% {
    opacity: 0.7;
    /* filter: brightness(1.8); */
  }
}

.glitchy {
  background: repeating-linear-gradient(
    to top,
    #ffffff 0px,
    #ffffff 2px,
    transparent 2px,
    transparent 6px
  );
  background-size: 100% 200%;
  animation: 
    linesRise 0.5s linear infinite,
    powerFlicker 100ms steps(2, start) infinite;
}

.lookAtMe {
  animation: bounceTwice 5000ms linear infinite;
}

/* Waiting arrow */
@keyframes bounceTwice {
  0%    { transform: translateY(0); }
  2.5%   { transform: translateY(-20px); }
  5%   { transform: translateY(10px); }
  7.5%   { transform: translateY(-10px); }
  10%   { transform: translateY(5px); }
  12.5%   { transform: translateY(-5px); }
  15%   { transform: translateY(2.5px); }
  17.5%   { transform: translateY(0); }
  20%   { transform: translateY(0); }
  100%  { transform: translateY(0); }
}

@keyframes rockSoft {
  0% {transform: rotate(0);}
  
  25% {transform: rotate(-20deg);}
  
  50% {transform: rotate(0);}
  
  75% {transform: rotate(20deg);}
  
  100% {transform: rotate(0);}
}

/* Rising lines effect */
@keyframes linesRise {
  0% {
    background-position: 0 100%;
  }
  100% {
    background-position: 0 0%;
  }
}

@keyframes powerFlicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.exploded {
  background: var(--gradient-fire);
  background-size: 100% 200%;
  animation: 
    topExplosion 0.6s cubic-bezier(0.3, 1.6, 0.6, 1) forwards,
    explosionScroll 0.4s linear infinite,
    explosionFlicker 80ms steps(2, start) infinite;
}

/* Moves div down */
@keyframes topExplosion {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(20px); /* Quick jolt downward */
  }
  100% {
    transform: translateY(0px); /* Slow return upward */
  }
}

@keyframes softFloat {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(4px, -6px) rotate(8deg);
  }
  50% {
    transform: translate(-4px, -2px) rotate(-6deg);
  }
  75% {
    transform: translate(2px, 4px) rotate(4deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.floating {
  animation: softFloat 5s linear infinite;
}

.no-touching {
    user-select: none;
    -moz-user-select: none;
    pointer-events: none;
}

/*Note: Ideally this is just for cases when the symbol font hasn't loaded yet*/
.material-symbols-sharp{
  max-width: 2em;
  overflow: hidden;
}

.material-symbols-sharp.light {
  font-variation-settings:
    'FILL' 0,
    'wght' 100,
    'GRAD' 0,
    'opsz' 24
}

.material-symbols-sharp.filled {
  /* background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.5), transparent 55%),
    conic-gradient(
      #fff7d1 0deg,
      #f5d87a 20deg,
      #c89b2a 60deg,
      #7a5a15 100deg,
      #c89b2a 140deg,
      #f5d87a 180deg,
      #fff7d1 220deg,
      #f5d87a 260deg,
      #c89b2a 300deg,
      #fff7d1 360deg
    ); */
  font-variation-settings:
    'FILL' 1,
    'wght' 0,
    'GRAD' 0,
    'opsz' 24
}