/* -------------------------------------------------------------------------------------------- */
/* 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: 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;
}