/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');

h1 {
    text-align: center;
    font-size: 10vw;  /* Already in vw */
    letter-spacing: 0.42vw; /* 5px converted to vw based on 1200px screen width */
    text-shadow: 0.33vw 0.33vw 0.67vw black, -0.33vw -0.33vw 0.67vw black, 0.33vw -0.33vw 0.67vw black, -0.33vw 0.33vw 0.67vw black; /* Converted to vw */
    animation-name: rotateTitle;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    position: relative;
    z-index: 3;
}

h2 {
    text-align: center;
    font-size: 4vw;
    margin-top: -10vw; 
    position: relative;
    z-index: 4;
}

body {
    color: white;
    overflow: hidden;
    height: 100vh;
    background-image: url('images/MineCraftBg.png');
    background-repeat: repeat-x; 
    background-size: 100vw auto; 
    font-family: 'Jersey 10', sans-serif; 
    font-weight: normal;
    text-shadow: 0.17vw 0.17vw 0.33vw rgb(0, 0, 0), -0.17vw -0.17vw 0.33vw rgb(0, 0, 0), 0.17vw -0.17vw 0.33vw rgb(0, 0, 0), -0.17vw 0.17vw 0.33vw rgb(0, 0, 0);
    animation: moveBackground 20s linear infinite; /* Apply animation */
}

@keyframes rotateTitle {
     0% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
   
    100% {
        transform: rotate(-5deg);
    }
}

@keyframes moveBackground {
    0% {
        background-position: 0 0; /* Start from the left */
    }
    100% {
        background-position: 100vw 0; /* End at 100% of the viewport width */
    }
}
.button {
    color: blue;
}

.html {
    background: rgb(33,171,84);
    background: linear-gradient(90deg, rgba(33,171,84,1) 0%, rgba(0,255,1,1) 53%, rgba(0,174,255,1) 87%);
}

.top-buttons {
    display: flex;
    justify-content: center;
    padding: 0;
}

.pro-button {
    background-color: black;
    border: none;
    color: rgb(255, 255, 255);
    padding: 0;  /* Remove padding to make it easier to center */
    text-align: center;
    text-decoration: none;
    display: flex;  /* Use flexbox for centering */
    justify-content: center;  /* Center text horizontally */
    align-items: center;  /* Center text vertically */
    font-size: 2.5vw; /* 30px converted to vw */
    margin: 0.33vw 0.17vw;  /* 4px 2px converted to vw */
    cursor: pointer;
    border-radius: 0px;
    transition: background-color 1s ease, transform 1s ease, font-size 0.3s ease; /* Add font-size transition */
    border: 0.5vw solid #ffffff; /* 6px converted to vw */
    width: 33.33vw;  /* 400px converted to vw */
    height: 4.17vh;  /* 50px converted to vh based on a typical screen height of 800px (5% of screen height) */
    z-index: 3;
}

.pro-button-back {
    background-color: black;
    border: none;
    color: rgb(255, 255, 255);
    padding: 0;  /* Remove padding to make it easier to center */
    text-align: center;
    text-decoration: none;
    display: flex;  /* Use flexbox for centering */
    justify-content: center;  /* Center text horizontally */
    align-items: center;  /* Center text vertically */
    font-size: 2.5vw; /* 30px converted to vw */
    margin: 0.33vw 0.17vw;  /* 4px 2px converted to vw */
    cursor: pointer;
    border-radius: 0px;
    transition: background-color 1.5s ease, transform 1.5s ease, font-size 0.5s ease; /* Add font-size transition */
    border: 0.5vw solid #ffffff; /* 6px converted to vw */
    width: 33.33vw;  /* 400px converted to vw */
    height: 5vh;  /* 50px converted to vh based on a typical screen height of 800px (5% of screen height) */
    z-index: 3;
}

.pro-button:hover {
    background-color: #000000;
    transform: scale(1.05);
    font-size: 2.67vw; /* 32px converted to vw */
}

.pro-button-back:hover {
    background-color: #ffffff;
    transform: scale(1.5);
    font-size: 2.67vw; /* 32px converted to vw */
    /* animation: gobackbutton 1.5s ease forwards; *
}

.pro-button:active {
    background-color: #000000;
    transform: scale(1.15);
    font-size: 3.33vw; /* 40px converted to vw */
}

.square {
    width: 100px;
    height: 100px;
    background-image: url("images/dirtblock.png");
    background-size: cover;
    background-color: transparent;
    position: absolute;
    z-index: 1;
    bottom: -10vw; /* Start from below the screen */
    opacity: 1;
    animation: popUp 3s linear forwards;
}

/* Animation keyframes */
@keyframes popUp {
    0% {
        bottom: -10vw;
        opacity: 1;
    }
    50% {
        bottom: 50%;
        opacity: 1;
    }
    100% {
        bottom: 100%;
        opacity: 0.25;
    }
}

@keyframes gobackbutton {
    0% {
        background-color: black;
    }
   
    100% {
        background-color: white;
    }
}

/* Back button styles */
.btn-80,
.btn-80 *,
.btn-80 :after,
.btn-80 :before,
.btn-80:after,
.btn-80:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-80 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-80:disabled {
  cursor: default;
}
.btn-80:-moz-focusring {
  outline: auto;
}
.btn-80 svg {
  display: block;
  vertical-align: middle;
}
.btn-80 [hidden] {
  display: none;
}
.btn-80 {
  border: 2px solid;
  border-radius: 999px;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  padding: 0.6rem 1.5rem; /* Smaller padding for a smaller button */
  position: relative;
}
.btn-80 span {
  font-weight: 900;
  mix-blend-mode: difference;
}
.btn-80:before {
  background: #fff;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}
.btn-80:hover:before {
  -webkit-animation: progress-bar 1.2s;
  animation: progress-bar 1.2s;
}
@-webkit-keyframes progress-bar {
  0% {
    opacity: 1;
    width: 0;
  }
  10% {
    opacity: 1;
    width: 15%;
  }
  25% {
    opacity: 1;
    width: 25%;
  }
  40% {
    opacity: 1;
    width: 35%;
  }
  55% {
    opacity: 1;
    width: 75%;
  }
  60% {
    opacity: 1;
    width: 100%;
  }
  to {
    opacity: 0;
    width: 100%;
  }
}
@keyframes progress-bar {
  0% {
    opacity: 1;
    width: 0;
  }
  10% {
    opacity: 1;
    width: 15%;
  }
  25% {
    opacity: 1;
    width: 25%;
  }
  40% {
    opacity: 1;
    width: 35%;
  }
  55% {
    opacity: 1;
    width: 75%;
  }
  60% {
    opacity: 1;
    width: 100%;
  }
  to {
    opacity: 0;
    width: 100%;
  }
}
.back-button-container {
    display: flex;
    padding: 0;
    position: absolute;
    top: 10px;
    left: 10px; /* Move button to the left */
    z-index: 3;
}