@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --text: #aaaaaa;
  --background: #333333;
  --primary: #ffffff;
  --secondary: #666666;
  --accent: #444444;

  --text-low-opacity: #aaaaaa88;
  --background-low-opacity: #33333333;
  --primary-low-opacity: #88888833;
  --secondary-low-opacity: #66666633;
  --accent-low-opacity: #44444466;
}

::selection {
  background-color: var(--accent-low-opacity);
  color: var(--text);
}

body::-webkit-scrollbar { display: none; }

body {
  background-color: var(--background);
  color: var(--text);
  font-family: 'Poppins', 'Arial';
  padding: 5vh 0;
  text-align: center;
  font-size: 16px;
  margin: 0px;
  overflow-x: hidden;
  word-wrap: break-word;
}

@media screen and (min-width: 1025px) {
  body { font-size: 18px; }
}

@media screen and (max-width: 565px) {
  body { font-size: 18px; padding: 5vh 3vw; }
}

button {
  background-color: var(--secondary-low-opacity);
  color: var(--primary);
  border: none;
  padding: 5px 7px;
  border-radius: 10px;
  cursor: pointer;
  transition-property: color;
  font-size: 0.8em;
}

button:disabled { opacity: 60%; pointer-events: none; }
button:active { scale: 95%; }

input, textarea, option, select{
  background-color: var(--secondary-low-opacity);
  color: var(--primary);
  border: none;
  border-radius: 2px;
  padding: 5px 7px;
  margin: 3px;
  font-size: 0.8em;
}

input, textarea, select {
  font-family: 'Poppins';
}

option, select {
  background-color: var(--secondary-low-opacity);
}

option {
  font-size: 1.1em;
}

footer {
  opacity: 50%;
  position: fixed;
  bottom: 10px;
  right: 10px;
}

textarea { background-color: var(--secondary-low-opacity); }
textarea:disabled { opacity: 70%; pointer-events: none; }

a:link       { color: var(--primary); text-decoration: none; }
a:visited    { color: var(--primary); text-decoration: none; }
a:hover      { text-decoration: underline; }
a::-moz-selection { text-decoration-color: var(--text); }
a::selection { -webkit-text-decoration-color: var(--text); text-decoration-color: var(--text); }

i { opacity: 80%; }

p {
  margin: 0px;
  padding: 2px;
}

.text:not(svg)       { color: var(--text);       }
.background:not(svg) { color: var(--background); }
.primary:not(svg)    { color: var(--primary);    }
.secondary:not(svg)  { color: var(--secondary);  }
.accent:not(svg)     { color: var(--accent);     }

svg.text       { fill: var(--text);       }
svg.background { fill: var(--background); }
svg.primary    { fill: var(--primary);    }
svg.secondary  { fill: var(--secondary);  }
svg.accent     { fill: var(--accent);     }

.left   { text-align: left;   }
.center { text-align: center; }
.right  { text-align: right;  }

.invis  { opacity: 0%; }
.hidden { display: none; }
.no-underline { text-decoration: none !important; }