/* I may have overused a bit the vw/vh unities to zoom-lock the
   website while making it responsive to the screen size */

:root {
    --bg-color: #183048;
    --el-color: #102030;
    --hover-el-color: #081018;
    --unfocused-color: #888;
    --angle: 360deg; /* Redefined later for nice browsers (not Firefox) */
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: white;
    font-size: 6vh;
    font-family: 'Rowdies';
}

main {
    text-align: center;
}

h1 {
    font-size: 1.4em;
    margin: 5vh;   
}

#modeContainer {
    display: flex;
    width: 35vh;
    font-size: 0.5em;
    border: solid white 0.7vh;
    border-radius: 100vh;
    margin: auto;
    margin-bottom: 5vh;
}

#modeContainer > div {
    flex: 1;
    background-color: var(--el-color);
    color: var(--unfocused-color);
    padding: 1.5vh;
}

#work {
    border-top-left-radius: 100vh;
    border-bottom-left-radius: 100vh;
}

#break {
    border-top-right-radius: 100vh;
    border-bottom-right-radius: 100vh;
}

i {
    margin: 0.7vh;
}

#timerContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40vh;
    aspect-ratio: 1/1;
    background-color: darkslategray;
    border-radius: 100%;
    position: relative;
    margin: auto;
}

h3 {
    font-size: 1.2em;
}

/* Timer animation, behind the main container decreasing with JS */
#timerCircle {
    position: absolute;
    width: 41.4vh;
    aspect-ratio: 1/1;
    border-radius: 100%;
    z-index: -1;
    background: conic-gradient(white var(--angle), var(--el-color) 0);
}

@keyframes animate {
	to {
		--angle: 0deg;
	}
}

@property --angle {
	syntax: "<angle>";
	initial-value: 360deg;
	inherits: false;
}


/* The colon is a bit higher for beauty reasons */
#colon {
    position: relative;
    bottom: 2%;
}

button {
    font-family: inherit;
    font-size: 0.5em;
    color: inherit;
    border: solid white 0.7vh;
    border-radius: 3vh;
}

.timerButton {
    width: 25vh;
    aspect-ratio: 3/1;
    margin-top: 5vh;
}

#start {
    background-color: #282;
}

#start:hover {
    background-color: #161;
}

#reset {
    background-color: #f00;
    display: none;
}

#reset:hover {
    background-color: #a00;
}

.roundButton {
    position: absolute;
    background-color: var(--el-color);
    width: min(12vw, 10vh);
    font-size: min(3.5vw, 3vh);
    aspect-ratio: 1/1;
    border-radius: min(5vw, 3.5vh);
    right: 5vw;
    top: 5vw;
}

.roundButton:hover {
    background-color: var(--hover-el-color);
}

#settingsContainer {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 100;
    background-color: var(--bg-color);
    width: 40%;
    padding-left: 5vw;
    padding-right: 5vw;
    font-size: min(5vw, 5vh);
    text-align: center;
}

h2 {
    margin-top: calc(min(12vw, 10vh) * 1.8);
    margin-bottom: 3vh;
}

/* Timer fields styling */

#durationContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5vh;
}

#durationContainer > div {
    display: flex;
}

#durationContainer > div > label {
    text-align: right;
    margin-right: 1.5vw;
}

.timeInput {
    display: flex;
    gap: 0.3vw;
}

.timeInput > input {
    color: white;
    font-family: inherit;
    font-size: inherit;
    text-align: center;
    width: 8vw;
    max-width: 15vh;
    background-color: var(--hover-el-color);
    border: solid white 0.5vh;
    border-radius: 1vh;
}


/* Used to separate settings from the rest */

#opacityDiv {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 80%;
}


/* Making a Custom Checkbox */

#labelMute {
    margin-top: 5vh;
    display: flex;
    gap: 3vw;
    text-align: center;
    justify-content: center;
    align-items: center;
}

#fakeCheck {
    height: max(3.2vh, 3vw);
    aspect-ratio: 1/1;
    background: var(--el-color);
    border: solid white 0.5vh;
    border-radius: 1vh;
    text-align: center;
    font-size: calc(max(3.2vh, 3vw)*0.75);
}

#muteCheck {
    display: none;
}

#labelMute:hover > #fakeCheck {
    background-color: var(--hover-el-color);
}

#fakeCheck > i {
    display: none;
}

#muteCheck:checked ~ #fakeCheck > i {
    display: initial;
}

footer {
    font-size: 0.5em;
    text-align: center;
    position: absolute;
    bottom: 5vh;
    left: 0;
    right: 0;
}