@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

html {
  height: 100%;
  width: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}


h1{
  border-bottom : 1px solid #f9b52c;
  border-bottom-width: 1px;
  color : rgb(246, 175, 89);
  margin: 10px 0 2 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: animationtext 4s steps(80, end); 
  transition: all cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

body {
  margin: 0;
  font-family: var(--bs-font-sans-serif);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fefefe;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1{
  border-bottom : 1px solid #000000;
  border-bottom-width: 1px;
  color : rgb(253, 252, 250);
  margin: 10px 0 2 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: animationtext 4s steps(80, end); 
  transition: all cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

@keyframes animationtext { 
  from {
      width: 0;
     transition: all 2s ease-in-out;
  } 
 }

 .container{
  width : 45%;
  align-items: center;
  padding: 3%;
  width : fit-content;
  background: #060606;
  border-radius: 5px;
  box-shadow: #b5b5b5;
  background: rgba(244, 237, 237, 0.25);
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 6.5px );
  -webkit-backdrop-filter: blur( 6.5px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  
}

.game-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.status-msg {
  color: white;
  font-size: 1.5rem;

  display: none;

}

.container h1{
  font-size: 35px;
  font-weight:500;
  padding : 20px 25px;
  border-bottom : 1px solid #ccc;
  border-bottom-width: 1px;
  color : rgb(0, 0, 0);
  margin: 10px 0 2 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: animationtext 4s steps(80, end); 
  transition: all cubic-bezier(0.1, 0.7, 1.0, 0.1);
}


@keyframes animationtext { 
from {
   width: 0;
  transition: all 2s ease-in-out;
} 
}

.wrapper-new{
width : 45%;
background: #fefdfd;
border-radius: 5px;
box-shadow: #b5b5b5;
background: rgba(244, 237, 237, 0.25);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 6.5px );
-webkit-backdrop-filter: blur( 6.5px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
padding: 1% 1% 2% 1%;

}

/* .container {
  align-items: center;
  justify-content: center;
  width: 450px;
  border-radius: 7px;
}

.container h2{
  font-size : 25px;
  font-weight : 500;
  padding : 20px 20px;
  border-bottom : 1px solid #ccc;
} */

.container .content{
  padding : 20px 20px;
}

.content .details{
  margin : 25px 0px 20px;
}

.content .word{
  font-size : 35px;
  font-weight : 500;
  text-align : center;
  letter-spacing : 24px;
  margin-right : -24px;
  text-transform : uppercase;
}

.details p{
  font-size : 20px;
  margin-bottom : 10px;
  text-align : center;
}

.details p b{
  font-weight : 500;
}

.content input{
  width : 100%;
  height : 50px;
  outline : none;
  font-size : 20px;
  padding : 0 15px;
  border-radius : 5px;
  border : 2px solid #ccc;
}

.content buttons{
  display : flex;
  margin-top : 20px;
  justify-content : space between;
}

.buttons button{
  border : none;
  outline : none;
  padding : 15px 0;
  font-size : 15px;
  border-radius : 5px;
  margin-top: 1%;
}

.nextnew{
  align-items: center;
  margin-left: 25%;
  border-style: none;
  border-radius: 10px;
  padding-left: 2%;
  padding-top: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
  cursor: pointer;
  outline: none;
  border: none;
  background: rgb(242, 139, 14);
  font-family: monospace;
}

input{
  height : 50px;
  outline : none;
  font-size : 20px;
  padding : 0 15px;
  border-radius : 5px;
  border : 2px solid #000000;
  background-color: rgb(241, 199, 148);
  box-shadow: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

.refreshword{
  padding-left: 2%;
  padding-top: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
  /* padding-top: 10%; */
  cursor: pointer;
  outline: none;
  border: none;
  background: rgb(242, 139, 14);
  font-family: cursive;
  font-size: 30%;
  border-radius: 5px;
  transition: all 0.3s ease;
  color: bisque;
}

.checkword{
  cursor: pointer;
  outline: none;
  border: none;
  background: rgb(242, 139, 14);
  font-family: cursive;
  border-radius: 5px;
  transition: all 0.3s ease;
  color: bisque;
}

.next{
  cursor: pointer;
  outline: none;
  border: none;
  background: rgb(242, 139, 14);
  font-family: cursive;
  border-radius: 5px;
  transition: all 0.3s ease;
  color: bisque;
}

.reset{
  font-family: cursive;
  cursor: pointer;
  outline: none;
  border: none;
  background: rgb(242, 139, 14);
  border-radius: 5px;
  transition: all 0.3s ease;
  color: bisque;
  
}

#scorecard{
  font-size: 50px;
  font-weight: 500;
  text-align: center;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#resetbtn{
  width: 75%;
  padding: 0% 2% 0% 2%;
  font-size: 200%;
  margin-left: 15%;
  margin-top: 2%;
  border-style: none;
  border-radius: 5px;
  font-family: cursive;
  align-items: center;
  cursor: pointer;
  outline: none;
  border: none;
  background: rgb(242, 139, 14);
  color: bisque;
  transition: all 0.3s ease;
}

#rules{
  color:rgb(242, 139, 14);
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
}

#rulespart{
  color : rgb(253, 101, 0);
  font-weight: bolder;
}

.info{
  color :rgb(238, 151, 46);
}