@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Original+Surfer&family=Silkscreen:wght@400;700&display=swap');


body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    font-family: system-ui, arial;
    font-weight: 400;
    background-color:white;
    color: #213547;
}

#infobox {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#title {
    font-family: original surfer, system-ui, arial;
    font-size: 30px;
    font-weight: bold;
}

.btn {
    font-size: 20px;    
    margin-top: 30px;
}

#time-section {
    display: flex;
    font-size: 20px;
    margin-top: 20px;
}

#time-left {
    margin-right: 10px;
}

#board {
    display: grid;
    grid-template-columns: repeat(4, 106.25px);
    grid-gap: 15px;
    margin-top: 15px;
}


.sqr {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 106.25px;
    border-radius: 8px;
    background-color:cornflowerblue;
    text-align: right, bottom;
    font-size: 35px;
  }

  @media (max-width: 1600px) {

    #title {
        font-size: 25px
    }

    #time-section {
         font-size: 18px
    }
    
    #board {
      grid-template-columns: repeat(4, 80.25px);
    }

    .sqr {
        height: 80.25px
    }

    .btn {
    font-size: 15px;
  }
}

.sqr:hover:not(.active) {
background-color:thistle;
}

.active {
    background-color:lightgreen;
}

.checker {
    background-color:sandybrown
}

.checker:hover:not(.active) {
    background-color: sandybrown;
}

.safe {
    color: limegreen
}

.caution {
    color:coral
}

.danger {
    color: red
}