@import url('https://fonts.googleapis.com/css2?family=TASA+Explorer:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');
/*minecraft-ten-lowercase*/

@font-face {
  font-family: 'MinecraftTen';
  src: url('minecraft-ten-lowercase.ttf') format('truetype');
}

* {
  margin: 0; padding: 0;
  box-sizing: border-box;
  outline: none; border: none;
  text-decoration: none;
  transition: 0.3s linear;
}

body {
  background-attachment: fixed;
  background-size: cover;
  background-image: url(https://images.steamusercontent.com/ugc/2310974141604980016/B4EF3A7A2D1772DE26B1A6F51CE33A04FD8BB917/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false);
  overflow: hidden; 
}

video {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: -1;
}

.text {
  display: flex;
  justify-content: center;
  height: 150px;
}

.text img {
  width: 350px;
  height: auto;
}



.content {
  display: grid;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.content .p1 {
  width: 400px;
  height: 150px;
  padding: 15px;
  margin: 10px;
    
  border-top: 4px solid #3B3736;
  border-right: 4px solid #3B3736;
    
  border-left: 4px solid #000000;
  border-bottom: 4px solid #000000;
    
  color: #ffffff;
  font-family: "TASA Explorer", sans-serif;
  font-size: 18px;
  font-optical-sizing: auto;
  
  background-color: #252422;
  text-indent: 20px;
  text-align: justify;
}

.content .p1 span {
  background-color: #1A1917;
  font-weight: bold;
}

.content .p2 {
  width: 400px;
  padding: 15px;
  margin: 10px;
    
  border-top: 4px solid #3B3736;
  border-right: 4px solid #3B3736;
    
  border-left: 4px solid #000000;
  border-bottom: 4px solid #000000;
    
  background-color: #252422;
    
  color: #ffffff;
  font-family: "MinecraftTen", sans-serif;
  font-size: 35px;
  letter-spacing: 2.5px;
  font-optical-sizing: auto;
  text-align: center;
}

.content .p2:hover {
  border-top: 4px solid #52A435;
  border-right: 4px solid #52A435;
    
  border-left: 4px solid #2B641C;
  border-bottom: 4px solid #2B641C;
    
  background-color: #3B8628;
}

.content .player {
  width: 400px;
  height: 165px;
  padding: 15px;
  margin: 10px;
    
  border-top: 4px solid #3B3736;
  border-right: 4px solid #3B3736;
    
  border-left: 4px solid #000000;
  border-bottom: 4px solid #000000;
    
  background-color: #252422;
  backdrop-filter: blur(15px);
    
  color: white;
}

.player {
  display: grid;
}

.player img {
  border: 2px solid #52A435;
}

.player h3 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  font-family: "MinecraftTen", sans-serif;
  letter-spacing: 2.5px;
  font-size: 32.5px;
  font-optical-sizing: auto;
  text-align: right;
  text-transform: uppercase;
}

.progress-bar {
  height: 12px;
  width: 200px;
  position: relative;
  top: 55%;
  background-color: #3B3736;
  cursor: pointer;
  border-bottom: 4px solid #2b2827;
}

.progress {
  height: 12px;
  background-color: #52A435;
  border-bottom: 4px solid #3B8628;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.btn {
  height: 16px;
  width: 14px;
  background-color: #ffffff;
  border-bottom: 5px solid #c5c5c5;
}

.progress-bar:hover {
  background-color: #007207;
  border-bottom: 4px solid #015206;
}

.time {
  width: 200px;
  display: flex;
  position: relative;
  top: 34%;
  justify-content: space-between;
  font-family: "MinecraftTen", sans-serif;
  letter-spacing: 2.5px;
  font-size: 17.5px;
}

.box {
  position: absolute;
  top: 64%;
  left: 57%;
}

.box button {
  margin: 5px;
  padding: 6.5px;
  
  background-color: #3B8628;
  border-top: 3px solid #53bf37;
  border-left: 3px solid #52A435;
  border-right: 3px solid #52A435;
  border-bottom: 6px solid #2B641C;
}

.box button:hover {
  background-color: #c5c5c5;
  border-top: 3px solid #ffffff;
  border-left: 3px solid #e0dede;
  border-right: 3px solid #e0dede;
  border-bottom: 6px solid #575557;
  cursor: pointer;
}

.box button:hover i {
  color: #000;
}

.box i {
  color: #ffffff;
  font-size: 16px;
  font-optical-sizing: auto;
}

@media (max-width:844px){
  video {
    height: 100%;
    width: auto;
  }
  
  .text {
    width: 100vw;
    justify-content: center;
  }
  
  .content {
    width: 100vw;
    display: grid;
    justify-content: center; 
  }
}