* {
    box-sizing: border-box;
}
body {
    background-color: black;
    color: white;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    width: 97%;
}
p, table, button, input, #botInput{
    font-size: 1.5em;
}
header {
    border-bottom: 3px solid gray;
    h1 {
        border-bottom: 3px solid gray;
        padding-bottom: 20px;
    } 
    ul {
        width: fit-content;
        text-align: left;
        margin: 5px auto 20px;
        padding: 20px;
        border: 3px solid gray;
    }
}
main {
    justify-content: center;
    .result {
        border: 3px solid gray;
        padding: 5px;
        display: grid;
        grid-template: 1fr / repeat(3, 1fr);
        table {
            border: 3px solid gray;
            margin: 3px 0;
            padding: 3px;
            width: 100%;
            td {
                border: 1px solid gray;
                padding: 10px;
            }
        }
        .t1 {
            grid-area: 1 / 1 / 2 / 2;            
        }
        .t2 {
            grid-area: 1 / 2 / span 1 / span 1;            
        }
        .t3 {
            grid-area: 1 / 3 / span 1 / span 1;            
        }
    }
    .boxC {
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: center;
        .box {
            border: 5px solid gray;
            flex-grow: 1;
            flex-shrink: 1;
            flex-basis: auto;
            max-width: 500px;
            min-width: 250px;
            margin: 25px;
            padding: 10px;
            justify-content: center;
        }
    }
}
@media screen and (max-width: 500px) {
    body {
        font-size: 0.8em;
    }
    p, table{
    font-size: 1.3em; 
    }
}

@media  screen and (max-width: 390px) {
    p, table{
    font-size: 1.1em; 
    }
}

@media  screen and (max-width: 350px) {
    p, table{
    font-size: 0.9em; 
    }
}
@media  screen and (max-width: 300px) {
    p, table{
    font-size: 0.8em; 
    }
}

#reset {
   margin: 5px auto;
   padding: 0;
   position: relative;
   top: 10px;

}

#plyG {
    width: 100px;
    text-align: center;
}

#add, #sub {
    display: inline-flex;
    padding: 5px 14px;
    margin: auto 5px;
    border-radius: 50%;
}
#sbmt, #nxt {
    margin: 10px auto;
}