@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

h1, h2, h3, h4, h5, p, input, button {
   font-family: "Poppins", sans-serif;
}
h1 {
   line-height: 20px;
   font-size: 30px;
}
h5 {
   font-weight: 100;
   line-height: 5px;
}
p {
   line-height: 10px;
}

body {
   margin: 0;
   overflow: hidden;
}

#hexBox, #guessHexBox {
   width: 50vw;
   height: 100vh;
   background: black;
   position: absolute;
   z-index: -99;
}
#hexBox {
   left: 0;
}

#guessHexBox {
   right: 0;
}

.contentwrapper {
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
}
.content {
   color: white;
   background-color: rgb(14, 13, 15);
   padding: 30px;
   border-radius: 20px;
   width: 14%;
   transition: 300ms;
}
.content:hover {
   transform: scale(1.02);
}
input {
   border-radius: 15px;
   border: none;
   text-align: center;
   width: 100%;
   font-size: 50px;
   margin-bottom: 10px;
   transition: 300ms;
   background-color: rgb(5, 5, 5);
   color: white;
}
input:focus {
   outline: none;
   transform: scale(1.1);
}
input:hover {
   background-color: rgb(41, 41, 41);
}
.btnwrapper {
   display: flex;
   justify-content: space-between;
   gap: 10px;
}
button {
   border-radius: 15px;
   border: none;
   width: 100%;
   padding: 20px;
   background-color: rgb(5, 5, 5);
   color: white;
   transition: 100ms;
}
button:hover {
   background-color: rgb(41, 41, 41);
}
.result {
   margin-top: 25px;
}
.result p {
   margin-bottom: 5px;
}