:root {
  /* Colors */
  --color-white: #fff;
  --color-black: #000;
  --color-backdrop: rgba(0, 0, 0, 0.5);
  --color-disabled: #455a64;
  --color-red: #ff4c4c;
  --color-error: #ff6f6f;
  --color-link: #09f7f8;
  --color-link-secondary: #059494;
  --color-accent: #f5b941;
  --color-success: #00f0a4;
  --color-background: #0b1e30;
  --color-panel-border: #3df3fe;
  --color-panel-background: rgba(20, 60, 91, 0.9);
  --color-panel-background-full: rgba(20, 60, 91);
  --color-panel-background-hover: #14283a;

  /* Sizes */
  font-size: 14px;
  --size-navbar: 14rem;
  --panel-border-radius: 0.5rem;

  /* Fonts */
  font-family: 'Exo 2', sans-serif;
  font-weight: 400;
  font-style: normal;
}

html,
body {
  margin: 0;
  height: 100%;
  min-width: 360px;
  overflow: hidden;
  background-color: var(--color-black);
}

a {
  text-decoration: none;
  color: var(--color-link);
}

a:visited {
  color: var(--color-link);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spaceScroll {
  from {
    background-position: center 0;
  }
  to {
    background-position: center 100vh;
  }
}

#app {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--color-white);
}

@keyframes alertOutline {
  0% {
    outline-width: 0.1rem;
    outline-offset: 0;
    outline-color: rgba(0, 130, 206, 0);
  }

  50% {
    outline-color: var(--dynamic-outline-color);
  }

  100% {
    outline-width: 0.5rem;
    outline-offset: 0rem;
    outline-color: rgba(102, 102, 102, 0);
  }
}

.red-alert {
  --dynamic-outline-color: var(--color-error);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--color-error);
  padding: 1rem;
  text-align: center;
  outline-width: 0.1rem;
  outline-style: double;
  animation: alertOutline 1s ease infinite;
}

.success-alert {
  --dynamic-outline-color: var(--color-success);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--color-success);
  padding: 1rem;
  text-align: center;
  outline-width: 0.1rem;
  outline-style: double;
  animation: alertOutline 1s ease infinite;
}

.warning-alert {
  --dynamic-outline-color: var(--color-accent);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--color-accent);
  padding: 1rem;
  text-align: center;
  outline-width: 0.1rem;
  outline-style: double;
  animation: alertOutline 1s ease infinite;
}

.laser-hit {
  position: fixed;
  width: 10px;
  height: 10px;
  left: 100px;
  top: 100px;
  z-index: 999;
  pointer-events: none;
}

.laser-hit::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--color-panel-border);
  opacity: 0.6;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: laser-flash 0.3s ease-out forwards;
}

@keyframes laser-flash {
  to {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}