:root {
    font-size: 10px;

    --box-size: 50px;
}

* {
    box-sizing: border-box;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    padding: 0;
    margin: 0;
}

*::after,
*::before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-color: rgb(0, 0, 0);

    min-height: 100svh;

    display: flex;
    flex-direction: column;
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h2 {
    font-size: 3rem;
    color: white;
}

p {
    color: white;
    font-size: 1.8rem;
}

.head {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.head .timer {
    position: relative;
    
    width: 50px;
    height: 50px;
    border-radius: 50%;

    --timer-value: '1:00';

    box-shadow: inset 0px 0px 2px 1px rgb(104, 102, 102);

    background: conic-gradient(rgb(236, 181, 15) 0deg, rgb(47, 45, 45) 0deg);
}

.timer .circle {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 38px;
    height: 38px;

    border-radius: 50%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgb(0, 0, 0);

    font-size: 1.5rem;
}

.title {
    color: rgb(255, 145, 0);
    text-align: center;
    font-size: 3rem;

    letter-spacing: 0.05em;

    text-shadow: 0 2px 4px rgba(110, 109, 109, 0.733);

    margin: 18px 0;
}

.box-container {
    display: grid;

    margin: 0 auto;

    grid-template-columns: repeat(4, var(--box-size));
    gap: 10px;
    justify-content: center;
}

.box {
    display: flex;
    justify-content: center;
    align-items: center;

    width: var(--box-size);
    height: var(--box-size);

    box-shadow: 0 0 2px 0px rgb(164, 162, 162);
    color: white;

    font-size: 2.5rem;
    border-radius: 5px;
}

.box.selected {
    box-shadow: 0 0 5px 1px rgb(240, 236, 29);
}

.popup, .setting {
    position: absolute;
    background-color: rgba(84, 84, 84, 0.707);
    inset: 0;

    transform: scale(0);

    transition: 0.25s all ease-in-out;
}
/* .setting {
    transform: scale(1);
} */
.setting .container {
    width: fit-content;
    background-color: black;

    display: flex;
    flex-direction: column;

    gap: 10px;

    justify-content: center;
    align-items: center;

    margin: 0 auto;

    margin-top: 150px;

    color: white;
    padding: 20px 20px;
    border-radius: 10px;

    box-shadow: 0 0 5px 0 rgba(181, 178, 178, 0.629);
}
.setting button.reset-score {
    border: none;
    color: white;

    font-size: 2rem;
    padding: 0.2em 0.55em;
    border-radius: 5px;

    background-color: rgb(18, 85, 85);
    cursor: pointer;

    transition: 0.07s all ease-in-out;
}
.setting button:active {
    transform: translate(1px, 1px);
}

.setting .cont {
    display: flex;
    gap: 10px;

    align-items: center;

    font-size: 1.8rem;
}

.setting .cont div {
    display: flex;
    align-items: center;
    justify-content: center;
}
.setting .size-icon {
    width: 30px;
    cursor: pointer;

    transition: 0.05s all ease-in-out;
}
.size-icon:active {
    transform: translate(1px,1px);
}

.setting p {
    color: rgb(13, 231, 13);
}

.close-popup {
    align-self: flex-end;
    border: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;

    cursor: pointer;

    box-shadow: 0 0 5px 0 rgb(184, 181, 181);
    

    background-color: rgb(255, 0, 0) !important;
}
.reset-score {
    width: 100%;

    margin-top: 10px;
}

.setting button:hover {
    opacity: 0.6;
}

.popup .container {
    width: fit-content;
    background-color: black;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    margin: 0 auto;

    margin-top: 150px;

    gap: 10px;
    
    padding: 20px 20px;
    border-radius: 10px;

    box-shadow: 0 0 5px 0 rgba(181, 178, 178, 0.629);

    /* margin: 0px auto; */
}

.popup h2 {
    color: rgb(210, 174, 14);
}

.popup .container button {
    border: none;

    font-size: 2rem;

    padding: 0.25em 0.75em;

    border-radius: 5px;

    background-color: aqua;
    cursor: pointer;
    /* pointer-events: none; */

    transition: 0.2s all ease-in-out;
    
}

.popup .container button:hover {
    background-color: rgb(12, 131, 131);
    color: white;
}

.key-container {
    display: flex;
    justify-content: center;
    gap: 5px;
    width: fit-content;
    
    margin: 20px;
    flex-wrap: wrap;

    width: 40%;
}
.key {
    font-size: 2rem;
    padding: 0.25em 0.75em;
    color: white;
    
    box-shadow: 0 0 2px 0 rgb(173, 171, 171);

    cursor: pointer;
}
.key:hover {
    background-color: #1b1b1b;
}

.setting-btn img {
    width: 40px;
    height: 40px;

    cursor: pointer;

    transition: all 0.1s ease-in-out;
}

.setting-btn img:hover {
    filter: brightness(0.5);
    transform: scale(1.08);
}

footer {
    padding: 6px 10px; 
    position: absolute;

    bottom: 0;
    left: 0;
    right: 0;

    box-shadow: 0 0 3px 0 rgba(210, 207, 207, 0.577);
    background-color: #1b1b1b;
}
footer p {
    color: rgb(255, 205, 25);
}

@media screen and (max-width: 700px) {
    .key-container {
        width: 90%;
        
      
    }
}

@media screen and (min-width: 700px) and (max-width: 929px) {
    .key-container {
        width: 70%;
    }
}
@media screen and (max-width: 519px) {
    :root {
        --box-size: 45px;
    }
    .key {
        font-size: 1.8rem;
    }
    footer {
        padding: 6px 10px;
    }
    footer p{
        font-size: 1.5rem;
    }
}