:root {
    --appBorder             : hsl(240, 22%, 11%);
    --appColor              : hsl(240, 22%, 7%);
    --bodyColor             : hsl(201, 39%, 12%);
    --stopwatchColor        : hsl(141, 76%, 48%);
    --alarmColor            : hsl(219, 76%, 48%);
    --timerColor            : hsl(357, 93%, 41%);
    --worldClockColor       : hsl(57, 87%, 52%);
    --stopwatchColorBg      : hsla(141, 76%, 48%, 20%);
    --alarmColorBg          : hsla(219, 76%, 48%, 20%);
    --timerColorBg          : hsla(357, 93%, 41%, 20%);
    --worldClockColorBg     : hsla(57, 87%, 52%, 20%);
    --textColor             : hsl(240, 0%, 80%);
    --textColorInactive     : hsl(240, 0%, 45%);
    --monospace             : 'Space Mono';
    
    --navColor              : hsl(210, 27%, 14%);
    --navHoverColor         : hsl(208, 18%, 8%);
    --navColorChosen        : hsl(219, 17%, 59%);
    --resetColor            : hsl(191, 49%, 30%);

    /* Timer */
    --timerBodyColor        : hsl(210, 23%, 17%);
    --borderHover           : transparent;
    --circle                : hsl(220, 14%, 30%);
    --timerCounter          : hsl(220, 14%, 20%);
    --timer-border          : hsl(190, 21%, 19%);
    --timerModalColor       : hsla(0, 0%, 0%, 50%);
    --timerSet              : var(--circle);
    --timerSetColor         : hsl(190, 21%, 32%);
    --inputBorder           : hsl(220, 14%, 60%);
    --disabledReset         : hsl(191, 49%, 18%);
    --disabledText          : hsl(240, 0%, 40%);
    --disabledAdd           : hsl(357, 93%, 19%);

    /* Stopwatch */
    --stopwatchBodyColor    : hsl(201, 39%, 10%);
    --stopwatchBorder       : hsl(219, 13%, 21%);
    --stopwatchTextColor    : hsl(201, 39%, 17%);

    /* Alarm */
    --alarmTimeColor        : hsl(208, 18%, 16%);
    --alarmThumbColor       : rgb(29 42 45);
    --alarmThumbColorActive : hsl(240, 0%, 80%);
    --alarmToggle           : hsl(208deg 19% 38%);
    --alarmBorder           : hsl(207, 14%, 27%);
    --alarmToggleActive     : hsl(191, 49%, 30%);
    --alarmBorderActive     : hsl(191, 49%, 43%);
    --alarmTextColor        : rgb(52, 65, 69);
    --alarmWrapper          : hsl(208deg 17% 10%);
    --alarmBorder           : hsl(208deg 18% 18%);
    --alarmWrapperBorder    : hsl(208deg 18% 12%);
    --alarmDelete           : hsl(355, 34%, 29%);

    /* World Clock */
    
}

/* @property --rotate {
    syntax                  : "<angle>";
    inherits                : false;
    initial-value           : 0deg;
} */

.material-symbols-outlined {
  font-variation-settings   : 
  'FILL' 0,
  'wght' 600,
  'GRAD' 0,
  'opsz' 48;
}

*, *::before, *::after {
    margin                  : 0;
    padding                 : 0;
    box-sizing              : border-box;
    font-family             : 'Quicksand';
}

html {
    width                   : 100%;
    height                  : 100%;
}

body {
    width                   : 100%;
    min-height              : 100vh;
    background              : var(--bodyColor);
    display                 : flex;
    flex-direction          : column;
    align-items             : center;
    justify-content         : center;
    gap                     : 10px;
}

/* Current Time Container */
.current-time-container {
    width                   : 500px;
    height                  : auto;
    border-radius           : 10px;
    background              : var(--appColor);
    padding                 : 10px 20px;
    box-shadow              : 0 0 0 2px var(--appBorder);
}

.current-time-container .current-time {
    width                   : 100%;
    height                  : auto;
    color                   : var(--textColor);
    letter-spacing          : .5px;
    display                 : flex;
    justify-content         : space-between;
}

.current-time-container .current-time h4 {
    font-weight             : 600;
}

.current-time-container .current-time span {
    font-family             : var(--monospace);
    letter-spacing          : 1px;
    font-size               : 16px;
    font-weight             : 600;
}

/* Container */

.container {
    position                : relative;
    width                   : 500px;
    height                  : auto;
    border-radius           : 10px;
    display                 : grid;
    grid-template-rows      : auto auto 1fr auto;
    background              : var(--appColor);
    grid-gap                : 5px;
    isolation               : isolate;
}
/* Header */

.container header.main-header {
    width                   : 100%;
    place-self              : center;
    height                  : auto;
    padding                 : 20px;
}

.container header h3 {
    color                   : var(--textColor);
}

/* Navigation */
.container nav {
    width                   : calc(100% - 40px);
    height                  : auto;
    overflow                : hidden;
    place-self              : center;
}

.container nav ul {
    display                 : grid;
    grid-template-columns   : repeat(4, 1fr);
}

.container nav ul li {
    --opacity               : 0;
    --top                   : calc(100% + 1px);
    --bottom                : calc(100% + 1px);
    --background            : transparent;
    position                : relative;
    color                   : var(--textColor);
    list-style              : none;
    text-align              : center;
    padding                 : 5px 10px;
    cursor                  : pointer;
    transition              : .2s ease;
    font-weight             : 600;
    isolation               : isolate;
}

.container nav ul li .background {
    --height                : 0%;
    position                : absolute;
    width                   : 100%;
    height                  : var(--height);
    top                     : 50%;
    left                    : 0;
    translate               : 0 -50%;
    transition              : .2s linear;
    background              : var(--background);
    z-index                 : -1;
}

.container nav ul li:not(.chosen):hover {
    background-color        : var(--navHoverColor);
}

.container nav ul li::before,
.container nav ul li::after  {
    position                : absolute;
    content                 : "";
    width                   : 100%;
    height                  : 2px;
    left                    : 0;
    opacity                 : var(--opacity);
    transition              : .2s ease;
}

.container nav ul li:nth-of-type(1)::before,
.container nav ul li:nth-of-type(1)::after {
    background              : var(--timerColor);
}

.container nav ul li:nth-of-type(2)::before,
.container nav ul li:nth-of-type(2)::after {
    background              : var(--stopwatchColor);
}

.container nav ul li:nth-of-type(3)::before,
.container nav ul li:nth-of-type(3)::after {
    background              : var(--alarmColor);
}

.container nav ul li:nth-of-type(4)::before,
.container nav ul li:nth-of-type(4)::after {
    background              : var(--worldClockColor);
}

.container nav ul li::before {
    top                     : var(--top);
}

.container nav ul li::after {
    bottom                  : var(--bottom);
}

.container nav ul li.chosen {
    --top                   : 0%;
    --bottom                : 0%;
    --opacity               : 1;
}

.container nav ul li:nth-of-type(1).chosen > .background {--background: var(--timerColorBg); --height: 100%;}
.container nav ul li:nth-of-type(2).chosen > .background {--background: var(--stopwatchColorBg); --height: 100%;}
.container nav ul li:nth-of-type(3).chosen > .background {--background: var(--alarmColorBg); --height: 100%;}
.container nav ul li:nth-of-type(4).chosen > .background {--background: var(--worldClockColorBg); --height: 100%;}
/* Content Body */

.container .content {
    width                   : 100%;
    aspect-ratio            : 1/1;
    overflow                : hidden;
    border-radius           : 7px;
    padding                 : 20px;
    display                 : grid;
    position                : relative;
}

.container .content .content-child {
    --left                  : 100%;
    --opacity               : 0;
    --zIndex                : 0;
    position                : absolute;
    width                   : 100%;
    height                  : auto;
    left                    : var(--left);
    opacity                 : var(--opacity);
    /* transition: left .3s ease,
                opacity .1s ease; */
    z-index                 : var(--zIndex);
}

.container .content .chosen-container {
    --left                  : 0;
    --zIndex                : 2;
    --opacity               : 1;
    transition              : left .1s ease,
                opacity .4s ease;
}

/* Timer */

.container .content .timer {
    display                 : grid;
    grid-template-rows      : 1fr auto;
    grid-gap                : 20px;
}

.container .content .timer .timer-container {
    /* display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    padding                 : 10px;
    width                   : calc(100% - 60px);
    aspect-ratio            : 16/15;
    grid-gap                : 20px;
    margin                  : 0 auto;
    overflow                : auto; */
    padding                 : 20px 0px;
    width                   : calc(100% - 60px);
    aspect-ratio            : 16/15;
    margin                  : 0 auto;
    overflow                : auto;
    display                 : flex;
    flex-wrap               : wrap;
    gap                     : 20px;
}

.container .content .timer .timer-container::-webkit-scrollbar {
    display                 : none;
}

.container .content .timer .timer-container .timer-body  {
    --translateChosen       : translate(0, 0);
    --shadow                : 0px 2px 2px rgba(0,0,0,0.8);
    width                   : calc(50% - 10px);
    height                  : fit-content;
    padding                 : 0px 0px 10px;
    border-radius           : 10px;
    background-color        : var(--timerBodyColor);
    display                 : grid;
    grid-template-rows      : auto auto 1fr;
    border                  : 2px solid var(--borderHover);
    transform               : var(--translateChosen);
    box-shadow              : var(--shadow);
    transition              : transform .2s ease;
    grid-gap                : 10px;
}

.fixed-board-maximize {
    --display               : none;
    position                : fixed;
    width                   : 100%;
    height                  : 100%;
    background-color        : var(--timerModalColor);
    display                 : var(--display);
    justify-content         : center;
    align-items             : center;
}

.fixed-board-maximize .maximize-container[data-chosen-maximize="false"] {
    display                 : none;
}

.fixed-board-maximize .maximize-container[data-chosen-maximize="true"] {
    display                 : flex;
}

.fixed-board-maximize .timer-maximize {
    width                   : 500px;
    height                  : 600px;
    background-color        : var(--timerBodyColor);
    border-radius           : 10px;
    box-shadow              : var(--timer-border);
    padding                 : 20px;
    display                 : flex;
    flex-direction          : column;
    justify-content         : space-around;
}

.container .content .timer .timer-container .timer-body:hover {
    --borderHover           : hsl(190, 21%, 19%);
    --translateChosen       : translate(0, -3px);
    --shadow                : 0px 4px 8px rgba(0,0,0,0.8);
}

.active-timer {
    --timerBodyColor        : hsl(13deg 55% 19%)!important;
}

.active-timer:hover {
    --borderHover           : hsl(13 55% 26% / 1)!important;
    --translateChosen       : translate(0, -3px)!important;
    --shadow                : 0px 4px 8px rgba(0,0,0,0.8)!important;
}

.container .content .timer .timer-container .timer-body.translate {
    --translateChosen       : translate(0, 0)
}


.container .content .timer .timer-container .timer-body .body,
.fixed-board-maximize .timer-maximize .body  {
    --rotate                : -360deg;
    width                   : 80%;
    aspect-ratio            : 1/1;
    background-color        : var(--circle);
    border-radius           : 50%;
    margin                  : 0 auto;
    position                : relative;
    background-image        : 
        conic-gradient(
            var(--timerColor) 0deg var(--rotate),
            transparent var(--rotate) 360deg
        );
    transform               : rotateY(180deg);
    transition              : all 1s linear;
    isolation               : isolate;
}

.container .content .timer .timer-container .timer-body .body::before,
.fixed-board-maximize .timer-maximize .body::before {
    position                : absolute;
    content                 : "";
    border-radius           : inherit;
    top                     : 10px;
    left                    : 10px;
    width                   : calc(100% - 20px);
    height                  : calc(100% - 20px);
    background-color        : var(--timerBodyColor);
    z-index                 : -1;
}

.container .content .timer .timer-container .timer-body .body::after,
.fixed-board-maximize .timer-maximize .body::after {
    position                : absolute;
    content                 : attr(data-time);
    top                     : 50%;
    left                    : 50%;
    /* transform               : rotateY(-180deg) translate(-50%, -60%); */
    rotate                  : y -180deg;
    translate               : -50% -60%;
    font-size               : 26px;
    color                   : var(--textColor);
    font-weight             : 600;
    font-family             : var(--monospace);
    z-index                 : 0;
}

.container .content .timer .timer-container .timer-body .body p,
.fixed-board-maximize .timer-maximize .body p {
    /* transform               : rotateY(-180deg) translate(-50%, 50%); */
    rotate                  : y -180deg;
    translate               : -50% 50%;
    display                 : flex;
    position                : absolute;
    top                     : 50%;
    left                    : 50%;
    width                   : max-content;
    align-items             : center;
    gap                     : 5px;
    text-transform          : uppercase;
    color                   : var(--textColor);
    font-weight             : bolder;
}

.container .content .timer .timer-container .timer-body .body p span:nth-child(2),
.fixed-board-maximize .timer-maximize .body p span:nth-child(2) {
    font-family             : var(--monospace);
    font-size               : 14px;
    font-weight             : normal;
}

.container .content .timer .timer-container .timer-body .body p span:nth-child(1) {
    font-size               : 20px;
}

.fixed-board-maximize .timer-maximize .body p span:nth-child(1) {
    font-size               : 40px;
}

.fixed-board-maximize .timer-maximize .body p span:nth-child(2) {
    font-size               : 30px;
}

.fixed-board-maximize .timer-maximize .body p {
    font-size               : 23pt;
    translate               : -50% 60%;
}

.fixed-board-maximize .timer-maximize .body::before {
    width                   : calc(100% - 40px);
    height                  : calc(100% - 40px);
    top                     : 20px;
    left                    : 20px;
}

.fixed-board-maximize .timer-maximize .body::after {
    font-size               : 50px;
}
.container .content .timer .timer-container .timer-body .title,
.fixed-board-maximize .timer-maximize .title {
    width                   : 100%;
    height                  : auto;
    padding                 : 5px 10px;
    display                 : flex;
    align-items             : center;
    justify-content         : space-between;
}

.container .content .timer .timer-container .timer-body .title input[type='checkbox'] {
    width                   : 18px;
    height                  : 18px;
}

.container .content .timer .timer-container .timer-body .title button,
.fixed-board-maximize .timer-maximize .title button {
    --display               : flex;
    display                 : var(--display);
    align-items             : center;
    justify-content         : center;
    background-color        : transparent;
    border                  : 0;
    outline                 : none;
    cursor                  : pointer;;
}

.container .content .timer .timer-container .timer-body .title button span,
.fixed-board-maximize .timer-maximize .title button span {
    color                   : var(--textColor);
    font-size               : 18px;
}

.fixed-board-maximize .timer-maximize .title button span {
    font-size               : 25px;
}

.container .content .timer .timer-container .timer-body .title h4,
.fixed-board-maximize .timer-maximize .title #title-maximize {
    color                   : var(--textColor);
    font-size               : 14px;
}

.fixed-board-maximize .timer-maximize .title #title-maximize {
    font-size               : 20px
}

.container .content .timer .timer-container .timer-body .button-container,
.fixed-board-maximize .timer-maximize .button-container {
    width                   : 100%;
    height                  : auto;
    place-self              : center;
    display                 : flex;
    align-items             : center;
    justify-content         : center;
}

.container .content .timer .timer-container .timer-body .button-container button, 
.fixed-board-maximize .timer-maximize .button-container button {
    width                   : 36px;
    height                  : 36px;
    display                 : grid;
    place-items             : center;
    border-radius           : 50%;
    border                  : 0;
    outline                 : 0;
    margin                  : 0 5px;
    cursor                  : pointer;
}

.fixed-board-maximize .timer-maximize .button-container button {
    width                   : 48px;
    height                  : 48px;
}

.container .content .timer .timer-container .timer-body .button-container button.timer-start,
.fixed-board-maximize .timer-maximize .button-container button.timer-start {
    background-color        : var(--timerColor);
    color                   : var(--textColor);
}

.container .content .timer .timer-container .timer-body .button-container button.timer-start:disabled {
    color                   : var(--disabledText);
    background-color        : var(--disabledAdd);
    cursor                  : default;
}

.container .content .timer .timer-container .timer-body .button-container button.timer-start span {
    content                 : attr(data-button);
    color                   : inherit;
}

.container .content .timer .timer-container .timer-body .button-container button.timer-reset,
.fixed-board-maximize .timer-maximize .button-container button.timer-reset {
    background-color        : var(--resetColor);
}

.container .content .timer .timer-container .timer-body .button-container button.timer-reset:disabled,
.fixed-board-maximize .timer-maximize .button-container button.timer-reset:disabled {
    cursor                  : default;
    background-color        : var(--disabledReset);
}

.container .content .timer .timer-container .timer-body .button-container button.timer-reset:disabled span,
.fixed-board-maximize .timer-maximize .button-container button.timer-reset:disabled span {
    color                   : var(--disabledText)
}

.container .content .timer .timer-container .timer-body .button-container button span,
.fixed-board-maximize .timer-maximize .button-container button span {
    font-size               : 20px;
    font-weight             : 800;
    color                   : var(--textColor);
}

.fixed-board-maximize .timer-maximize .button-container button span {
    font-size               : 27px;
}

.container .content .timer .button-container-bottom {
    width                   : fit-content;
    padding                 : 5px;
    border-radius           : 30px;
    background              : var(--timerBodyColor);
    border                  : 2px solid var(--timer-border);
    display                 : flex;
    gap                     : 20px;
    margin                  : 0 20px 0 auto;

}

.container .content .timer .button-container-bottom button {
    width                   : 40px;
    height                  : 40px;
    border-radius           : 50%;
    border                  : 0;
    outline                 : none;
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    cursor                  : pointer;
    color                   : var(--textColor);
}

.container .content .timer .button-container-bottom button.delete-timer {
    background              : var(--resetColor);
}

.container .content .timer .button-container-bottom button.add-timer {
    background              : var(--timerColor);
}

.container .content .timer .button-container-bottom button.add-timer:disabled {
    background-color        : var(--disabledAdd);
    color                   : var(--disabledText);
    cursor                  : default;
}

.container .content .timer .button-container-bottom button span {
    color                   : inherit;
    font-size               : 18px;
}

.container .content .timer .timer-modal {
    --display               : none;
    position                : fixed;
    top                     : 0;
    left                    : 0;
    width                   : 100%;
    height                  : 100%;
    background-color        : var(--timerModalColor);
    display                 : var(--display);
}

.container .content .timer .timer-modal .timer-edit-board {
    position                : absolute;
    min-width               : 300px;
    height                  : fit-content;
    display                 : flex;
    flex-direction          : column;
    padding                 : 10px;
    border-radius           : 10px;
    border                  : 2px solid var(--timer-border);
    background              : var(--timerBodyColor);
    top                     : 50%;
    left                    : 50%;
    transform               : translate(-50%, -50%);
    /* display: none; */
    user-select             : none;
}

.container .content .timer .timer-modal .timer-edit-board .container-body .counter {
    width                   : fit-content;
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    background-color        : var(--timerCounter);
    margin                  : 0 auto;
    border-radius           : 10px;
    border                  : 2px solid var(--timer-border);
    margin-bottom           : 10px;
}

.container .content .timer .timer-modal header {
    padding                 : 0;
    margin-bottom           : 25px;
    color                   : var(--textColor);
    font-size               : 14px;
    font-weight             : 600;
}

.container .content .timer .timer-modal .timer-edit-board .container-body .counter div:not(.set-add, .set-minus) {
    font-family             : var(--monospace);
    width                   : fit-content;
    padding                 : 5px;
    color                   : var(--textColor);
    font-size               : 25px;
    height                  : fit-content;
    position                : relative;
}

.container .content .timer .timer-modal .timer-edit-board .container-body .counter .set-add,
.container .content .timer .timer-modal .timer-edit-board .container-body .counter .set-minus {
    width                   : 100%;
    height                  : fit-content;
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    background-color        : var(--timerSet)!important;
    border-radius           : 3px;
    cursor                  : pointer;
    outline                 : none;
    user-select             : none;
}

.container .content .timer .timer-modal .timer-edit-board .container-body .counter .timer-set span:not(.material-symbols-outlined) {
    background-color        : var(--timerSetColor);
    border-radius           : 3px;
    padding                 : 0 3px;
    font-family             : var(--monospace);
    margin                  : 3px 0;
    display                 : inline-block;
    user-select             : none;
    color                   : white;
    font-weight             : 500;
}

.container .content .timer .timer-modal .timer-edit-board .container-body .counter .timer-set::after {
    position                : absolute;
    content                 : attr(data-label);
    width                   : auto;
    height                  : auto;
    padding                 : 3px;
    font-size               : 12px;
    color                   : var(--textColor);
    top                     : 0;
    left                    : 50%;
    translate               : -50% calc(-100% - 3px);
    text-align              : center;
}

.container .content .timer .timer-modal .timer-edit-board .container-body .edit-title {
    width                   : 100%;
    padding                 : 10px 5px;
}

.container .content .timer .timer-modal .timer-edit-board .container-body .edit-title .input-container {
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    gap                     : 10px;
}

.container .content .timer .timer-modal .timer-edit-board .container-body .edit-title .input-container span {
    color                   : var(--textColor);
}

.container .content .timer .timer-modal .timer-edit-board .container-body .edit-title .input-container input {
    width                   : 200px;
    background-color        : var(--timerSet);
    border                  : 0;
    padding                 : 5px;
    font-size               : 15px;
    outline                 : none;
    border-radius           : 3px;
    transition              : .2s;
    color                   : white;
}

.container .content .timer .timer-modal .timer-edit-board .container-body .edit-title .input-container input::placeholder {
    color                   : hsl(240, 16%, 78%);
    font-weight             : 600;
    letter-spacing          : 1px;
}

.container .content .timer .timer-modal .timer-edit-board .container-body .edit-title .input-container input:focus {
    background-color        : var(--timerSetColor);
    box-shadow              : 0 0 0 2px var(--inputBorder);
}

.container .content .timer .timer-modal .timer-edit-board .container-body .button-container {
    width                   : 100%;
    padding                 : 10px;
    display                 : flex;
    justify-content         : center;
    gap                     : 30px;
}

.container .content .timer .timer-modal .timer-edit-board .container-body .button-container button {
    border-radius           : 3px;
    width                   : auto;
    border                  : 0;
    outline                 : none;
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    padding                 : 3px 5px;
    color                   : var(--textColor);
    font-size               : 13px;
    font-weight             : 600;
    cursor                  : pointer;
}

.container .content .timer .timer-modal .timer-edit-board .container-body .button-container button.confirm-timer {
    background-color        : var(--timerColor);
}

.container .content .timer .timer-modal .timer-edit-board .container-body .button-container button.cancel-timer {
    background-color        : var(--resetColor);
}

/* Stopwatch */

.container .content .stopwatch {
    --resetLightness        : 46%;
    --lapLightness          : 46%;
    --stopwatchResetColor   : hsl(191, 49%, var(--resetLightness));
    --stopwatchLapColor     : hsl(176, 19%, var(--lapLightness));
    width                   : 100%;
    height                  : 100%;
    padding                 : 10px;
    display                 : grid;
    grid-template-rows      : repeat(4, auto) 1fr;
}

.container .content .stopwatch .laps-timer-body div {
    font-size               : 23px;
    font-weight             : 500;
    font-family             : var(--monospace);
    letter-spacing          : 1px;
    color                   : var(--textColor);
}

.container .content .stopwatch .button-container button:disabled {
    cursor                  : default;
}

.container .content .stopwatch:has(.button-container button.stopwatch-reset:disabled),
.fixed-board-maximize .stopwatch-maximize:has(.button-container button.stopwatch-reset:disabled) {
    --resetLightness        : 20%;
}

.container .content .stopwatch:has(.button-container button.stopwatch-lap:disabled) {
    --lapLightness          : 20%;
}

.container .content .stopwatch header,
.fixed-board-maximize .stopwatch-maximize header {
    width                   : 100%;
    height                  : auto;
    display                 : flex;
    justify-content         : right;
}

.container .content .stopwatch header .maximize,
.fixed-board-maximize .stopwatch-maximize header .minimize {
    border                  : 0;
    width                   : auto;
    height                  : auto;
    outline                 : none;
    background-color        : transparent;
    cursor                  : pointer;
}

.container .content .stopwatch header .maximize span,
.fixed-board-maximize .stopwatch-maximize header .minimize span {
    font-size               : 26px;
    color                   : var(--textColor);
}

.container .content .stopwatch .stopwatch-body,
.fixed-board-maximize .stopwatch-maximize .maximize-stopwatch-body {
    display                 : flex;
    align-items             : baseline;
    justify-content         : center;
    gap                     : 10px;
}

.container .content .stopwatch .stopwatch-body .time span,
.container .content .stopwatch .stopwatch-body .divider,
.fixed-board-maximize .stopwatch-maximize .maximize-stopwatch-body .time span,
.fixed-board-maximize .stopwatch-maximize .maximize-stopwatch-body .divider {
    font-family             : var(--monospace);
    color                   : var(--textColor);
    font-size               : 45px;
}

.fixed-board-maximize .stopwatch-maximize .maximize-stopwatch-body .time span,
.fixed-board-maximize .stopwatch-maximize .maximize-stopwatch-body .divider {
    font-size               : 54px;
}

.container .content .stopwatch .stopwatch-body .stopwatch-milliseconds,
.fixed-board-maximize .stopwatch-maximize .maximize-stopwatch-body .stopwatch-milliseconds {
    display                 : flex;
    align-items             : flex-end;
}

.container .content .stopwatch .stopwatch-body .stopwatch-milliseconds span,
.fixed-board-maximize .stopwatch-maximize .maximize-stopwatch-body .stopwatch-milliseconds span {
    font-size               : 30px;
    width                   : fit-content;
    height                  : 100%;
    display                 : flex;
    align-items             : flex-end;
}

.fixed-board-maximize .stopwatch-maximize .maximize-stopwatch-body .stopwatch-milliseconds span {
    font-size               : 38px;
}

.container .content .stopwatch .button-container,
.fixed-board-maximize .stopwatch-maximize .button-container {
    width                   : 100%;
    padding                 : 10px 0;
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    gap                     : 20px;
}

.container .content .stopwatch .button-container button,
.fixed-board-maximize .stopwatch-maximize .button-container button {
    width                   : 45px;
    height                  : 45px;
    border-radius           : 50%;
    border                  : 0;
    display                 : grid;
    place-items             : center;
    cursor                  : pointer;
    outline                 : none;
    color                   : var(--stopwatchTextColor);
}

.fixed-board-maximize .stopwatch-maximize .button-container button span {
    font-size: 30px;
}

.container .content .stopwatch .button-container button.stopwatch-start,
.fixed-board-maximize .stopwatch-maximize .button-container button.stopwatch-start {
    background              : var(--stopwatchColor);
}

.container .content .stopwatch .button-container button.stopwatch-lap {
    background              : var(--stopwatchLapColor);
}

.container .content .stopwatch .button-container button.stopwatch-reset,
.fixed-board-maximize .stopwatch-maximize .button-container button.stopwatch-reset {
    background              : var(--stopwatchResetColor);
}

.container .content .stopwatch .laps-timer-body {
    --display               : none;
    width                   : 100%;
    min-height              : 30px;
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    font-family             : var(--monospace);
    padding                 : 5px;
    position                : relative;
}

.container .content .stopwatch .laps-timer-body::before {
    position                : absolute;
    content                 : attr(data-sequence);
    color                   : var(--textColor);
    font-size               : 12px;
    left                    : 60px;
    font-weight             : 600;
    font-family             : var(--monospace);
    width                   : auto;
    height                  : 60%;
    align-items             : center;
    justify-content         : center;
    padding                 : 0 5px;
    border-radius           : 5px;
    background              : rgba(255,255,255,0.1);
    display                 : var(--display);
}

.container .content .stopwatch .button-container button span {
    font-size               : 30px;
}

.container .content .stopwatch .stopwatch-laps {
    --display               : none;
    width                   : 100%;
    height                  : auto;
    padding                 : 0 20px;
    border-radius           : 10px;
    background-color        : var(--stopwatchBodyColor);
    overflow                : hidden;
    display                 : var(--display);
    border                  : 1px solid var(--stopwatchBorder);
}

.container .content .stopwatch .stopwatch-laps .labels {
    display                 : grid;
    grid-template-columns   : 100px 2fr 1fr;
    padding                 : 10px 0;
    border-bottom           : 2px solid var(--stopwatchBorder);
}

.container .content .stopwatch .stopwatch-laps .row-container .row {
    display                 : grid;
    grid-template-columns   : 100px 2fr 1fr;
    padding                 : 10px 0px;
    width                   : 100%;
    position                : relative;
    
}

.container .content .stopwatch .stopwatch-laps .row-container .row.fastest span:nth-child(2)::before {
    height                  : auto;
    padding                 : 2px 10px;
    content                 : "Fastest";
    position                : absolute;
    display                 : flex;
    align-items             : center;
    border-radius           : 5px;
    right                   : 30px;
    top                     : 50%;
    translate               : 0 -50%;
    font-family             : var(--monospace);
    color                   : #e9f5f1;
    color                   : var(--stopwatchColor);
    font-size               : 14px;
    font-weight             : 500;
    background              : rgba(52, 65, 69, 0.5)
}

.container .content .stopwatch .stopwatch-laps .row-container .row.slowest span:nth-child(2)::before {
    width                   : auto;
    height                  : auto;
    padding                 : 2px 10px;
    content                 : "Slowest";
    position                : absolute;
    display                 : flex;
    align-items             : center;
    border-radius           : 5px;
    right                   : 30px;
    top                     : 50%;
    translate               : 0 -50%;
    font-family             : var(--monospace);
    color                   : #e9f5f1;
    color                   : #d71515;
    font-size               : 14px;
    font-weight             : 500;
    background              : rgba(52, 65, 69, 0.5)
}

.container .content .stopwatch .stopwatch-laps .row-container .row span {
    position                : relative;
}

.container .content .stopwatch .stopwatch-laps .row-container  {
    width                   : 100%;
    height                  : 198px;
    overflow-y              : scroll;
    margin                  : 5px 0;
}

.container .content .stopwatch .stopwatch-laps .labels span, 
.container .content .stopwatch .stopwatch-laps .row-container .row span{
    text-align              : left;
    font-size               : 14px;
    color                   : var(--textColor);
    font-family             : 'Space Mono';
}

.container .content .stopwatch .stopwatch-laps .row-container::-webkit-scrollbar {
    display                 : none;
}

.fixed-board-maximize .stopwatch-maximize {
    --resetLightness        : 46%;
    --stopwatchResetColor   : hsl(191, 49%, var(--resetLightness));
    width                   : 500px;
    aspect-ratio            : 1/1;
    background-color        : var(--stopwatchBodyColor);
    border-radius           : 10px;
    box-shadow              : var(--timer-border);
    padding                 : 20px;
    display                 : var(--display);
    flex-direction          : column;
    justify-content         : space-between;
}


/* Alarm */

.container .content .alarm {
    width                   : 100%;
    height                  : 100%;
}

.container .content .alarm .alarm-wrapper {
    display                 : grid;
    grid-template-columns   : repeat(2, 1fr);
    grid-template-rows      : max-content;
    padding                 : 20px;
    grid-gap                : 10px;
    width                   : calc(100% - 40px);
    height                  : 410px;
    border-radius           : 5px;
    margin                  : 0 auto;
    overflow                : auto;
    margin-top              : 20px;
}

.container .content .alarm .alarm-wrapper::-webkit-scrollbar {
    display                 : none
}

.container .content .alarm .alarm-wrapper .alarm-container {
    border-radius           : 10px;
    background-color        : var(--alarmTimeColor);
    aspect-ratio            : 1/1;
    width                   : 100%;
    align-self              : flex-start;
    position                : relative;
    display                 : grid;
    grid-template-rows      : repeat(3, auto);
    padding-bottom          : 10px;
    grid-gap                : 10px;
    transition              : .2s ease;
    border                  : 2px solid transparent;
    box-shadow              : 0 2px 2px rgba(0,0,0,0.5);
}

.container .content .alarm .alarm-wrapper .alarm-container:hover {
    translate               : 0 -3px;
    border-color            : var(--alarmBorder);
    box-shadow              : 0 4px 10px rgba(0,0,0,0.5);
}

.container .content .alarm .alarm-wrapper .alarm-container .toggle-container {
    width                   : 100%;
    padding                 : 5px 5px 0;
    display                 : flex;
    justify-content         : right;
    align-items             : center;
    position                : relative;
}

.container .content .alarm .alarm-wrapper .alarm-container .toggle-container button.delete {
    background-color        : transparent;
    border                  : 0;
    outline                 : none;
    color                   : var(--alarmDelete);
    position                : absolute;
    top                     : 5px;
    left                    : 5px;
}

.container .content .alarm .alarm-wrapper .alarm-container .toggle-container .toggle {
    position                : relative;
    background-color        : var(--alarmToggle);
    width                   : 50px;
    height                  : 24px;
    border-radius           : 30px;
    border                  : 2px solid var(--alarmBorder);
    cursor                  : pointer;
}

.container .content .alarm .alarm-wrapper .alarm-container .toggle::before {
    position                : absolute;
    content                 : "";
    width                   : 18px;
    height                  : 18px;
    border-radius           : 50%;
    background-color        : var(--alarmThumbColor);
    top                     : calc(50% - 9.5px);
    left                    : 2px;
}

.container .content .alarm .alarm-wrapper .alarm-container .time {
    width                   : 100%;
    padding                 : 5px 20px;
}

.container .content .alarm .alarm-wrapper .alarm-container .time .alarm-time {
    width                   : 100%;
    display                 : flex;
    align-items             : baseline;
    line-height             : 1;
}

.container .content .alarm .alarm-wrapper .alarm-container .time .alarm-time span#alarm-time {
    font-size               : 50px;
    color                   : var(--alarmTextColor);
}

.container .content .alarm .alarm-wrapper .alarm-container .time .alarm-time span#time-format {
    color                   : var(--alarmTextColor);
}

.container .content .alarm .alarm-wrapper .alarm-container .time .remaining {
    width                   : 100%;
    display                 : flex;
    font-size               : 12px;
    align-items             : center;
    gap                     : 20px;
    color                   : var(--alarmTextColor);
}

.container .content .alarm .alarm-wrapper .alarm-container .alarm-schedule {
    display                 : flex;
    gap                     : 5px;
    align-items             : center;
    justify-content         : center;
    flex-wrap               : wrap;
}

.container .content .alarm .alarm-wrapper .alarm-container .alarm-schedule div {
    width                   : 23px;
    height                  : 23px;
    border-radius           : 50%;
    background-color        : var(--alarmTextColor);
    font-size               : 8px;
    display                 : grid;
    place-items             : center;
    font-weight             : 600;
    color                   : var(--bodyColor);
    cursor                  : pointer;
}

.container .content .alarm .button-container {
    display                 : flex;
    align-items             : flex-end;
    padding                 : 10px 20px;
    justify-content         : right;
}

.container .content .alarm .button-container .add-alarm {
    width                   : fit-content;
    height                  : auto;
    padding                 : 5px;
    border-radius           : 30px;
    border                  : 2px solid var(--alarmWrapperBorder);
    background-color        : var(--alarmWrapper);
    display                 : flex;
    gap                     : 20px;
    place-self              : center;
}

.container .content .alarm .button-container button {
    width                   : 40px;
    height                  : 40px;
    padding                 : 5px;
    border-radius           : 50%;
    border                  : 0;
    outline                 : none;
    display                 : flex;
    align-items             : center;
    justify-content         : center;
    cursor                  : pointer;
}

.container .content .alarm .button-container button#add-alarm {
    background              : var(--alarmColor)
}

.container .content .alarm .button-container button#edit-alarm {
    background              : var(--resetColor);
} 

.container .content .alarm .button-container button span {
    font-size               : 18px;
    color                   : var(--textColor);
}

.alarm-chosen {
    --alarmTextColor        : var(--alarmColor)!important;
    color                   : var(--textColor)!important;
}

.alarm-active {
    --alarmTextColor        : hsl(240, 0%, 85%)!important;
}

/* World Map */


/* Animations Here */
@keyframes rotate {
    0% {
        --rotate            : 0deg;
    }
    100% {
        --rotate            : 360deg;
    }
}