html {
  font-size: 62.5%;
}

/* Utility */
@font-face {
  font-family: "titleOptionFont";
  src: url("..\\font\\Super-Mario-World.ttf");
}

.unselectable {
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

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

  background-color: rgb(22, 22, 31);

  height: 100vh;
  width: 100vw;
  margin: auto;
}

.container {
  max-width: 95%;
  max-height: 95%;

  margin: auto;
  border: 2px solid black;

  animation: image_blur 0.5s step-end;
  animation-fill-mode: forwards;
}

.home-background {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "titleOptionFont";
  font-size: xx-large;
}

.home-background img {
  position: relative;
  max-height: 95vh;
  width: 100%;
  background-attachment: fixed;
}

.home-content {
  position: absolute;
  width: 100%;
  height: 88%;
  top: 8%;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.title-card {
  top: 50%;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.title-card img {
  max-width: 80%;
  pointer-events: none;
}

/* Onload animation */
@keyframes image_blur {
  0% { -webkit-filter: blur(10px);}
  20% { -webkit-filter: blur(8px);}
  40% { -webkit-filter: blur(6px);}
  60% { -webkit-filter: blur(4px);}
  80% { -webkit-filter: blur(2px);}
  100% { -webkit-filter: blur(0px);}
  /* 100% { -webkit-filter: blur(0px);} */
}

/* Menu */
.menu-options {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  gap: 3%;
}

.menu-option {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 10%;
}

.menu-option-anchor {
  height: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 30%;
  gap: 1%;
}

.current-option {
  background: url("../imgs/title-itemSelect.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-y: center;
  height: 100%;
  width: 7.5%;
  
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
 
.page-option {
  height: 100%;
  font-family: "titleOptionFont";
  font-size: 4cqh;
  color: white;
  -webkit-text-stroke: 0.05em black;
  justify-self: center;
  -webkit-text-size-adjust: none;
  background-color: transparent;
  border: none;
}

button.page-option:hover + div.current-option{
  visibility: visible;
  opacity: 1;
  animation: blinker 0.55s step-start infinite;
  animation-delay: -0.225s;
}

.leaves
/* Wind animation */
.leaves {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 1;
}

.leaves div {
  position: absolute;
  background: url(..\\imgs\\leaf.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  width: 4vw;
  height: 4vh;
}

.leaves div:nth-child(1) {
  top: 10%;
  animation: leafAnim 5s infinite linear;
  animation-delay: -2s;
}

.leaves div:nth-child(2) {
  top: 35%;
  animation: leafAnim 6s infinite linear;
  animation-delay: -1s;
}

.leaves div:nth-child(3) {
  top: 60%;
  animation: leafAnim 4s infinite ease-in;
  animation-delay: 0s;
}

.leaves div:nth-child(4) {
  top: 75%;
  animation: leafAnim 8s infinite linear;
  animation-delay: -6s;
}

@keyframes leafAnim {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
    transform: rotate(360deg) translateY(-10rem);
  }
}

/* Clouds */
.clouds {
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 20%;
    pointer-events: none;
    z-index: 0;
}
.clouds .cloud {
    position: absolute;
    background: url("../imgs/cloud.png") no-repeat;
    background-size: contain;
    width: 7.5vw;
    height: 5vh;
    animation: cloudMove 40s linear infinite;
}
.clouds .cloud:nth-child(2) {
    top: 40%;
    animation-delay: -30s;
}

@keyframes cloudMove {
    0% { left: -20vw; }
    100% { left: 120vw; }
}

/* Title bob animation */
.title-card img {
    max-width: 80%;
    pointer-events: none;
    animation: titleBob 3s ease-in-out infinite;
}
@keyframes titleBob {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

/* Ground tiles */
.ground {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px; /* adjust to your tile size */
    background: url("../imgs/ground_tile.png") repeat-x;
    background-size: contain;
    z-index: 2;
}

.main-menu-frame {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%; /* adjust to your tile size */
    background: url("../imgs/frame.png") no-repeat;
    background-size: contain;
    z-index: 2;
}

/* Robot walking */
.robot {
    position: absolute;
    bottom: 64px; /* just above ground tiles */
    left: -64px;
    width: 64px;
    height: 64px;
    background: url("../imgs/robot_sprite.png") no-repeat;
    background-size: contain;
    animation: robotWalk 15s linear infinite;
}
@keyframes robotWalk {
    0% { left: -64px; }
    100% { left: 100vw; }
}