@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body{
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: darkblue;
  background: linear-gradient(0deg, #03737a33, #03737a33), 
              linear-gradient(0deg, #0066c442, #0066c442), 
            #000000;
}

.container{
  background: white;
  width: 100%;
  max-width: 450px;
  border-radius: 7px;
}

.container header{
  padding: 20px;
  border-bottom: 1px solid #ccc;
}

.container h2{
  font-size: 1.5rem;
  letter-spacing: 1px;
  text-shadow: 1px 1px 10px #9797fe;
}

.container header span{
  color: rgb(220, 20, 20);
}

.container .content{
  margin: 1.3rem;
}

.content .word{
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1rem;
  margin-right: -1rem;
  text-shadow: 1px 1px 10px #9797fe;
  word-wrap: break-word;
}

.content .detail{
  margin: 25px 0;
}

.detail p{
  margin-bottom: 10px;
}

.content input{
  width: 100%;
  height: 60px;
  outline: none;
  border-radius: 5px;
  background: transparent;
  border: 1px solid #bbb;
  padding: 0 15px;
  box-shadow: inset 1px 1px 4px #ccc,
              inset -1px 1px 4px #ccc;
}

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

.content .btn button{
  border: none;
  outline: none;
  padding: 15px;
  border-radius: 5px;
  width: calc(100% / 2 - 5px);
  color: white;
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: 1px;
}

.content .btn .refresh-word{
  background: #333;
}

.content .btn .check-word{
  background: darkblue;
}

.content .btn .check-word:disabled{
  opacity: 0.5;
  pointer-events: none;
}