style.css

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

@font-face {
  font-family: "Digital";
  src: url("assets/digital-7.ttf");
}

* {
  font-family: "Rubik", sans-serif;
  color: white;
}

body,html {
  width: 100%;
  height: 100%;
  background: black;
}

.guessImg {
  width: 100%;
  cursor: pointer;
  transition: ease 200ms;
}

.guessCont {
  width: 25%;
  text-align: center;
}

.guessImg:hover {
  border: 10px solid white;
}

#guessBox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
}

#popup {
  background: #e82e20;
  transition: ease 400ms;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

@media only screen and (max-width: 800px) {
  #popup {flex-wrap:wrap}
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  align-items:center;
  justify-content: center;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
}

#hostInfo {
  font-family: "Permanent Marker", sans-serif;
  position: absolute;
  left: 12%;
  top: 30%;
  width: 20%;
  color: black;
}

#hostInfo * {
  font-family: "Permanent Marker", sans-serif;
  color: black;
}

#hostTime {
  font-family: "Digital", sans-serif;
  font-size: 3em;
  position: absolute;
  right: 12%;
  top: 18%;
  color: gray;
}

.corkCont {
  height: 100%;
  position: relative;
  text-align: center;
  width: fit-content;
  margin: auto;
}

#namesD {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.name {
  padding: 5px;
  background: white;
  color: black;
  border-radius: 3px;
}

button {
  border-radius: 3px;
  background: white;
  color: black;
  border: 2px solid black;
  cursor: pointer;
  box-shadow: 1px 1px 2px black;
}


@keyframes moiExpand {
  0% {
    font-size: 0px;
  }
  30% {
    font-size: 0px;
  }
  100% {
    color: black;
  }
}


@keyframes tExpand {
  0% {
    font-size: 0px;
  }
  80% {
    font-size: 0px;
  }
  100% {
    font-size: 50px;
  }
}

@keyframes bShow {
  0% {
    right: 200%;
  }
  80% {
    right: 200%
  }
  100% {
    right: 5%;
  }
}

.moi {
  animation: moiExpand ease 4s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.it1 {
  animation: tExpand 1s;
}

.it2 {
  animation: tExpand 2s;
}

.it3 {
  animation: tExpand 3s;
}

.it4 {
  animation: tExpand 4s;
}

.indexBody {
  background-image:url(https://img.freepik.com/free-photo/granite-texture_1160-692.jpg);
}

.indexButtons {
  position: absolute;
  bottom: 15%;
  right: 5%;
  animation: bShow 6s;
  z-index: 9999;
}

.indexText {
  font-size: 50px;
  position: absolute;
  color: black;
  left: 15%;
  top: 15%;
  z-index: 9998;
  text-shadow: 1px 1px 2px black;
}