/* 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 {
  background-color: #0f1017;
  color: white;
  font-family: Courier New;
  overflow-wrap: break-word;
  z-index: 1;
}
.vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* so it doesn't block clicks */
  z-index: 9999; /* or whatever is on top */
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 80%,
    rgba(0, 0, 0, 0.4) 100%
  );
}
.screen-border {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  border: 0.5vw solid black; /* change thickness and color as needed */
  border-top: 1vw solid black;
  border-bottom: 1vw solid black;
  pointer-events: none; /* makes sure it doesn’t block clicks */
  z-index: 9999; /* ensure it stays on top of everything */
}

.bg-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  z-index: -1;
}

.bg-container::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background: linear-gradient(to right, #0f1017 0%, rgba(37, 42, 46, 0) 20%, rgba(37, 42, 46, 0) 80%, #0f1017 100%);*/
  pointer-events: none;
}

.bg {
  display: block;
  opacity: 0.8;
    top: 0;
    left: 50%;
    height: 100vh;        /* full viewport height */
    width: 100%;          /* maintain aspect ratio */
    transform: translateX(-50% -50%); /* center horizontally */
    object-fit: cover;
    z-index: -1;          /* behind content */
    border: 0.5vw solid black;
  
}
.intro {
  position: fixed;
  background-color: #FFFFFF;
  border: 0.2vw solid black;
  margin-left: auto;
  margin-right: 2%;
  right: 0;
  top: 5%;
  bottom: auto;
  width: 18vw;
  padding: 1vw;
  color: black;
  text-align: center;
  background-image:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
}

.player {
  max-width: 100%;
  display: block;
}

.heading {
  background-color: rgba(40, 41, 49, 0.7);
  border: 0.2vw solid black;
  margin-left: 30%;
  margin-right: 30%;
  padding: 2%;
}

.main {
  background-color: rgba(40, 41, 49, 0.7);
  border: 0.2vw solid black;
  margin-left: 30%;
  margin-right: 30%;
  padding: 2%;
}
.itf {
  max-width: 100%;  /* Image won't get wider than its container */
  height: auto;     /* Maintains aspect ratio */
  display: block;

}
.image-container {
  position: relative;
  width: 60vw;
  height: 60vh;
  margin: auto;
  padding-bottom: 6vw;
}

a .ball {
 position: fixed;
  top: 5%;
  bottom: 10%;
  left: 15%;
  width: 3vw;
  height: 3vw;
  background-color: black;
  border-radius: 25px;
  animation: float 3s ease-in-out infinite;
  opacity: 0.8;
  padding: 1vw;
}
a .ball:hover {
 background-color: white;
}

a .flag {
 position: fixed;
  top: 35%;
  bottom: 10%;
  left: 15%;
  width: 3vw;
  height: 3vw;
  background-color: black;
  border-radius: 25px;
  animation: float 3s ease-in-out infinite;
  opacity: 0.6;
  padding: 1vw;
}
a .flag:hover {
  background-color: white;
  opacity: 0.8;
}
a .crown {
 position: fixed;
  top: 20%;
  bottom: 10%;
  left: 15%;
  width: 3vw;
  height: 3vw;
  background-color: black;
  border-radius: 25px;
  animation: float 3s ease-in-out infinite;
  opacity: 0.8;
  padding: 1vw;
}
a .crown:hover {
  background-color: white;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
.floating {
 position: fixed;
  top: 5%;
  bottom: 10%;
  left: 15%;
  width: 5vw;
  height: 5vw;
  background-color: black;
  border-radius: 10px;
  animation: float 3s ease-in-out infinite;
  color: black;
  opacity: 0.8;
  pointer-events: none;
}
.floating2 {
 position: fixed;
  top: 20%;
  bottom: 10%;
  left: 15%;
  width: 5vw;
  height: 5vw;
  background-color: black;
  border-radius: 10px;
  animation: float 3s ease-in-out infinite;
  color: black;
  opacity: 0.8;
}
.floating3 {
 position: fixed;
  top: 35%;
  bottom: 10%;
  left: 15%;
  width: 5vw;
  height: 5vw;
  background-color: black;
  border-radius: 10px;
  animation: float 3s ease-in-out infinite;
  color: black;
  opacity: 0.8;
}
.chat {
  position: fixed;
  bottom: 0;
  right: 0;
  left: auto;
  width: 20vw; /* 20% of the viewport width */
  height: auto; /* 10% of the viewport height */
  margin: 2vw;
  border: 0vw solid black;
  transform: translateX(-50% -50%);
}




@media (max-width: 768px){
  .bg {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    z-index: -1;
  }
  .heading {
    width: 80vw;
    margin-left: 5%;
    margin-right: 5%;
  }
  .main {
    width: 80vw;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 70vw;
  }
  .intro {
    display: none;
/*    position: absolute;
    top: 68%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50vw;
    height: auto;
    box-sizing: border-box;
*/
  }
  
  .chat {
    width: 100vw;
    height: auto;
    margin-left: 0vw;
    margin-right: 0vw;
    transform: translateX(-50% -50%); /* center horizontally */
    padding: 0%;
    right: 0;
    left: 0;
  }
  .image-container {
    top: auto;
    left: auto;
    transform: none;
    width: 90vw; /* or 100vw */
    
  }

  a .ball {
    position: fixed;
    left: 16.5%;
    top: 64%;
    bottom: auto;
    right: auto;
    width: 15vw;
    height: 15vw;
  }
    .floating {
    position: fixed;
    left: 15%;
    top: 63%;
    bottom: 40%;
    right: auto;
    width: 20vw;
    height: 20vw;
  }
  a .crown {
    position: fixed;
    right: 41.5%;
    top: 64%;
    bottom: auto;
    left: auto;
    width: 15vw;
    height: 15vw;
  }
  .floating2 {
    position: fixed;
    left: 40%;
    top: 63%;
    bottom: 40%;
    right: auto;
    width: 20vw;
    height: 20vw;
  }
    a .flag {
    position: fixed;
    right: 16.5%;
    top: 64%;
    bottom: auto;
    left: auto;
    width: 15vw;
    height: 15vw;
  }
  .floating3 {
    position: fixed;
    right: 15%;
    top: 63%;
    bottom: 40%;
    left: auto;
    width: 20vw;
    height: 20vw;
  }
}