:root[data-theme="light"] {
    --color: black;
    --background: white;
    --top: url(https://files.catbox.moe/wcfqm2.png);
    --bottom: url(https://files.catbox.moe/1shlyr.png);
    --middle: url(https://files.catbox.moe/irymrb.png);
}

:root[data-theme="dark"] {
    --color: white;
    --background: black;
    --top: url(https://files.catbox.moe/up0rkt.png);
    --bottom: url(https://files.catbox.moe/rmpuic.png);
    --middle: url(https://files.catbox.moe/keah6k.png);
}

main {
 width: 600px;
 margin: auto;
}

.text-container {
 border-radius: 0px;
 background: var(--background);
 border: 5px double var(--color);
 padding: 0px;
 overflow: hidden;
  text-align: center; 
}

body {
 background: var(--background); 
}

*, a {
 color: var(--color);
 font-family: jojoba;
 letter-spacing: 2px;
}

a {
 text-decoration: underline;
 text-decoration-style: dotted;
}

#top {
 background-image: var(--top);
  width: 600px;
  height: 90px;
}

#bottom {
 background-image: var(--bottom);
  width: 600px;
  height: 90px;
}

#middle {
 background-image: var(--middle);
  width: 600px;
  height: 90px;
}

@font-face {
font-family: 'sant';
src: url(https://files.catbox.moe/eks86r.otf);
}

@font-face {
src: url(https://files.catbox.moe/y0ljly.otf);
font-family: jojoba;
}

.button, .button:hover {
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--text);
  background: var(--background);
  cursor: pointer;
  border: 2px solid;
  padding: 0.25em 0.5em;
  box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px 0px, 5px 5px 0px 0px;
  position: relative;
  border-radius: 0px;
}