/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 1.5 Remove focus outlines*/
*:focus, *:focus-visible {
    outline: none;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

body {
  /* 3. Add accessible line-height */
  line-height: 1.5;
  /* 4. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

body{
    margin: 20px 80px 20px;
    background-color: #301934;
    margin: 0;
    font-family: sans-serif;
}

#app-root{
    display: flex;
    flex-direction: column;
}

#modal-root{
  position: absolute;
  top: 0;
  left: 0;
}

.open-sans {
    font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.comic-relief{
    font-family: "Comic Relief", system-ui;
  font-weight: 700;
  font-style: normal;
}

.hover-orbitter {
    animation: revolve 2s linear infinite, pulse 2.5s infinite ease-in-out alternate 0s;
    /* TOFIX: having weird issues fixing the specificity for this without desyncing orbitters. 
    might just find a way to move animations into src folder anyways since it's weird to be editing css in 2 places like this   */
    opacity: 1 !important;
}
  
@keyframes revolve {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
}

@keyframes pulse {
    from {
        background-color: brightness(100%); /* Original brightness */
    }
    to {
        filter: brightness(500%); /* Back to original */
    }
}

@keyframes odalwa {
  from {
    filter: unset;
  }
  to {
    filter: opacity(0.666) drop-shadow(0 0 0 #228B22) drop-shadow(0 0 0 #228B22);
  }
}

@keyframes goht {
  from {
    filter: unset;
  }
  to {
    filter: opacity(0.666) drop-shadow(0 0 0 #C41E3A) drop-shadow(0 0 0 #C41E3A);
  }
}

@keyframes gyorg {
  from {
    filter: unset;
  }
  to {
    filter: opacity(0.666) drop-shadow(0 0 0 #0437F2) drop-shadow(0 0 0 #0437F2);
  }
}

@keyframes twinmold {
  from {
    filter: unset;
  }
  to {
    filter: opacity(0.666) drop-shadow(0 0 0 #FFBF00) drop-shadow(0 0 0 #FFBF00);
  }
}