/* =========================
   GLOBAL RESET
========================= */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================
   ROOT VARIABLES
========================= */

:root {
  --bg-dark: #05070c;
  --bg-panel: rgba(20, 30, 50, 0.65);
  --border-glow: rgba(120, 180, 255, 0.25);
  --text-main: #e6f3ff;
  --text-dim: rgba(230, 243, 255, 0.6);
  --accent-blue: #1e90ff;
  --accent-purple: #6a5acd;
}

/* =========================
   BASE LAYOUT
========================= */

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: var(--bg-dark);
  color: var(--text-main);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* =========================
   VISIBILITY HELPERS
========================= */

.hidden {
  display: none !important;
}

/* =========================
   COMMON ELEMENTS
========================= */

button {
  font-family: inherit;
  cursor: pointer;
}

input {
  font-family: inherit;
  color: var(--text-main);
}

input::placeholder {
  color: var(--text-dim);
}

/* Remove ugly autofill styles */
input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-main);
  transition: background-color 9999s ease-in-out 0s;
}

/* =========================
   FADE UTILITIES
========================= */

.fade-in {
  animation: fadeIn 1.2s ease forwards;
}

.fade-out {
  animation: fadeOut 1.2s ease forwards;
}

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

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

/* =========================
   SCROLLBAR (SUBTLE)
========================= */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(120, 180, 255, 0.25);
  border-radius: 4px;
}

/* =========================
   TEXT SELECTION
========================= */

::selection {
  background: rgba(30, 144, 255, 0.3);
  color: var(--text-main);
}
/* =========================
   MOBILE ADJUSTMENTS
========================= */

@media (max-width: 600px) {
  html,
  body {
    font-size: 14px;
  }

  ::-webkit-scrollbar {
    width: 4px;
  }

  ::selection {
    background: rgba(30, 144, 255, 0.25);
  }

  input,
  button {
    font-size: 13px;
  }
}