@import url("https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap");

* {
   margin: 0;
   padding: 0;
   box-sizing: inherit;
}

html {
   font-size: 62.5%;
   box-sizing: border-box;
}

body {
   font-family: "Press Start 2P", sans-serif;
   color: #eee;
   background-color: #222;
}

/* LAYOUT */
header {
   position: relative;
   height: 35vh;
   border-bottom: 7px solid #eee;
}

main {
   height: 65vh;
   color: #eee;
   display: flex;
   align-items: center;
   justify-content: space-around;
}

.left {
   width: 52rem;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.right {
   width: 52rem;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.middleLine {
   height: 100%;
   width: 10px;
   background-color: #eee;
   left: 50%;
}

/* ELEMENTS STYLE */
h1 {
   font-size: 4rem;
   text-align: center;
   position: absolute;
   width: 100%;
   top: 52%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.number {
   background: #eee;
   color: #333;
   font-size: 6rem;
   width: 15rem;
   padding: 3rem 0rem;
   text-align: center;
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 50%);
}

.between {
   font-size: 1.4rem;
   position: absolute;
   top: 2rem;
   right: 2rem;
}

.again {
   position: absolute;
   top: 2rem;
   left: 18rem;
}

.back {
   position: absolute;
   top: 2rem;
   left: 2rem;
}

.guess {
   background: none;
   border: 4px solid #eee;
   font-family: inherit;
   color: inherit;
   font-size: 5rem;
   padding: 2.5rem;
   width: 25rem;
   text-align: center;
   display: block;
   margin-bottom: 3rem;
}

.btn {
   border: none;
   background-color: #eee;
   color: #222;
   font-size: 2rem;
   font-family: inherit;
   padding: 2rem 3rem;
   cursor: pointer;
}

.btn:hover {
   background-color: #ccc;
}

.message {
   margin-bottom: 8rem;
   height: 3rem;
}

.label-score {
   margin-bottom: 2rem;
}

.player2 {
   margin-left: 27.5%;
}

.player1 {
   margin-left: -27.5%;
}

.hidden {
   display: none;
}

.message {
   font-size: 5rem;
   line-height: 6rem;
}

.show-winner {
   font-size: 5rem;
   position: absolute;
}
