/* syrupnx.space v6 */
/* Root stylesheet for all pages to reference */

/* CURSORS */
:root {
  --cur-main: url("./cur/default.cur"), default;
  --cur-text: url("./cur/text.cur"), text;
  --cur-link: url("./cur/pointer.cur"), pointer;
  --cur-help: url("./cur/help.cur"), help;
}

/* FONTS */
@font-face {
  font-family: "VCR OSD Mono";
  src: url("./fonts/VCR_OSD_MONO.ttf") format("truetype");
}

@font-face {
  font-family: "Determination Mono";
  src: url("./fonts/DTMono.woff") format("woff"),
    url("./fonts/DTMono.otf") format("opentype");
}

/* ANIMATIONS */
@keyframes logo {
  from  {top: 0px;}
  to {top: 14px;}
}

/* STYLING */

/* Little to no declarations should be made here! */

html {
  background-color: black;
  color: white;
  image-rendering: pixelated;
  font-family: "Determination Mono", "Verdana", sans-serif;
  cursor: var(--cur-main);
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  margin-top: 0.75em;
}

p {
  cursor: var(--cur-text);
}

a {
  color: #FEBAEE;
  font-family: "VCR OSD Mono";
  cursor: var(--cur-link);
}

a:hover {
  color: #FFD9F6;
}

a:active {
  color: #FF80E1;
}

p a {
  font-family: "Determination Mono";
}

abbr {
  text-decoration: underline dotted;
  cursor: var(--cur-help);
}

.tagline {
  font-size: 1.17em;
  margin-top: 0.25em;
  font-style: italic;
}

.melonLink img {
  border: 2px solid white;
  width: 400px;
  height: 40px;
}

/* ORGANIZATION */

/* Little to no declarations should be made here! */
header {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 4em;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  row-gap: 1em;
  text-align: center;
  min-width: 1000px;
  max-width: 1200px;
}

#logoanim {
  width: 186px;
  height: 50px;
}

footer {
  min-width: 1000px;
  max-width: 1200px;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 1em;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  row-gap: 1em;
}