@import url('https://fonts.cdnfonts.com/css/open-dyslexic');

/* ------------------------------ */
/* CURSOR */
/* ------------------------------ */

* {
  box-sizing: border-box;
  cursor: url('https://cdn.cursors-4u.net/previews/arrow-825426cd-preview-32.webp') 0 0, auto !important;
}

/* ------------------------------ */
/* VARIABLES */
/* ------------------------------ */

:root {
  --background-color: #ffffff;
  --content-background-color: #cae8ffff;
  --sidebar-background-color: #cae8ffff;

  --text-color: #3e3e3e;
  --sidebar-text-color: #3e3e3e;
  --link-color: #000000ff;
  --link-color-hover: #cae8ffff;

  --font: Verdana, sans-serif;
  --heading-font: 'Open-Dyslexic', sans-serif;
  --font-size: 16px;

  --margin: 16px;
  --padding: 24px;
  --border: 17px solid #b5a4ba;
  --round-borders: 75px;
  --sidebar-width: 400px;
}

/* ------------------------------ */
/* RESET */
/* ------------------------------ */

* {
  box-sizing: border-box;
}

/* ------------------------------ */
/* BACKGROUND */
/* ------------------------------ */

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;

  min-height: 100vh;

  margin: 0;
  padding: var(--margin);

  font-size: var(--font-size);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;

  position: relative;

  background-image:
    linear-gradient(rgba(255,255,255,0.18), rgba(255,255,255,0.18)),
    url("https://i.etsystatic.com/28519165/r/il/d8a081/7604095814/il_340x270.7604095814_eat3.jpg"),
    url("https://www.transparenttextures.com/patterns/stardust.png");

  background-repeat: repeat, repeat, repeat;
}

/* ------------------------------ */
/* ✨ SPARKLE LAYER ONLY */
/* ------------------------------ */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  z-index: 1;

  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,0.9) 0px, transparent 3px),
    radial-gradient(circle at 35% 70%, rgba(255,255,255,0.7) 0px, transparent 2px),
    radial-gradient(circle at 60% 40%, rgba(255,255,255,0.8) 0px, transparent 2px),
    radial-gradient(circle at 80% 15%, rgba(255,255,255,0.6) 0px, transparent 3px),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,0.7) 0px, transparent 2px);

  background-size: 450px 450px;

  animation: sparklePulse 5s infinite ease-in-out;
}

/* ------------------------------ */
/* SPARKLE ANIMATION */
/* ------------------------------ */

@keyframes sparklePulse {
  0% {
    opacity: 0.05;
    transform: translateY(0px);
  }

  25% {
    opacity: 0.25;
  }

  50% {
    opacity: 0.65;
  }

  75% {
    opacity: 0.15;
  }

  100% {
    opacity: 0.05;
    transform: translateY(-6px);
  }
}

/* ------------------------------ */
/* CONTENT ABOVE SPARKLES */
/* ------------------------------ */

.layout {
  position: relative;
  z-index: 2;

  width: 1000px;
  display: grid;
  grid-gap: var(--margin);

  grid-template:
    "header header" auto
    "leftSidebar main" auto
    "footer footer" auto
    / var(--sidebar-width) auto;
}

/* ------------------------------ */
/* LINKS */
/* ------------------------------ */

a {
  text-decoration: underline;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: none;
}

/* ------------------------------ */
/* MAIN */
/* ------------------------------ */

main {
  grid-area: main;
  overflow-y: auto;
  min-width: 0;

  padding:
    30px
    22px
    26px
    34px;

  background: var(--content-background-color);
  border: var(--border);
  border-radius: var(--round-borders);
}

/* ------------------------------ */
/* HEADER */
/* ------------------------------ */

header {
  grid-area: header;

  font-size: 1.2em;

  border: var(--border);
  border-radius: var(--round-borders);
  background: var(--content-background-color);

  padding:
    26px
    28px
    22px
    24px;
}

.header-title {
  font-family: var(--heading-font);
  font-size: 1.5em;
  font-weight: bold;
}

/* ------------------------------ */
/* SIDEBAR */
/* ------------------------------ */

aside {
  grid-area: leftSidebar;

  border: var(--border);
  border-radius: var(--round-borders);

  background: var(--sidebar-background-color);

  padding: var(--padding);
  color: var(--sidebar-text-color);
}

/* ------------------------------ */
/* FOOTER */
/* ------------------------------ */

footer {
  grid-area: footer;

  border: var(--border);
  border-radius: var(--round-borders);

  padding: 14px 18px 10px 16px;

  font-size: 0.75em;

  display: flex;
  justify-content: center;

  background: var(--content-background-color);
}

/* ------------------------------ */
/* IMAGES */
/* ------------------------------ */

.image,
.full-width-image {
  max-width: 100%;
  height: auto;
}

/* ------------------------------ */
/* NAV */
/* ------------------------------ */

nav ul {
  list-style: none;
  padding: 0;
}

/* ------------------------------ */
/* SKIP LINK */
/* ------------------------------ */

#skip-to-content-link {
  position: absolute;
  left: -9999px;
  top: 0;

  background: var(--content-background-color);
  color: var(--text-color);

  padding: 8px 12px;

  z-index: 10000;
}

#skip-to-content-link:focus,
#skip-to-content-link:focus-visible {
  left: 10px;
  top: 10px;
}

/* ------------------------------ */
/* MOBILE */
/* ------------------------------ */

@media (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .layout {
    width: 100%;

    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "leftSidebar"
      "footer";
  }

  main {
    padding:
      26px
      20px
      22px
      22px;
  }
}
.y2k-sparkle {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;

  background: white;
  box-shadow: 0 0 6px rgba(255,255,255,0.9);

  z-index: 9999;

  animation: sparkleFade 1.2s ease-out forwards;
}

@keyframes sparkleFade {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  30% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}