/* 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." */

body {
  margin: 0;
  
  background-image: url("https://elliotkim.neocities.org/Images/bill-magnusson-snowtrack.jpg");
  
  background-size: cover;
  
  background-position: center;
  
  background-repeat: no-repeat;
  
  /* add a fallback colour later */
    
  background-color: black;
  color: white;
  font-family: Verdana;
}

.mpcontent {
  max-width: 960px; 
  margin: 0 auto;
  padding: 1rem 1.5rem;
  color: #ffffff;              /* HIGHLIGHT: white text so it pops */
}



                                                                          /* TYPEWRITER ANIMATION */

.typewriter {
  font-family: "Consulate Consulate", "Yuji Syuku";  /* your chosen font */
  font-size: 2.5rem;
  font-weight: normal;
  white-space: nowrap;      /* keep text on one line */
  text-shadow: 0 0 1px #ffffff,
  0 0 2px #ffffff,
  0 0 4px #ffffff;
}

.typewriter span {
  display: inline-block;                 /* needed so width can animate */
  border-right: 3px solid #ffffff;       /* visible cursor */
  overflow: hidden;                      /* hide text beyond current width */

  width: 0ch;                            /* start with 0 characters visible */

  /* 12 characters → 12 steps */
  animation:
    typing 1s steps(15, end) forwards,   /* one jump per character */
    blink-caret 0.7s step-end 5 forwards;  /* blinking cursor */
}

/* grow width from 0ch to 12ch */
@keyframes typing {
  from {
    width: 0ch;
  }
  to {
    width: 15ch;
  }
}

/* cursor blink animation */
@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: #ffffff;
  }
}



                                                                          /* MENU Cluster */

/* big area that all the boxes sit inside */
.menu-area {
  position: relative;      /* makes children position relative to this box */
  width: 800px;            /* you can change this to make the area bigger/smaller */
  height: 400px;           /* controls how tall the menu area is */
  margin: 3rem auto;       /* centers the whole area on the page */
}

/* shared styles for every menu box */
.menu-box {
  position: absolute;      /* lets us place each box anywhere inside .menu-area */
  display: flex;           /* centers the text */
  align-items: center;
  justify-content: center;

  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(6px);

  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.9);

  /* start with a very soft glow */
  box-shadow: 0 0 0px rgba(255, 255, 255, 0.0);

  color: white;
  font-family: "Yuji Syuku", serif;
  text-decoration: none;
  font-size: 1.3rem;
  text-align: center;

  /* animate border glow in/out smoothly */
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  
  opacity: 0;
  animation: fadeInSoft 0.7s ease-out forwards;
  
}


/* glow effect on hover */
.menu-box:hover {
  /* brighter border + outer glow */
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.85);
  
  background-color: rgba(255, 255, 255, 0.3);
}




/* === individual sizes + positions === */

/* ABOUT: tall rectangle, top-left-ish */
.box-about {
  width: 150px;
  height: 150px;
  top: 10px;      /* distance from top of .menu-area */
  left: 10px;     /* distance from left of .menu-area */
  animation-delay: 0.2s;
}

/* CREATIONS: wider box, slightly lower and to the right */
.box-creations {
  width: 190px;
  height: 110px;
  top: 40px;
  left: 190px;
}

/* THINGS I LIKE: smaller, pushed down and overlapping a bit */
.box-things {
  width: 160px;
  height: 130px;
  top: 150px;
  left: 60px;
  animation-delay: 0.3s;
}

/* BLOG: small square, off to the right */
.box-blog {
  width: 120px;
  height: 120px;
  top: 170px;
  left: 260px;
  animation-delay: 0.5s;
}




                                      /* animation for menu buttons */
@keyframes fadeInSoft {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}