/* Defaults */

html, body { padding: 0; margin: 0; box-sizing: border-box; }

/* Standard Variables */

:root {
  --color-background: #FAFAFA;
  --color-primary: blue;
  --color-link: blue;
  --color-text: #323648;
  --color-green: #03A87C;
  --color-red: #FF5722;
  --color-border: rgba(0,0,0,0.1);
}

/* Dark Mode Variables */

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #1B1B1B;
    --color-text: white;
    --color-link: #FFC107;
    --color-border: rgba(255,255,255,0.075);
  }
}

/* Styles */

body { font-family: "Inter", sans-serif; background: var(--color-background); color: var(--color-text); }
a { color: var(--color-link); }
.center { text-align: center; }
.relative { position: relative; }
.absolute { position: absolute; }
.block { display: block; }
.inline-block { display: inline-block; }
.middle { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
.width-full { width: 100%; }

/* Media Queries */

@media screen and (max-width: 1023px) {
}