/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
  --primary-bg-colour: #1e0e28;   /* deep purple background */
  --outline-colour: #9999fd;      /* muted lavender-magenta */
  --winbar-colour: ;       /* darker purple bar */
  --win-colour: black;
}


.pixelify-sans-<uniquifier> {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

body {
  font-family: "Pixelify Sans", sans-serif;
  background-image: url("bgimage.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: var(--primary-bg-colour);
  color: white;
}

body::before {
  content: "";
  position: fixed;
  inset: -10%; /* breathing room for movement */
  background-color: var(--primary-bg-colour);
  background-image: url("bgimage.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  filter: blur(4px) brightness(0.65);

  transform:
    translate3d(var(--bg-x, 0px), var(--bg-y, 0px), 0)
    scale(1.1);

  transition: transform 0.05s linear;
  will-change: transform;

  z-index: -2;
}





#wrapper {
  position: relative;
  min-height: 100vh;
}

/* CRT overlay */
#wrapper::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.025) 1px,
      rgba(0, 0, 0, 0.05) 2px
    ),
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.5) 100%
    );

  mix-blend-mode: overlay;
  opacity: 0.7;

  z-index: 9999;
}

@keyframes crt-flicker {
  0% { opacity: 0.35; }
  50% { opacity: 0.42; }
  100% { opacity: 0.35; }
}

#wrapper::after {
  animation: crt-flicker 0.12s infinite;
}



/*** MAIN FORMATTING ***/

#wrapper2 {
  max-width: 1500px;
  display: flex;
  margin: auto;
  }

#main {
  display: grid;
  grid-template-columns: 230px 2fr 1fr;
  gap: 16px;
  }

/*** NAVBAR FORMATTING ***/

#links {
  display: grid;
  padding: 10px;
  grid-template-rows: 50px 50px 50px 50px;
  gap: 16px;
  }

#links a{
  
  transition: 
  }
#links img{
  width: 30px;
  transition: 
  }
  
#links a:hover, navbarbtn:hover{
  transform: translatex(10px);
  }

#links h2 {
  color: white;
  }

/*** TITLE FORMATTING ***/
#title, #intro, #guestbook, #navbar, #skinviewer {
  border: 3px solid var(--outline-colour);
  background-color: var(--win-colour);
    width: fit-content;
  height: fit-content;
  box-shadow: 
  
  4px 2px 0px 2px rgba(39, 48, 62, 0.5),
  8px 6px 0px 3px rgba(29, 38, 52, 0.5);
  
  }

.cursor {
  display: inline-block;
  margin-left: 2px;
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/*** INTRODUCTION FORMATTING ***/


/*** GUESTBOOK FORMATTING ***/
#guestbook {
  margin-top: 16px;
  }

#guestbook iframe {
  width: 100%;
  height: 100%;
  border: none;
  }

#guestbook-form {
  display: flex;
  gap: 16px;
  flex-direction: column;
  }

#name, #message {
  background-color: rgba(29, 38, 52, 1);
  border: none;
  color: white;
  font-family: "Pixelify Sans", sans-serif;
  }

#entries {
  
}

#entries h3{
  border: 3px solid var(--outline-colour);
  display:flex;
  gap: 16px;
  color: white;
}

#entries strong{
  color: #9999fd;
}

#skin-container {
  cursor: grab;
  }

/*** WINDOWCARD FORMATTING ***/
.windowcard {
  display: flex;
  outline: 3px solid var(--outline-colour);
  top: 0;
  margin: 0;
  padding: 0;
  }
.windowcard img {
  height: 25px;
  margin-right: 0;
  margin-left: auto;
  }
.windowcard h1, h2 {
  margin: 0;
}

  padding: 0;
  }