:root {
    --primary-font-size: 5.5em;
    --secondary-font-size: 1em;
}

* {
    box-sizing: border-box;
}

html,
body {
    background: linear-gradient(to bottom, rgb(255 0 0 / 15%), rgb(0, 128, 0), rgba(0, 0, 255, 0.7));

    margin: 0;
    width: 100%;
    height: 100%;
    user-select: none;
}

/* Header start */

header {
    width: 450px;
    height: 28%;
    position: absolute;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    font-size: 1.4em;
    text-align: center;
    top: 2%;
    left: 50%;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

header a {
    width: 130px;
    color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    text-align: center;
    padding: 15px;
    margin: 0px 10px;
    text-decoration: none;
    border-radius: 10px;
    cursor: pointer;
    float: left;
}

header a:hover {
    background-color: rgb(255, 130, 130);
    color: black;
}

header a.active {
    background-color: rgb(255, 90, 90);
    color: white;
}

/* Header End */

/* Container Start */

.container {
    width: 100%;
    height: 70%;
    position: absolute;
    bottom: 0;
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
}

/* Main Start */

.main {
    width: 500px;
    height: 421.2px;
    position: absolute;
    margin: 0;
    overflow: hidden;
    top: 0;
    left: 50%;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

/* Main End */

/* Format Mode Button Start */

.formatMode {
    width: 280px;
    max-height: 22px;
    position: absolute;
    top: 0;
    left: 50%;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.formatMode input {
    float: left;
    cursor: pointer;
}

.formatMode label {
    float: right;
    min-width: 200px;
    max-height: 22px;
    text-align: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    cursor: pointer;
}

input[type="checkbox"] {
    width: 40px;
    height: 20px;
    margin: 0;
    position: relative;
    -webkit-appearance: none;
    background-color: rgb(135, 194, 176);
    border-radius: 20px;
    outline: none;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    transition: 0.2s;
}

input:checked[type="checkbox"] {
    background-color: #ff8282;
    box-shadow: inset 0 0 5px rgba(78, 78, 78, 0.2);
}

input[type="checkbox"]::before {
    width: 20px;
    height: 20px;
    content: "";
    position: absolute;
    border-radius: 20px;
    top: 0;
    left: 0;
    background-color: rgb(80, 176, 255);
    transform: scale(1.1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: 0.5s;
}

input:checked[type="checkbox"]::before {
    left: 20px;
}

/* Format Mode Button End */

/* Clock Start */

#clock {
    width: 500px;
    height: 391.2px;
    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.7), 0 0 10px rgba(157, 255, 255, 0.3), 0 0 5px rgba(96, 226, 226, 0.6);
    color: rgb(157, 255, 255);
    background-color: rgb(47 21 21 / 0%);
    font-family: "Orbitron", sans-serif;
    margin: 0;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    left: 50%;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

#meridiem {
    width: 55px;
    height: 110.4px;
    font-size: 1em;
    line-height: 50px;
    text-align: right;
    font-weight: bold;
    float: left;
}

#timeLabel {
    width: 55px;
    height: 110.4px;
    font-size: 1em;
    line-height: 50px;
    text-align: left;
    font-weight: 400;
    float: right;
}

.clockTime div,
.stopwatchTime div {
    float: left;
}

.clockTime {
    width: 390px;
    height: 110.4px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    float: left;
}

.colon {
    width: 30px;
    height: 110.4px;
    margin: 0;
    padding: 0;
    font-size: var(--primary-font-size);
    text-align: center;
}

#clockHour,
#clockMinute,
#clockSecond,
#stopwatchHour,
#stopwatchMinute,
#stopwatchSecond {
    width: 110px;
    height: 110.4px;
    font-size: var(--primary-font-size);
    text-align: center;
    float: left;
}

#stopwatchMillisecond {
    width: 110px;
    height: 110.4px;
    line-height: 110.4px;
    font-size: 3em;
    text-align: center;
    float: left;
}

hr {
    width: 95%;
    height: 2px;
    border-width: 0;
    color: rgb(196, 255, 255);
    background-color: rgb(196, 255, 255);
    clear: both;
}

hr.first {
    margin-top: 110.4px;
}

#clockDateLabel,
#clockMonthLabel {
    width: 110px;
    height: 20px;
    font-size: var(--secondary-font-size);
}

#clockDayLabel {
    width: 220px;
    height: 20px;
    font-size: var(--secondary-font-size);
}

.clockDate,
.clockMonth,
.clockDay {
    width: 110px;
    height: 130.4px;
    text-align: center;
    float: left;
}

.slash,
.pipe {
    width: 30px;
    padding: 0;
    font-size: var(--primary-font-size);
    text-align: center;
    float: left;
}

.slash {
    height: 110.4px;
    margin-top: 20px;
}

.pipe {
    height: 130.4px;
}

#clockDate,
#clockMonth {
    width: 110px;
    height: 110.4px;
    font-size: var(--primary-font-size);
    text-align: center;
}

.clockDay {
    width: 220px;
    height: 130.4px;
}

#clockDayName {
    width: 220px;
    height: 110.4px;
    font-size: var(--primary-font-size);
    text-align: center;
}

hr.second {
    margin-top: 130.4px;
}

.clockYear {
    width: 500px;
    text-align: center;
}

#clockYearLabel {
    width: 500px;
    height: 20px;
    text-align: center;
    font-size: var(--secondary-font-size);
}

#clockYear {
    width: 500px;
    height: 110.4px;
    line-height: 110.4px;
    font-size: 7em;
    text-align: center;
}

/* Clock End */

/* Stopwatch/Timer Start */

#stopwatch,
#timer {
    width: 500px;
    height: 391.2px;
    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.7), 0 0 10px rgba(157, 255, 255, 0.3), 0 0 5px rgba(96, 226, 226, 0.6);
    color: rgb(157, 255, 255);
   
    font-family: "Orbitron", sans-serif;
    margin: 0;
    border-radius: 10px;
    position: absolute;
    bottom: 0;
    left: 50%;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    display: none;
}

.stopwatchTime {
    width: 500px;
    height: 110.4px;
    position: absolute;
    top: 0;
    left: 50%;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    float: left;
}

hr.third {
    margin-top: 110.4px;
    margin-bottom: 8px;
}

#lap {
    max-width: 500px;
    max-height: 160.4px;
    overflow: hidden;
    text-align: center;
}

.createdLap {
    color: rgb(244, 180, 26);
    text-shadow: 0px 0px 2px black, 0 0 6px rgba(244, 180, 26, 0.3), 0 0 3px rgba(204, 148, 16, 0.6);
    width: 150px;
    margin: 0.025px 8.33px;
    height: 20px;
    line-height: 20px;
    display: inline;
    float: left;
    overflow: hidden;
    text-align: center;
}

span.hash {
    width: 30px;
    text-align: center;
    float: left;
}

span.lapTime {
    width: 120px;
    text-align: center;
    float: right;
}

.lapWarning,
.timerWarning {
    width: 210px;
    height: 20.4px;
    line-height: 20.4px;
    text-shadow: 0px 0px 2px black, 0 0 6px rgb(255, 110, 64), 0 0 3px rgb(224, 72, 26);
    color: rgb(255, 110, 64);
    font-weight: bold;
    text-align: center;
    position: absolute;
    bottom: 10px;
    left: 50%;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.stopwatchButton,
.timerButton {
    width: 500px;
    height: 110.4px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.stopwatchButton button,
.timerButton button {
    width: 100px;
    height: 50px;
    margin: 15px 30px;
    padding: 0;
    background-color: rgb(255, 130, 130);
    border: 2px solid rgb(255, 130, 130);
    box-shadow: 0px 0px 3px rgb(0, 0, 0), 0 0 10px rgba(189, 71, 71, 0.3), 0 0 5px rgba(189, 71, 71, 0.6);
    border-radius: 35px;
    outline: none;
    text-align: center;
    cursor: pointer;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

.stopwatchButton button:hover,
.timerButton button:hover {
    background-color: rgb(255, 92, 92);
}

.stopwatchButton button:active,
.timerButton button:active {
    background-color: rgb(177, 47, 47);
    border-color: rgb(255, 92, 92);
}

.timerTime {
    width: 500px;
    height: 280.8px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 50%;
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.timerTime input {
    height: 2em;
    width: 2em;
    font-size: 2em;
    background-color: rgb(95, 158, 160);
    box-shadow: 0px 0px 15px rgb(71, 145, 148), 0 0 10px rgba(29, 132, 136, 0.3), 0 0 5px rgba(6, 92, 95, 0.6);
    text-align: center;
    overflow: hidden;
    border: none;
    border-radius: 32px;
    outline: none;
    margin: 20px;
}

.timerTime input::-webkit-outer-spin-button,
.timerTime input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.timerTime input[type=number] {
    -moz-appearance: textfield;
}

.timerContent {
    width: 100%;
    height: 176.8px;
    text-align: center;
}

.timerHourDisplay,
.timerMinuteDisplay,
.timerSecondDisplay {
    display: inline-block;
    height: 100%;
    width: 25%;
    line-height: 176.8px;
    font-size: 7em;
    margin: 0 20px;
    color: rgb(244, 180, 26);
    text-shadow: 0px 0px 2px black, 0 0 10px rgba(244, 180, 26, 0.3), 0 0 5px rgba(204, 148, 16, 0.6);
    font-weight: bold;
    text-align: center;
}

.timerHourDisplay {
    float: left;
}

.timerSecondDisplay {
    float: right;
}

.timerErrorDisplay {
    display: inline-block;
    position: absolute;
    height: auto;
    width: 100%;
    font-size: 2em;
    color: rgb(241, 165, 66);
    text-shadow: 0px 0px 2px black, 0 0 10px rgba(241, 165, 66, 0.3), 0 0 5px rgba(204, 132, 38, 0.6);
    font-weight: bold;
    text-align: center;
    bottom: 35%;
    left: 50%;
    -ms-transform: translate(-50%, 50%);
    transform: translate(-50%, 50%);
}

/* Stopwatch/Timer End */

/* Container End */

/*
 MEDIA QUERIES
*/

@media only screen and (max-width: 500px) {
    :root {
        --primary-font-size: 5em;
    }

    /* Header Start */
    header {
        width: 100%;
        height: 30%;
        top: 0;
    }

    header a {
        width: 100%;
        margin: 0;
        padding: 10px 0px;
        border-radius: 0;
        box-shadow: none;
        border-bottom: 4px solid rgb(255, 255, 255);
    }

    /* Header End */
    /* Main Start */
    .main {
        width: 400px;
        height: 336.96px;
    }

    /* Main Start */
    /* Clock Start */
    #clock {
        width: 400px;
        height: 312.96px;
    }

    #meridiem,
    #timeLabel {
        width: 44px;
        height: 88.32px;
    }

    .clockTime {
        width: 312px;
        height: 88.32px;
    }

    .colon {
        width: 24px;
        height: 88.32px;
    }

    #clockHour,
    #clockMinute,
    #clockSecond,
    #stopwatchHour,
    #stopwatchMinute,
    #stopwatchSecond {
        width: 88px;
        height: 88.32px;
    }

    #stopwatchMillisecond {
        width: 88px;
        height: 88.32px;
        line-height: 88.32px;
        font-size: 2.5em;
    }

    hr.first {
        margin-top: 88.32px;
        margin-bottom: 6px;
    }

    #clockDateLabel,
    #clockMonthLabel {
        width: 88px;
        height: 16px;
    }

    #clockDayLabel {
        width: 176px;
        height: 16px;
    }

    .clockDate,
    .clockMonth,
    .clockDay {
        width: 88px;
        height: 104.32px;
    }

    .slash,
    .pipe {
        width: 24px;
    }

    .slash {
        height: 88.32px;
        margin-top: 16px;
    }

    .pipe {
        height: 104.32px;
    }

    #clockDate,
    #clockMonth {
        width: 88px;
        height: 88.32px;
    }

    .clockDay {
        width: 176px;
        height: 104.32px;
    }

    #clockDayName {
        width: 176px;
        height: 88.32px;
        font-size: 4.7em;
    }

    hr.second {
        margin-top: 104.32px;
        margin-bottom: 6px;
    }

    .clockYear {
        width: 400px;
    }

    #clockYearLabel {
        width: 400px;
        height: 16px;
    }

    #clockYear {
        width: 400px;
        height: 88.32px;
        line-height: 88.32px;
        font-size: 5em;
    }

    /* Clock End */
    /* Stopwatch/Timer Start */
    #stopwatch,
    #timer {
        width: 400px;
        height: 312.96px;
    }

    .stopwatchTime {
        width: 400px;
        height: 88.32px;
    }

    hr.third {
        margin-top: 88.32px;
        margin-bottom: 6.4px;
    }

    #lap {
        max-width: 400px;
        max-height: 128.32px;
    }

    .createdLap {
        width: 120px;
        margin: 0.02px 6.664px;
        height: 16px;
        line-height: 16px;
    }

    span.hash {
        width: 24px;
    }

    span.lapTime {
        width: 96px;
    }

    .lapWarning,
    .timerWarning {
        font-size: 0.8em;
        width: 168px;
        height: 16.32px;
        line-height: 16.32px;
    }

    .stopwatchButton,
    .timerButton {
        width: 400px;
        height: 88.32px;
    }

    .stopwatchButton button,
    .timerButton button {
        width: 80px;
        height: 40px;
        margin: 12px 24px;
    }

    .timerTime {
        width: 400px;
        height: 224.64px;
    }

    .timerTime input {
        height: 2em;
        width: 2em;
        font-size: 2em;
        margin: 16px;
    }

    .timerContent {
        width: 100%;
        height: 141.44px;
        text-align: center;
    }

    .timerHourDisplay,
    .timerMinuteDisplay,
    .timerSecondDisplay {
        line-height: 141.44px;
        font-size: 5em;
        margin: 0 16px;
    }

    /* Stopwatch/Timer Start End */
}

@media only screen and (max-width: 400px) {
    :root {
        --primary-font-size: 3.9em;
        --secondary-font-size: 0.7em;
    }

    /* Header Start */
    header {
        width: 100%;
        top: 0;
    }

    header a {
        width: 100%;
        padding: 8px 0px;
        border-bottom: 3px solid rgb(255, 255, 255);
    }

    /* Header End */
    /* Main Start */
    .main {
        width: 300px;
        height: 269.568px;
    }

    /* Main Start */
    /* Clock Start */
    #clock {
        width: 300px;
        height: 250.368px;
    }

    #meridiem,
    #timeLabel {
        width: 25.2px;
        height: 70.656px;
        font-size: 0.6em;
    }

    .clockTime {
        width: 249.6px;
        height: 70.656px;
    }

    .colon {
        width: 19px;
        height: 70.656px;
    }

    #clockHour,
    #clockMinute,
    #clockSecond,
    #stopwatchHour,
    #stopwatchMinute,
    #stopwatchSecond {
        width: 70.4px;
        height: 70.656px;
    }

    #stopwatchMillisecond {
        width: 50.8px;
        height: 70.656px;
        line-height: 70.656px;
        font-size: 2em;
    }

    hr.first {
        margin-top: 70.656px;
        margin-bottom: 4.8px;
    }

    #clockDateLabel,
    #clockMonthLabel {
        width: 70.4px;
        height: 12.8px;
    }

    #clockDayLabel {
        width: 120px;
        height: 12.8px;
    }

    .clockDate,
    .clockMonth,
    .clockDay {
        width: 70.4px;
        height: 83.456px;
    }

    .slash,
    .pipe {
        width: 19.2px;
    }

    .slash {
        height: 70.656px;
        margin-top: 12.8px;
    }

    .pipe {
        height: 83.456px;
    }

    #clockDate,
    #clockMonth {
        width: 70.4px;
        height: 70.656px;
    }

    .clockDay {
        width: 120px;
        height: 83.456px;
    }

    #clockDayName {
        width: 120px;
        height: 70.656px;
        line-height: 70.656px;
        font-size: 3.2em;
    }

    hr.second {
        margin-top: 83.456px;
        margin-bottom: 4.8px;
    }

    .clockYear {
        width: 300px;
    }

    #clockYearLabel {
        width: 300px;
        height: 12.8px;
    }

    #clockYear {
        width: 300px;
        height: 70px;
        line-height: 70px;
        font-size: 4em;
    }

    /* Clock End */
    /* Stopwatch/Timer Start */
    #stopwatch,
    #timer {
        width: 300px;
        height: 250.368px;
    }

    .stopwatchTime {
        width: 300px;
        height: 70.656px;
    }

    hr.third {
        margin-top: 70.656px;
        margin-bottom: 5.12px;
    }

    #lap {
        max-width: 300px;
        max-height: 102.656px;
    }

    .createdLap {
        font-size: 0.8em;
        width: 96px;
        margin: 0.016px 2px;
        height: 12.8px;
        line-height: 12.8px;
    }

    span.hash {
        width: 19.2px;
    }

    span.lapTime {
        width: 76.8px;
    }

    .lapWarning,
    .timerWarning {
        font-size: 0.64em;
        width: 134.4px;
        height: 13.056px;
        line-height: 13.056px;
    }

    .stopwatchButton,
    .timerButton {
        width: 300px;
        height: 70.656px;
    }

    .stopwatchButton button,
    .timerButton button {
        width: 64px;
        height: 32px;
        margin: 9.6px 16px;
    }

    .timerTime {
        width: 300px;
        height: 179.712px;
    }

    .timerTime input {
        height: 1.9em;
        width: 1.9em;
        font-size: 1.9em;
        margin: 12.8px;
    }

    .timerContent {
        width: 100%;
        height: 94.35px;
        text-align: center;
    }

    .timerHourDisplay,
    .timerMinuteDisplay,
    .timerSecondDisplay {
        line-height: 94.35px;
        font-size: 4em;
        margin: 0 12px;
    }

    .timerErrorDisplay {
        font-size: 1.5em;
    }

    /* Stopwatch/Timer Start End */
}

@media only screen and (max-width: 300px) {
    :root {
        --primary-font-size: 3.7em;
        --secondary-font-size: 0.5em;
    }

    /* Header Start */
    header {
        width: 120%;
        top: 0;
    }

    header a {
        padding: 6px 0px;
    }

    /* Header End */
    /* Container Start */
    .container {
        left: 50%;
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }

    /* Main Start */
    .main {
        width: 280px;
        height: 251.5968px;
    }

    /* Main Start */
    /* Clock Start */
    #clock {
        width: 280px;
        height: 233.6768px;
    }

    #meridiem,
    #timeLabel {
        width: 23.52px;
        height: 65.9456px;
        font-size: 0.56em;
    }

    .clockTime {
        width: 232.96px;
        height: 65.9456px;
    }

    .colon {
        width: 17.733333333333px;
        height: 65.9456px;
    }

    #clockHour,
    #clockMinute,
    #clockSecond,
    #stopwatchHour,
    #stopwatchMinute,
    #stopwatchSecond {
        width: 65.706666666667px;
        height: 65.9456px;
    }

    #stopwatchMillisecond {
        width: 47.413333333333px;
        height: 65.9456px;
        line-height: 65.9456px;
        font-size: 1.8666666666667em;
    }

    hr.first {
        margin-top: 65.9456px;
        margin-bottom: 4.48px;
    }

    #clockDateLabel,
    #clockMonthLabel {
        width: 65.706666666667px;
        height: 11.946666666667px;
    }

    #clockDayLabel {
        width: 112px;
        height: 11.946666666667px;
    }

    .clockDate,
    .clockMonth,
    .clockDay {
        width: 65.706666666667px;
        height: 77.892266666667px;
    }

    .slash,
    .pipe {
        width: 17.92px;
    }

    .slash {
        height: 65.9456px;
        margin-top: 11.946666666667px;
    }

    .pipe {
        height: 77.892266666667px;
    }

    #clockDate,
    #clockMonth {
        width: 65.706666666667px;
        height: 65.9456px;
    }

    .clockDay {
        width: 112px;
        height: 77.892266666667px;
    }

    #clockDayName {
        width: 112px;
        height: 65.9456px;
        line-height: 65.9456px;
        font-size: 2.9866666666667em;
    }

    hr.second {
        margin-top: 77.892266666667px;
        margin-bottom: 4.48px;
    }

    .clockYear {
        width: 280px;
    }

    #clockYearLabel {
        width: 280px;
        height: 11.946666666667px;
    }

    #clockYear {
        width: 280px;
        height: 65.333333333333px;
        line-height: 65.333333333333px;
        font-size: 3.7333333333333em;
    }

    /* Clock End */
    /* Stopwatch/Timer Start */
    #stopwatch,
    #timer {
        width: 280px;
        height: 233.6768px;
    }

    .stopwatchTime {
        width: 280px;
        height: 65.9456px;
    }

    hr.third {
        margin-top: 65.9456px;
        margin-bottom: 4.7786666666667px;
    }

    #lap {
        max-width: 280px;
        max-height: 95.812266666667px;
    }

    .createdLap {
        font-size: 0.74666666666667em;
        width: 89.6px;
        margin: 0.014933333333333px 1.8666666666667px;
        height: 11.946666666667px;
        line-height: 11.946666666667px;
    }

    span.hash {
        width: 17.92px;
    }

    span.lapTime {
        width: 71.68px;
    }

    .lapWarning,
    .timerWarning {
        font-size: 0.59733333333333em;
        width: 125.44px;
        height: 12.1856px;
        line-height: 12.1856px;
    }

    .stopwatchButton,
    .timerButton {
        width: 280px;
        height: 65.9456px;
    }

    .stopwatchButton button,
    .timerButton button {
        width: 59.733333333333px;
        height: 29.866666666667px;
        margin: 8.96px 14.933333333333px;
    }

    .timerTime {
        width: 280px;
        height: 167.7312px;
    }

    .timerTime input {
        height: 1.7733333333333em;
        width: 1.7733333333333em;
        font-size: 1.7733333333333em;
        margin: 11.946666666667px;
    }

    .timerContent {
        width: 100%;
        height: 88.06px;
        text-align: center;
    }

    .timerHourDisplay,
    .timerMinuteDisplay,
    .timerSecondDisplay {
        line-height: 88.06px;
        font-size: 3.7333333333333em;
        margin: 0 11.2px;
    }

    .timerErrorDisplay {
        font-size: 1.4em;
    }

    /* Stopwatch/Timer Start End */
    /* Container End */
}

@media screen and (max-height: 500px) {
    header a {
        padding: 4px 0;
    }
}

@media screen and (max-height: 400px) {
    header a {
        padding: 2px 0;
        font-size: 0.8em;
    }
}

@media screen and (max-height: 300px) {
    header a {
        padding: 0 0;
        font-size: 0.6em;
    }
}