:root {
}

html, body {
    margin: 0px;
    padding: 0px;
    font-size: 20px; /*base font size*/
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    height: inherit;
}

@media only screen and (min-width: 320px) and (max-width: 479px){
    /*small, phones*/
    html {
        font-size: 14px;
    }

    main {
        flex-direction: column;
    }
    .brokenUI{
        display: none;
    }
    button {
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px){
    /*medium, tablets*/
    html {
        font-size: 14px;
    }

    main {
        flex-direction: column;
    }
    .brokenUI{
        display: none;
    }
    button {
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px){
    /*large, laptops*/

    main {
        flex-direction: column;
        visibility: hidden;
    }
    button {
    }
}

@media only screen and (min-width: 992px){
    /*very large, monitors*/

    main {
        flex-direction: column;
        visibility: hidden;
    }
    button {
    }
}

main {
    display: flex;
    min-height: 100vh;
    justify-content: space-around;
    align-items: center;
    color: #171326;
    background-color: #a2caca; /*deb887*/
}

.button {
    border: none;
    padding: 2rem;
    color: inherit;
    font-size: inherit;
    border-radius: 20%;
    background: #a2caca;
    font-family: inherit;
    box-shadow:  2px 2px 5px 0px #8db0b0, -2px -2px 5px 0px #b7e4e4;
}
.button:active {
    scale: 0.95;
    background:linear-gradient(145deg, #92b6b6, #add8d8);
    box-shadow:  2px 2px 1px 0px #7b9a9a, -2px -2px 1px 0px #c9fafa;
}
.reset {
}
.count {
    border-radius: 10%;
    width: 90vw;
    aspect-ratio: 1;
    font-size: 4vh;
}
.timer {
    padding: 2rem;
    width: 80vw;
    text-align: center;
    border-radius: 1rem;
    background: #a2caca;
    font-size: 7vh;
    box-shadow: inset 8px 8px 13px #7b9a9a, inset -8px -8px 13px #c9fafa;
}
.malacount, .japacount {
    display: flex;
    aspect-ratio: 1;
    padding:2rem;
    align-items: center;
    border-radius: 50%;
    background: #a2caca;
    flex-direction: column;
    justify-content: space-around;
    box-shadow: inset 6px 6px 12px #688181, inset -6px -6px 12px #dcffff;
}
.japacount span {
    font-size: 10vh;
}