@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

* {
    position: relative;
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    height: 100vh;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: #1a1a1a;
}

.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

a:focus, button:focus, input:focus, textarea:focus {
    outline: none;
}

#main-content-area {
    min-height: 100%;
    padding: 0 0 4rem 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.main {
    grid-column: 1/-1;
    padding-bottom: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.alert-layer {
    grid-column: 1/-1;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100vh;
    margin-bottom: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    transition: margin 0.3s ease 0s;
    z-index: 2;
}

[class*="btn"] {
    cursor: pointer;
}

.btn-center {
    margin: 0 auto;
}

.alert-text {
    font-size: 3rem;
    margin-bottom: 2rem;
    text-align: center;
}

.layer-view {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    transition: background-color 0.3s ease 0s;
}

.layer-overlay {
    grid-column: 1/-1;
    padding: 0 1rem 1rem;
    position: absolute;
    bottom: 0;
    margin-bottom: -100vh;
    width: 100%;
    height: 100%;
    background-color: #a1c6f7;
    overflow-y: scroll;
    border-radius: 1rem 1rem 0 0;
    transition: margin-bottom 0.3s ease 0s;
    box-shadow: 
    0 11px 15px #00000033,
    0 24px 38px #00000024,
    0 9px 46px #0000001f;
}

#manage-timezones-layer {
    padding: 0;
}

.alarm-layer {
    height: max(21rem, 40%);
    padding: 0 1rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.layer-head {
    padding: 1rem;
    font-size: 1.25rem;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    background-color: #a1c6f7;
    border-radius: 1rem 1rem 0 0;
    z-index: 1;
    transition: box-shadow 0.1s ease 0s;
}

#timezone-layer-head {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid #00000066;
}

.layer-heading {
    font-weight: 500;
}

.layer-content {
    background-color: #a1c6f7;
}

#alarm-add-btn {
    filter: invert(36%) sepia(64%) saturate(7316%) hue-rotate(209deg) brightness(105%) contrast(84%);
}

.heading-btn {
    position: absolute;
    font-size: 1.25rem;
    font-weight: 500;
    color: #1470eb;
}

#clock-done-btn {
    padding: 0 1rem;
}

.svg-green {
    filter: invert(38%) sepia(98%) saturate(1130%) hue-rotate(89deg) brightness(108%) contrast(114%);
}

.svg-red {
    filter: invert(15%) sepia(79%) saturate(6396%) hue-rotate(360deg) brightness(96%) contrast(120%);
}

.btn-left {
    left: 0;
}

.btn-right {
    right: 0;
}

#alarm-add-btn, #alarm-edit-btn {
    margin: 0 1rem;
}

#remove-layer {
    border-bottom: 1px solid #00000066;
}

.layer-area {
    padding: 0.5rem 1rem;
}

.layer-entry, .save-entry {
    padding: 0.5rem 0;
    display: flex;
    justify-content: space-between;
}

.layer-entry {
    border-bottom: 1px solid #747c8b66;
}

.layer-entry:last-child {
    border: none;
}

.small-btn, .toggle-btn {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    display: flex;
    align-items: center;
    background-color: #ffffff;
}

.small-btn-icon, .alarm-toggle {
    width: 1.5rem;
    height: rem;
    position: absolute;
}

.head-layer {
    margin-top: 2rem;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
}

button {
    background-color: #ff000000;
    border: none;
    border-radius: 9999px;
}

#clock-edit-btn {
    position: absolute;
    right: 0;
    color: #1470eb;
}

.text-btn {
    padding: 0 1rem;
    height: 3rem;
    font-family: 'Roboto', sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 1.25px;
}

.icon-btn {
    padding: 0 0.75rem;
    height: 3rem;
}

#date-time {
    flex-direction: column;
    align-items: center;
}

.section {
    margin-top: 4rem;
    display: flex;
}

#current-time {
    font-size: 5rem;
    font-weight: 300;
    letter-spacing: -0.7px;
}

#current-date {
    font-size: 1.5rem;
    letter-spacing: 0.2px;
    color: #333333;
    margin-top: 0.75rem;
}

.my-saves {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0 0.5rem;
    flex-direction: column;
    background-color: #d0e2fb;
    border-radius: 1.75rem;
    box-shadow: 
    0 2px 1px #00000033,
    0 1px 1px #00000024,
    0 1px 3px #0000001f;
    cursor: default;
}

.save-entry {
    padding: 1rem 0;
    border-bottom: 1px solid #747c8b66;
}

.save-entry:last-child {
    border: none;
}

.entry-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.location {
    font-size: 1.5rem;
}

.entry-info {
    margin-top: 0.5rem;
}

.entry-time {
    font-size: 3rem;
    font-weight: 300;
}

.btn-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.toggle-btn {
    width: 3rem;
    height: 1.5rem;
}

.alarm-toggle {
    width: 3rem;
    height: 3rem;
}

.edit-time {
    padding: 1rem 0;
    font-size: 4.5rem;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

#repeat-alarm {
    padding: 1rem 0;
    display: flex;   
    justify-content: space-evenly;
    font-size: 1.25rem;
}

#repeat-alarm label {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    border-radius: 9999px;
    cursor: pointer;
}

input[type="checkbox"] {
    display: none;
}

.digit-input-area {
    width: 5.5rem;
    height: 5.5rem;
    background-color: #ffffff;
    border: 2px solid #747c8b66;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
}

.digit-input {
    width: 5.25rem;
    height: 5.25rem;
    padding: 2px 0 2px 2px;
    font-family: 'Roboto', sans-serif;
    font-size: 4.5rem;
    font-weight: 300;
    border: none;
    color: #1a1a1a;
    background-color: #ff000000;
    caret-color: #ff000000;
    cursor: pointer;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  display: none;
}

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

.digit-colon {
    font-size: 4.5rem;
}

.add-layer-label {
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #747c8b66;
    font-size: 1.125rem;
}

#alarm-name {
    width: 38ch;
    font-size: 1.125rem;
    border: none;
    text-align: right;
    background-color: #ff000000;
    caret-color: #1470eb;
    cursor: pointer;
}

#alarm-name::placeholder {
    color: #1a1a1a;
}

#edit-alarm-done, #alarm-alert-stop, #timer-alert-stop {
    background-color: #1470eb;
}

#stopwatch-main, #timer-main {
    padding-bottom: 0;
}

#stopwatch-body {
    grid-column: 1/-1;
    padding-bottom: 4rem;
    display: flex;
    flex-direction: column;
    margin-top: auto;
}

#timer-main {
    justify-content: center;
}

#stopwatch-time-area, #timer-time-area {
    display: flex;
    justify-content: center;
}

#stopwatch-time {
    width: 20rem;
    font-size: 3.75rem;
    font-weight: 300;
    text-align: center;
}

#stopwatch-lap-reset-btn, #timer-cancel-btn {
    background-color: #5c5c5c;
}

#stopwatch-state-btn, #timer-start-pause-btn {
    background-color: #00b800;
}

.solid-btn {
    color: #ffffff;
    border: 2px solid #747c8b66;
    box-shadow: 
    0 3px 1px #00000033,
    0 2px 2px #00000024,
    0 1px 5px #0000001f;
}

.click-effect:active {
    box-shadow: 
    0 5px 5px #00000033,
    0 8px 10px #00000024,
    0 3px 14px #0000001f;
}

.lap-area {
    margin-top: 1rem;
    padding: 1rem 1rem 0.5rem;
    height: 35vh;
    background-color: #a1c6f7;
    border-radius: 2rem 2rem 0 0;
    overflow-y: scroll;
}

.lap-entry {
    padding: 0 0 0.5rem 0;
    margin-top: 0.5rem;
}

.lap-time {
    width: 6rem;
}

#timer-body {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#add-timer-time {
    width: 100%;
    position: absolute;
    z-index: 1;
}

.input-guide {
    font-size: 1.25rem;
    font-weight: 500;
    position: absolute;
    top: 0;
    margin-top: -1.5rem;
}

#timer-time {
    font-size: 4.5rem;
    font-weight: 300;
}

#ring-time-area {
    display: flex;
    justify-content: center;
}

#ring-time-icon {
    margin: 0 0.5rem;
}

#ring-time {
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
}

#bottom-nav {
    width: 100%;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #747c8b66;
    background-color: #ffffff;
    z-index: 9;
    box-shadow: 
    0 5px 5px #00000033,
    0 8px 10px #00000024,
    0 3px 14px #0000001f;
}

.icon-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.icon {
    width: 1.5rem;
    height: 1.5rem;
}

#bottom-nav .icon {
    filter: invert(18%) sepia(2%) saturate(0%) hue-rotate(301deg) brightness(96%) contrast(91%);
}

#bottom-nav .icon-text {
    margin-top: 0.25rem;
    color: #333333;
    font-size: 1.125rem;
    font-weight: 500;
}

#world-clock .icon {
    filter: invert(36%) sepia(64%) saturate(7316%) hue-rotate(209deg) brightness(105%) contrast(84%);
}

#world-clock .icon-text {
    color: #1470eb;
}

@media screen and (min-width: 640px) {
    *::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
    }
    
    * {
        scrollbar-width: thin;
        scrollbar-color: #747c8b66;
    }
    
    *::-webkit-scrollbar-thumb {
        background: #00000080;
        border-radius: 9999px;
        width: 320px;
        height: 320px;
    }
    
    *::-webkit-scrollbar-track {
        background:  #ffffff00;
        border-radius: 9999px;
    }

    #main-content-area, .layer-view {
        grid-template-columns: repeat(8, 1fr);
    }

    .main, .layer-overlay, #stopwatch-body, #timer-body {
        grid-column: 2/-2;
    }

    .my-saves {
        padding: 0 1rem;
    }
}

@media screen and (min-width: 960px) {
    #main-content-area, .layer-view {
        grid-template-columns: repeat(12, 1fr);
    }

    .main, .layer-overlay, #stopwatch-body, #timer-body {
        grid-column: 3/-3;
    }
}

@media screen and (min-width: 1280px) {
    #main-content-area, .layer-view {
        grid-template-columns: repeat(16, 1fr);
    }

    .main, .layer-overlay, #stopwatch-body, #timer-body {
        grid-column: 4/-4;
    }
}

@media screen and (min-width: 1600px) {
    #main-content-area, .layer-view {
        grid-template-columns: repeat(20, 1fr);
    }

    .main, .layer-overlay, #stopwatch-body, #timer-body {
        grid-column: 5/-5;
    }
}