@import url('https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Matemasie&family=Playwrite+BE+VLG:wght@100..400&display=swap');

/** 
 * Info: realtimecolors.com came in handy in generating these.
**/

* {
  transition: 250ms;  
}

/** colors **/
html {
  --light-display: flex;
  --light-opacity: 1;

  --dark-display: none;
  --dark-opacity: 0;

  --color-primary: #D3F5FF;
  --color-secondary: #21B2FF;
  --color-accent: #00CBFD;
  --color-background: #FFFFFF;
  --color-text: #21B2FF;
  --color-success: #42C66E;
  --color-error: #9B282A;
}

html[theme="dark"] {
  --light-display: none;
  --light-opacity: 0;

  --dark-display: flex;
  --dark-opacity: 1;
  
  --color-primary: #00232e;
  --color-secondary: #0092e0;
  --color-accent: #00ccff;
  --color-background: #000000;
  --color-text: #0092e0;
  --color-success: #42C66E;
  --color-error: #9B282A;
}

.light-view { display: var(--light-display); }
.dark-view { display: var(--dark-display); }

/** bg, text and border colors **/
.bg-primary { background-color: var(--color-primary); fill: var(--color-primary) }
.bg-secondary { background-color: var(--color-secondary); fill: var(--color-secondary) }
.bg-accent { background-color: var(--color-accent); fill: var(--color-accent) }
.bg-background { background-color: var(--color-background); fill: var(--color-background) }
.bg-text { background-color: var(--color-text); fill: var(--color-text) }
.bg-success { background-color: var(--color-success); fill: var(--color-success) }
.bg-error { background-color: var(--color-error); fill: var(--color-error) }

.color-primary { color: var(--color-primary); stroke: var(--color-primary) }
.color-secondary { color: var(--color-secondary); stroke: var(--color-secondary) }
.color-accent { color: var(--color-accent); stroke: var(--color-accent) }
.color-background { color: var(--color-background); stroke: var(--color-background) }
.color-text { color: var(--color-text); stroke: var(--color-text) }
.color-success { color: var(--color-success); stroke: var(--color-success) }
.color-error { color: var(--color-error); stroke: var(--color-error) }

.border-primary { border-color: var(--color-primary) }
.border-secondary { border-color: var(--color-secondary) }
.border-accent { border-color: var(--color-accent) }
.border-background { border-color: var(--color-background) }
.border-text { border-color: var(--color-text) }
.border-success { border-color: var(--color-success) }
.border-error { border-color: var(--color-error) }

/** hovers **/
.hover-bg-primary:hover { background-color: var(--color-primary); fill: var(--color-primary) }
.hover-bg-secondary:hover { background-color: var(--color-secondary); fill: var(--color-secondary) }
.hover-bg-accent:hover { background-color: var(--color-accent); fill: var(--color-accent) }
.hover-bg-background:hover { background-color: var(--color-background); fill: var(--color-background) }
.hover-bg-text:hover { background-color: var(--color-text); fill: var(--color-text) }
.hover-bg-success:hover { background-color: var(--color-success); fill: var(--color-success) }
.hover-bg-error:hover { background-color: var(--color-error); fill: var(--color-error) }

.hover-color-primary:hover { color: var(--color-primary); stroke: var(--color-primary) }
.hover-color-secondary:hover { color: var(--color-secondary); stroke: var(--color-secondary) }
.hover-color-accent:hover { color: var(--color-accent); stroke: var(--color-accent) }
.hover-color-background:hover { color: var(--color-background); stroke: var(--color-background) }
.hover-color-text:hover { color: var(--color-text); stroke: var(--color-text) }
.hover-color-success:hover { color: var(--color-success); stroke: var(--color-success) }
.hover-color-error:hover { color: var(--color-error); stroke: var(--color-error) }

.hover-border-primary:hover { border-color: var(--color-primary) }
.hover-border-secondary:hover { border-color: var(--color-secondary) }
.hover-border-accent:hover { border-color: var(--color-accent) }
.hover-border-background:hover { border-color: var(--color-background) }
.hover-border-text:hover { border-color: var(--color-text) }
.hover-border-success:hover { border-color: var(--color-success) }
.hover-border-error:hover { border-color: var(--color-error) }

/** typography **/
body {
  font-family: "K2D", sans-serif;
  font-weight: 400;
  font-style: normal;
}

html {font-size: 100%;} /* 16px */
h1 {font-size: 4.210rem; /* 67.36px */}
h2 {font-size: 3.158rem; /* 50.56px */}
h3 {font-size: 2.369rem; /* 37.92px */}
h4 {font-size: 1.777rem; /* 28.48px */}
h5 {font-size: 1.333rem; /* 21.28px */}
small {font-size: 0.750rem; /* 12px */}

/** animations **/

@keyframes example {
  0% { bottom: -200px; right: 50px; }
  5% { bottom: -50px; right: 50px; }
  8% { bottom: -50px; right: 50px; }
  10% { bottom: -200px; right: 50px; }
  11% { bottom: -200px; right: 80%; }
  
  20% { bottom: -50px; right: 80%; }
  23% { bottom: -50px; right: 80%; } 
  25% { bottom: -200px; right: 80%; } 
  26% { bottom: -200px; right: 50%; }
  
  37% { bottom: -100px; right: 50%; }
  40% { bottom: -100px; right: 50%; }
  42% { bottom: -200px; right: 50%; }
  48% { bottom: -200px; right: 100% }
  
  60% { bottom: -20px; right: 100% }
  61% { bottom: -20px; right: calc(100% - 75px); }
  65% { bottom: -20px; right: calc(100% - 75px); }
  70% { bottom: -20px; right: 100%; }

  100% { bottom: -20px; right: 100%; }
}

@media print {
  html, body {
    display: none; /* hide whole page */
  }
}