html{
  background-color: rgba(0, 0, 0, 0.911);
  overflow-x: hidden;
}
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-image {
  width: 100px; 
  height: auto;
}

#landscape-warning {
  display: none; 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  font-size: 45px;
  text-align: center;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.retromachine{
  height: 100vh;
  border: 20px solid rgb(21, 255, 0);
  box-shadow: 10px 10px 10px 10px  rgb(0, 0, 0); 
}

.container {
  height: auto;
  display: flex;
  justify-content: center;
}
h1{
  width: 100%;
  color: white;
  position: absolute;
  text-align: center;
  margin-top: -37%;
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight:1;
  font-style: normal;
}
h2{
  width: 100%;
  color: white;
  position: absolute;
  text-align: center;
  margin-top: -39%;
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight:1;
  font-style: normal;
}
.dice1{
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: -28%;
  gap: 50px;
  
}
.nav{
  width: 100%;
  display: flex;
  justify-content: center;
  

  }
.button{
  display: flex;
  justify-content: center;
  margin-top: -110px;
}
.btn{
  width: 200px;
  height: 80px;
  cursor: pointer;
  transition: transform 0.2s;
}

.btn:active {
  transform: scale(0.9); 
}

@media (max-width: 768px) {
  .retromachine{
    height: 250vh;
  }
  h1{
    margin-top: -115%;
    font-size: 80px;
  }
  h2{
    margin-top: -125%;
    font-size: 60px;
  }
  .dice1{ 
    margin-top: -85%;
    gap: 50px;
    
  }
  .img{
    width: 200px;
  }

  .button{
    margin-top: -150px;
    margin-left: 0;
  }
  .btn{
    width: 440px;
    height: 100px;
  }
}