/* store site variables */
:root {
  --background-image: url('backgrounds/background.jpg');
  --background-shift: 0px -256px;
  --background-size: 256px;
  --overlay-image: url('overlay/scanlines.png');
  --background-colour: #15100e;
  --border-colour: #7b4d47;
  --hr-colour: #4e6e58;
  --text-colour: #dddbcb;
  --finished-colour: #7b4d47;
  --header-font: 'Mleitod';
  --body-font: 'cmunrm';
  --header-colour: #ea633a;
  --text-highlight-colour: #00A7e1; 
  --element-background-colour: #1a261e;
  --element-background-dimmed-colour: #0e1410;
  --element-shadow--colour: #000000;
  --border-type: dashed;
  --dertinite-filter: none;
}

.light {
  --background-image: url('backgrounds/background-light.jpg');
  --background-shift: 0px -256px;
  --background-size: 256px;
  --overlay-image: url('');
  --background-colour: #EFFBF1;
  --border-colour: #482409;
  --hr-colour: #3C6E71;
  --text-colour: #011627;
  --finished-colour: #482409;
  --header-font: 'Mleitod';
  --body-font: 'cmunrm';
  --header-colour: #ea633a;
  --text-highlight-colour: #3C6E71; 
  --element-background-colour: #fff7f2;
  --element-background-dimmed-colour: #ffd7bb;
  --element-shadow--colour: #ffffff00;
  --border-type: dashed;
  --dertinite-filter: none;
}

.space {
  --background-image: url('backgrounds/background-space.gif');
  --background-shift: 304px 234px;
  --background-size: 304px -234px;
  --overlay-image: url('overlay/scanlines.png');
  --background-colour: #000000;
  --border-colour: #ffffff;
  --hr-colour: #f84aa7;
  --text-colour: #ffffff;
  --finished-colour: #000000;
  --header-font: 'Mleitod';
  --body-font: 'cmunrm';
  --header-colour: #f84aa7;
  --text-highlight-colour: #f84aa7; 
  --element-background-colour: #0f032671;
  --element-background-dimmed-colour: #0f032671;
  --element-shadow--colour: #ffffff00;
  --border-type: dashed;
  --dertinite-filter: hue-rotate(300deg) saturate(120%);
}

/* load fonts independent of browser availability */
@font-face { 
  font-family: 'cmunrm';
  src: url('fonts/cmunrm.ttf');
}

@font-face { 
  font-family: 'Mleitod';
  src: url('fonts/Mleitod\ Personal\ Use\ Only.ttf');
}

/* css resets */
*, *::before, *::after {
  box-sizing: border-box; /* padding and border are included in element dimensions, for more consistency */
  
  image-rendering: pixelated; /* no anti-aliasing on resized images */
}

* {
  transition: background-color 0.3s, padding 0.3s, margin 0.3s; /* smooth transition when changing themes */
}

/* page css */
html, body {
  scrollbar-color: var(--element-background-colour) var(--background-colour);
  scrollbar-width: thin;
}

body::before { /* add noise */
  position: fixed;
  left: 0;
  top: 0;

  width: 100%;
  height: 100%;

  background-image: url('overlay/noise.png');
  background-size: cover;

  opacity: 0.01;
  content: ''; /* literally no idea what this does but it HAS to be in here */
  pointer-events: none; /* overlay will not interfere with interactble elements */
  z-index: 9998; /* ensures other elements do not overlay the overlay and this overlay doesnt overlay the scanlines */
}

body::after { /* scanline effect on page */
  position: fixed;
  left: 0;
  top: 0;

  width: 100%;
  height: 100%;
  background-image: var(--overlay-image);

  animation-name: scanlines;
  animation-duration: 0.8s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(4);

  opacity: 0.6;
  content: ''; /* literally no idea what this does but it HAS to be in here */
  pointer-events: none; /* overlay will not interfere with interactble elements */
  z-index: 9999; /* ensures other elements do not overlay the overlay */
}

@keyframes scanlines { /* dictates movement for scanline overlay */
  0% {
      background-position: 0px 0px;
  }
  100% {
      background-position: 0px 4px;
  }
}

body {
  overflow-y: scroll; /* prevents misalignment on small pages by always having a visible scrollbar */

  padding-top: 50px;

  background-image: var(--background-image);
  background-attachment: fixed;
  background-size: var(--background-size);
  background-color: var(--background-color);

  font-family: var(--body-font);
  color: var(--text-colour);
  font-size: 1.1em; /* should scale further if someone has a larger default text size */
  
  cursor: url('cursor/pick.png'), auto;
}

h2 {
  font-family: var(--header-font);
  color: var(--header-colour);
  text-shadow: 3px 3px 5px var(--element-shadow--colour);

  margin-bottom: 10px;

  border-bottom: 1px var(--border-type) var(--text-colour);
}

a {
  color: var(--text-highlight-colour);
}

p {
  margin-top: 0.7rem;
}

.highlighted {
  color: var(--text-highlight-colour);
}

.topbar {
  position: fixed; /* stays on page while scrolling */

  top: 10px;
  left: 10px;

  z-index: 9999;

  padding: 5px 5px;

  background-color: var(--element-background-dimmed-colour);

  box-shadow: inset 1px 1px 5px var(--element-shadow--colour);
}

button {
  border: 1px var(--border-type) var(--border-colour);

  background-color: var(--element-background-dimmed-colour);

  box-shadow: 1px 1px 5px var(--element-shadow--colour);

  font-family: 'cmunrm';
  color: var(--text-colour);
  font-size: 1em;
}

.item{
  width:100%; 
  height:100%; 
  display:block;
}

.red {
  color: rgb(255, 0, 0);
}

.shake {
  animation: shake 0.5s;
  animation-iteration-count: 1;
}

.completed {
  border: 1px ridge var(--finished-colour);

  box-shadow: 1px 1px 5px var(--element-shadow--colour);

  color: var(--finished-colour);
}

@keyframes shake {
  0% { transform: translateX(1px) rotate(0deg); }
  10% { transform: translateX(-1px) rotate(-1deg); }
  20% { transform: translateX(-3px) rotate(1deg); }
  30% { transform: translateX(3px) rotate(0deg); }
  40% { transform: translateX(1px) rotate(1deg); }
  50% { transform: translateX(-1px) rotate(-1deg); }
  60% { transform: translateX(-3px) rotate(0deg); }
  70% { transform: translateX(3px) rotate(-1deg); }
  80% { transform: translateX(-1px) rotate(1deg); }
  90% { transform: translateX(1px) rotate(0deg); }
  100% { transform: translateX(1px) rotate(-1deg); }
}

#fireworks {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
}

.home {
  text-decoration: none;
  color: var(--text-colour);
}

.home:hover { /* appears on mouse-over */
  text-decoration: underline;
  color: var(--text-highlight-colour);
}