* {
     color: #fdfdfd;
}

body {
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     background: rgb(106,146,255);
     background: linear-gradient(158deg, rgba(106,146,255,1) 0%, rgba(255,99,193,1) 51%, rgba(248,133,8,1) 100%);
     background-repeat: no-repeat;
     object-fit: contain;
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#container {
     margin-top: 15px;
     width: 70%;
     height: 90vh;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     text-align: center;
     background: rgba(255, 255, 255, 0.17);
     border-radius: 16px;
     box-shadow: 7px 7px 30px 5px rgba(0, 0, 0, 0.194);
     backdrop-filter: blur(14.1px);
     -webkit-backdrop-filter: blur(14.1px);
     border: 1px solid rgba(255, 255, 255, 0.56);
}

h1 {
     margin-bottom: 0;
}

.board {
     display: grid;
     grid-template-columns: repeat(3, 100px);
     gap: 2%;
     margin-bottom: 35px;
}

.cell {
     width: 100px;
     height: 100px;
     background-color: rgb(254, 107, 195);
     border: 1px solid #fdfdfd;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 36px;
     transition: 0.5s ease;
     cursor: pointer;
}

.cell:hover {
     background-color: rgb(252, 57, 174);
}

button {
     font-size: larger;
     background-color: rgba(106,146,255,1);
     padding: 15px;
     border: 1px solid #fdfdfd;
     border-radius: 10px;
     transition: 0.3s ease;
}

button:hover {
     background-color: rgb(61, 111, 248);
}

@media (max-width: 789px) {
     #container {
          height: 75vh;
     }
}
@media (max-width: 450px) {
     #container {
          width: 85%;
          height: 70vh;
     }
     .board {
          grid-template-columns: repeat(3, 85px);
     }
     
     .cell {
          width: 85px;
          height: 85px;
     }
     
}