* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  /* outline: 1px solid red; */
}

html {
  font-size: 62.5%;
  overflow-x: hidden;

  background-color: #000;
}

body {
  font-family: "Pocket GB", Arial, sans-serif !important;
  font-weight: 400;
  line-height: 1.6;
  color: #555;

  /* margin: 0 auto; */
  overflow-x: hidden;

  /* display: flex;
  flex-direction: column;
  align-items: center; */
  height: 100dvh;
}

#main-content section {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
}

.fade {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.blur {
  filter: blur(5px);
  pointer-events: none; /* Optional: prevent interaction */
  user-select: none; /* Optional: prevent text selection */
}

.game-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100dvw;
  height: 100dvh;

  position: relative;
}

.start-btn,
.start-btn:link,
.start-btn:visited {
  font-size: 3rem;
  color: #ddd;
  background-color: #3860aa;
  padding: 2rem 4rem;
  border-radius: 13px;
  box-shadow: 0px 4px 8px 6px rgba(0, 0, 0, 0.1);
  text-decoration: none;

  opacity: 0.9;

  transition: all 0.3s ease-in-out;
}

.start-btn:hover {
  background-color: #2d4d88;
  color: #fff;
}

.title-btn {
  position: absolute;
  bottom: 27%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.title-btn:active {
  transform: translate(-50%, -45%);
  box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, 0.1);
}

.pokemon-style-font {
  font-family: "Pocket Monk";
  color: rgb(255, 203, 5);
  -webkit-text-stroke: 0.7rem #0d508d;
  text-shadow: 2px 8px 10px #000;
}