/* -------------------------------------------------------------------------------------------- */
/* Variable Definitions */
:root {
  --text-color: #000;
  --background-color: #EFEEEA;
  --window-background-color: #EFEEEA;
  --accent-color: #018790;

  /* Variables independent of light/dark mode */
  --border-radius: 5px;
  --default-margin-val: 0.6rem;
  --shadow-color: #000;
  --shadow-offset: 6px;
  --shadow-blur: 4px;
  --border-color: var(--text-color);
  --error-background-color: var(--accent-color);
}

@media (prefers-color-scheme: dark) {
  :root { 
    --text-color: #eeeeee;
    --background-color: #444;
    --window-background-color: #111;
    --accent-color: #FF6F61;
  }
}


/* -------------------------------------------------------------------------------------------- */
/* IMPORTS & FONTS */
@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');


/* -------------------------------------------------------------------------------------------- */
/* CSS DIRECT APPLICATION CLASSES */
.n-margin {
  margin-top: var(--default-margin-val);
}

.s-margin {
  margin-bottom: var(--default-margin-val);
}

.we-auto-margin {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.bold-text {
  font-weight: bold;
}

.ns-margin {
  margin-top: 0.6em;
  margin-bottom: 0.6em;
}

.ns-margin-plus {
  margin-top: 0.8em;
  margin-bottom: 0.6em;
}

.error-box {
  background-color: var(--error-background-color);
  color: var(--text-color);
}


/* -------------------------------------------------------------------------------------------- */
/* USER AGENT RESETS */
body {
  color: var(--text-color);
  background-color: var(--window-background-color);
  font-family: Electrolize, sans-serif;
  font-weight: 400;
  font-style: normal;
}

a, a:visited {
  color: var(--accent-color);
  text-decoration: none;
  padding: 0.1em 0.3em;
  border-radius: var(--border-radius);
}

a:hover {
  color: var(--text-color);
  background-color: var(--accent-color);
}


/* -------------------------------------------------------------------------------------------- */
/* OTHER STUFF */
.content {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.box {
  margin: 1em;
  padding: 1em;
  display: block;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  box-shadow: var(--shadow-offset) var(--shadow-offset) var(--shadow-blur) var(--shadow-color);
}


/* -------------------------------------------------------------------------------------------- */
/* FORMS SETUP */
form .text-input-group {
 position: relative;
}

form .text-input-group input[type=text],
form .text-input-group input[type=password] {
 border: solid 1.5px #9e9e9e;
 border-radius: var(--border-radius);
 background: none;
 padding: 0.5rem;
 font-size: 1rem;
 color: var(--text-color);
 transition: border 150ms cubic-bezier(0.4,0,0.2,1);
 width: 25ch;
}

form .text-input-group label {
 position: absolute;
 left: 15px;
 top: -0.1rem;
 color: var(--text-color);
 pointer-events: none;
 transform: translateY(0.6rem);
 transition: 150ms cubic-bezier(0.4,0,0.2,1);
}

form .text-input-group input[type=text]:focus,
form .text-input-group input[type=text]:valid,
form .text-input-group input[type=password]:focus,
form .text-input-group input[type=password]:valid {
 outline: none;
 border: 1.5px solid var(--accent-color);
}

form .text-input-group input:focus ~ label,
form .text-input-group input:valid ~ label {
 transform: translateY(-50%) scale(0.8);
 background-color: var(--accent-color);
 padding: 0 .2em;
 color: var(--text-color);
 border-radius: var(--border-radius);
}

form fieldset {
  border-radius: var(--border-radius);
}

form legend {
  font-size: 1.2rem;
  font-weight: bold;
  font-variant-caps: small-caps;
}

form select {
  appearance: none;
  border: 2px solid var(--text-color);
  padding: 0.5em 0.9em;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--text-color);
  background-color: var(--background-color);
  box-shadow: 4px 4px var(--shadow-color);
}

form select:active {
  position: relative;
  top: 2px;
  box-shadow: 0 0;
}

form input[type=submit] {
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  /* font-weight: bold; */
  color: var(--text-color);
  background-color: var(--background-color);
  padding: 0.5em 0.9em;
  border-radius: var(--border-radius);
  border: 2px solid var(--text-color);
  box-shadow: 4px 4px var(--shadow-color);
}

form input[type=submit]:active {
  position: relative;
  top: 2px;
  border: 2px solid var(--text-color);
  box-shadow: 0px 0px;
}