/* Responsive layout */
@media screen and (max-width:1060px){

    #topMenu .menu{
        top: 0px;
    }

    #main{
        width: 100%;
        left: 0px;
        margin-left: 0px;
        justify-content: center;
    }

    #logo{
        display: none;
    }

    #navigationBar{
        display: none;
    }
}

@media screen and (max-width:632px){

    #topMenu .menu .buttons{
        padding: 0px 8px;
        justify-content: flex-start;
        gap: 6px;
    }

    #topMenu .menu .buttons .logo{
        width: 52px;
        margin-left: 12px;
        visibility: visible;
    }
    #topMenu .menu .buttons .logo .image{
        width: 52px;
        height: 52px;
        top: 16px;
    }

    #topMenu .menu .buttons .version{
        width: 80px;
        visibility: visible;
    }
    #topMenu .menu .buttons .version .rect{
        width: 38px;
        height: 18px;
        left: 12px;
        top: 42px;
    }
    #topMenu .menu .buttons .version .corner{
        top: 45px;
        left: -2px;
        border: 7px solid;
        border-color: transparent #656565 transparent transparent;
        transform: scale(1,0.55);
    }
    #topMenu .menu .buttons .version .text{
        width: 38px;
        height: 18px;
        left: 12px;
        top: 42px;
        font-size: 12px;
        line-height: 18px;
    }

    #topMenu .menu .buttons .home,
    #topMenu .menu .buttons .themeToggle{
        width: auto;
        visibility: visible;
        padding: 0px 8px;
    }

    #topMenu .menu .buttons .home .text,
    #topMenu .menu .buttons .themeToggle .text{
        font-size: 14px;
    }

    #topMenu .menu .buttons .close{
        margin-right: 12px;
    }
}

@media screen and (max-width:500px){

    #topMenu .menu .buttons{
        padding: 0px 6px;
        gap: 4px;
    }

    #topMenu .menu .buttons .logo{
        width: 46px;
        margin-left: 8px;
        visibility: visible;
    }
    #topMenu .menu .buttons .logo .image{
        width: 46px;
        height: 46px;
        top: 19px;
    }

    #topMenu .menu .buttons .version{
        width: 70px;
        visibility: visible;
    }
    #topMenu .menu .buttons .version .rect{
        width: 34px;
        height: 16px;
        left: 10px;
        top: 43px;
    }
    #topMenu .menu .buttons .version .corner{
        top: 46px;
        left: -2px;
        border: 6px solid;
        border-color: transparent #656565 transparent transparent;
        transform: scale(1,0.55);
    }
    #topMenu .menu .buttons .version .text{
        width: 34px;
        height: 16px;
        left: 10px;
        top: 43px;
        font-size: 11px;
        line-height: 16px;
    }

    #topMenu .menu .buttons .home,
    #topMenu .menu .buttons .themeToggle{
        padding: 0px 6px;
    }

    #topMenu .menu .buttons .home .text,
    #topMenu .menu .buttons .themeToggle .text{
        font-size: 13px;
    }

    #topMenu .menu .buttons .close{
        margin-right: 8px;
    }
}

@media screen and (max-width:450px){

    #main #timerApp{
        transform: scale(0.9);
    }
}

@media screen and (max-width:400px){

    #main #timerApp{
        transform: scale(0.8);
    }
}

@media screen and (max-width:375px){

    #main #timerApp{
        transform: scale(0.75);
    }
}

@media screen and (max-width:320px){

    #main #timerApp{
        transform: scale(0.7);
    }
}