:root {
    --current-height: 0;
    --elapsed-percentage: 0;
}


* {
    margin: 0px;
    padding: 0px;
    border: 0px;
    box-sizing: content-box !important;

}

html, body {
    height: 100%;
    width: 100%;

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

    margin: 0;
    position: relative;
    user-select: none;
}

body::before {
    content: "";
    position: absolute;
    top: -10dvh;
    left: -30dvh;
    width: 100%;
    height: 100%;
    background: url('joker.svg') no-repeat left top;
    background-size: contain;
    opacity: 0.03;
    z-index: 3;
    pointer-events:none;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;
}

@media (orientation: landscape) {
    .container {
        flex-direction: row;
    }

    #settingsIcon {
        right: 52vw !important;
    }

    button {
        height: 100%;
        width: 50%;
    }

    #timer {
        font-size: min(90dvw, 45dvh);
    }

    #timer.active {
        font-size: min(95dvw, 55dvh);
    }

    #meter {
        position: absolute;
        height: 0%;
        width: 20px;
        left: calc(50% - 20px);
        z-index: 10;
        background-color: #414281;
    }

    @keyframes shrinkMeter {
        from {
          height: var(--elapsed-percentage);
        }
        to {
          height: 100%;
        }
    }
}

@media (orientation: portrait) {
    .container {
        flex-direction: column;
    }

    #settingsIcon {
        color:#2c3e50;
    }

    button {
        height: 50%;
        width: 100%;
    }

    #timer {
        font-size: min(50dvh, 45dvw);
    }

    #timer.active {
        font-size: min(60dvh, 55dvw);
    }

    #meter {
        position: absolute;
        height: 0%;
        width: 20px;
        right: 0px;
        z-index: 10;
        background-color: #414281;
    }

    @keyframes shrinkMeter {
        from {
            height: calc(var(--elapsed-percentage) / 2);
        }
        to {
          height: 50%;
        }
    }

}

button#timer {
    color: #2c3e50;
    transition: transform 0.3s ease, color 0.3s ease;

    transition: font-size 0.3s ease;
    background-color: #e0dac4;

    font-family: Tahoma, Helvetica, sans-serif;
}

button#timer.active {
    color: #414281;
    text-shadow: 10px 10px 20px white;
}

button#timer span.decimals {
    color:red;
    font-size: min(8dvh, 8dvw);
    position: relative;
    right:0px;
}

@keyframes timerEndAnimation {
    0% {
        transform: scale(1);
        color: #2c3e50;
    }
    50% {
        transform: scale(1.3);
        color: red;
    }
    100% {
        transform: scale(1);
        color: #2c3e50;
    }
}

#timer.end {
    animation: timerEndAnimation 1s ease-in-out infinite;
}

button {
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: none; 
    margin: 0px;

    z-index: 2;
}


button#reset {
    background-color: #dd393f;
    color: white;
}

button#reset:active {
    background-color: #dd191f;
    color: white;
}

button#reset #resetSvg {
    width: min(45dvw, 45dvh);
    height: min(45dvw, 45dvh);

} 

button#reset.rotate #resetSvg {
    animation: rotateAnimation 400ms forwards;
}

@keyframes rotateAnimation {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(-180deg) scale(1.3);
    }
    100% {
        transform: rotate(-360deg) scale(1);
    }
}


#settingsIcon {
    position: fixed;
    top: min(4dvw, 4dvh);
    right: min(4dvw, 4dvh);

    width: min(12dvw, 12vh);
    height: min(12dvw, 12vh);

    opacity: 0.03;

    z-index:11;
}

#closeIcon {
    position: fixed;
    top: min(4dvw, 4dvh);
    right: min(4dvw, 4dvh);

    width: min(7dvw, 7vh);
    height: min(7dvw, 7vh);

    z-index:11;
}

#settingsMenu {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    opacity: 0;
    transition: top 0.5s ease, opacity 0.5s ease;
}

#settingsMenu[open] {
    transform: translateY(0);
    z-index:1000;
    opacity: 1;
    display:block !important;
}

#settingsMenu.closing {
    transform: translateY(-100%);
    opacity: 0;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #007bff;
    color: white;
}

.settings-content {
    padding: 20px;
}

.hide {
    display: none;
}