*{
    font-family:'League Spartan','Arial';
}

body[data-accent-color="red"]{
    --accent-color:rgb(242, 18, 27);
    --border-accent-color:rgb(131, 5, 9);
}

body[data-accent-color="orange"]{
    --accent-color:rgb(245, 140, 36);
    --border-accent-color:rgb(194, 110, 28);
}

body[data-accent-color="yellow"]{
    --accent-color:rgb(250, 214, 46);
    --border-accent-color:rgb(212, 164, 49);
}

body[data-accent-color="green"]{
    --accent-color:rgb(71, 221, 41);
    --border-accent-color:rgb(40, 127, 16);
}

body[data-accent-color="blue"]{
    --accent-color:rgb(24, 24, 202);
    --border-accent-color:rgb(10, 11, 126);
}

body[data-accent-color="purple"]{
    --accent-color:rgb(107, 93, 202);
    --border-accent-color:rgb(99, 55, 151);
}

body{
    margin:0;
    padding:0;
    --context-color:rgb(145,145,145);
    --border-context-color:rgb(110,110,110);
}

body[data-theme="dark"]{
    background-color: #222;
}

body[data-theme="light"]{
    background-color: #ddd;
}

body[data-animations="anims-ds"] *,
html:has(body[data-animations="anims-sys"]) style{
    transition: all 0s !important;
    animation-name: unset !important;
    animation-duration: 0s !important;
}

.navbar{
    background-color: var(--context-color);
    border: 5px solid var(--border-context-color);
    display:flex;
    gap:0.5rem;
    justify-content: center;
    padding:0.5rem;
    margin:0.5rem 0.5rem;
    border-radius: 0.6rem;
    overflow-x: auto;
    overflow-y:hidden;
    position: fixed;
    top:0;
    left:0;
    right:0;
    transition: top 0.2s;
}

::-webkit-scrollbar{
    width: 8px;
    height: 8px;
    background-color: #aaa;
    border-radius: 100vw;
}

::-webkit-scrollbar-thumb {
    background-color: #666;
    border-radius: 100vw;
}

.navbar button{
    margin:0.8rem 0.4rem;
    background-color: var(--accent-color);
    padding:0.2rem 0.5rem;
    padding-top: 0.35rem;
    color:white;
    border-radius: 0.5rem;
    border:4px solid var(--border-accent-color);
    font-size:1.5rem;
    white-space: nowrap;
    cursor:pointer;
    font-weight: bold;
    user-select: none;
    -webkit-user-select: none;
    line-height: 22.4px;
}

.navbar button.active{
    text-decoration:underline;
    text-decoration-thickness: 2px;
}

#clickcounter,#stopwatch,#timer,#chessclock,#worldclock,#randomnumber,#settings{
    position:fixed;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-45%);
    height: calc(100% - 10rem);
    width: 95%;
}

#clickcounter h1, #stopwatch h1,#randomnumber h1{
    color:var(--accent-color);
    font-size:5rem;
    position:fixed;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-200%);
    user-select: none;
    -webkit-user-select: none;
    line-height: 73.6px;
}

#clickcounter div{
    width:fit-content;
    height: fit-content;
    width:-moz-fit-content;
    height:-moz-fit-content;
    white-space: nowrap;
    position: fixed;
    bottom:5%;
    right:0;
    text-align: center;
}

#clickcounter button,#stopwatch button,#timer button#timeradd, #randomnumber button{
    all:unset;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    background-color:var(--accent-color);
    font-weight: bold;
    color:white;
    padding:0.5rem  1rem;
    border:4px solid var(--border-accent-color);
    cursor: pointer;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    line-height: 22.4px;
}

#clickcounter button:focus-visible,#stopwatch button:focus-visible,#timer button:focus-visible, #timer button#timeradd:focus-visible, #randomnumber button:focus-visible, #chessclock button:focus-visible{
    outline: 1px auto;
    outline: -webkit-focus-ring-color auto 1px;
}

#clickcounter button:not(:last-child){
    padding:0.2rem 0.5rem;
    width:35%;
    font-size: 3rem;
    line-height: 44px;
}

#clickcounter button:last-child{
    width:fit-content;
    height:fit-content;
    width:-moz-fit-content;
    height:-moz-fit-content;
    margin-top: 0.2rem;
}


#stopwatch div{
    width:100%;
    position: fixed;
    bottom:5%;
    display: flex;
    justify-content: center;
    gap:50%;

}

#timer h1{
    color:white;
    text-align: center;
    border: 4px solid var(--border-context-color);
    padding-top:0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0.5rem;
    margin:0.25rem 0;
    margin-bottom:1.5rem;
    user-select: none;
    -webkit-user-select: none;
    line-height: 29.6px;
}

#timer #timercontainer{
    background-color: var(--context-color);
    border:4px solid var(--border-context-color);
    border-radius: 0.5rem;
    padding-left:0.5rem;
    padding-right:0.5rem;
    position: fixed;
    left:50%;
    top:50%;
    transform: translateX(-50%) translateY(-50%);
    width:50%;
    max-height:90%;
    overflow-y:auto;
    transition:0.3s height;
}

#timercontainer .time{
    margin:0.2rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:0.5rem;
    flex-wrap: nowrap;
    padding:0.8rem 1rem;
}

#timercontainer .time:not(:last-child){
    border-bottom: 4px solid var(--border-context-color);
}

#timercontainer .time[data-status="counting"],#timercontainer .time[data-status="paused"]{
    justify-content: space-between;
}

#timercontainer .time .btncontainer{
    display:flex;
    gap:0.25rem;
    user-select: none;
    -webkit-user-select: none;
}

#timercontainer .time .btncontainer button{
    margin-left:0;
}

#timercontainer input, #chessclock input,#randomnumber input{
    padding:0.5rem 0.5rem;
    outline: none;
    border:none;
    border-radius: 0.3rem;
    font-weight: bold;
    font-size:1.2rem;
    color:var(--accent-color);
    background-color: #444;
    caret-color: var(--context-color);
    margin-right:0.5rem;
    width:41.2px;
    height:8px;
    transition: opacity 0.3s,border 0.1s;
    color-scheme: dark;
    border-bottom:5px solid transparent;
    border-top:5px solid transparent;
}

#timercontainer input:focus,#chessclock input:focus,#randomnumber input:focus{
    border-bottom: 5px solid var(--accent-color);
    transition:border 0.1s;
}

#timercontainer label, #chessclock label,#randomnumber label{
    font-weight: bold;
    font-size:1.4rem;
    color:var(--accent-color);
    user-select: none;
    -webkit-user-select:none;
    transition: opacity 0.3s;
    line-height: 20.8px;
}

#timercontainer h1.timerval{
    border:none;
    margin:0;
    padding:0;
    color:var(--accent-color);
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.3s;
}

#timer button, #chessclock .chesssettings button{
    all:unset;
    cursor:pointer;
    background-color:var(--accent-color);
    border:4px solid var(--border-accent-color);
    border-radius:0.5rem;
    padding:0.45rem 0.3rem;
    color:white;
    font-weight:bold;
    margin-left:1rem;
    white-space: nowrap;
    line-height: 14.4px;
}

#timer button#timeradd{
    position:fixed;
    bottom:0;
    right:0;
}

#randomnumber{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#randomnumber h1{
    overflow: -moz-hidden-unscrollable;
    overflow: clip;
    height:73.6px;
    width:90%;
    text-align:center;
}

#randomnumber h1:before{
    content:attr(data-random);
    position:absolute;
    top:-100%;
    left:0;
    right:0;
    /*animation-name: movedown-before;
    animation-delay: 2500ms;*/
    animation-duration: 200ms;
    animation-fill-mode: forwards;
}

#randomnumber h1:after{
    content:attr(data-current);
    position: absolute;
    top:0;
    left:0;
    right:0;
    /*animation-name: movedown-after;
    animation-delay: 2500ms;*/
    animation-duration: 200ms;
    animation-fill-mode: forwards;
}

#randomnumber div{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: absolute;
    bottom:5%;
    width:100%;
}

@keyframes movedown-before {
    0%{top:-100%}
    100%{top:0%;}
}

@keyframes movedown-after{
    0%{top:0;}
    100%{top:100%}
}

#worldclock{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:1rem;
}

#worldclock #localtimecontainer h1{
    color:var(--accent-color);
    margin:0;
    font-size:4rem;
}

#worldclock #localtimecontainer p{
    color:var(--accent-color);
    font-weight: bold;
    font-size:2rem;
    margin:0;
}

#worldclock p{
    margin:0;
}

#worldclock #alttimecontainer{
    padding:0.6rem;
    background-color:var(--context-color);
    border:4px solid var(--border-context-color);
    border-radius:0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width:95%;
}

#worldclock #altleft, #worldclock #altright{
    width:45%;
}

#worldclock .wctime{
    border:4px solid var(--border-context-color);
    border-radius:0.5rem;
    padding:0.5rem;
    margin:0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:0.8rem;
}

#worldclock input{
    color-scheme: dark;
    border-radius: 0.2rem;
    outline: none;
    border:none;
    width:150px;
    height:25px;
}

#worldclock input::-webkit-calendar-picker-indicator {
	color: #999;
	height: 8px;
	position: relative;
	width: 8px;
	z-index: 0;
    transition:opacity 0.2s;
}

#worldclock input::placeholder{
    opacity: 0;
    transition:opacity 0.2s;
}

#worldclock input:is(:focus,:hover)[placeholder]::placeholder{
    opacity: 1;
    transition:opacity 0.2s;
}

#worldclock datalist{
    width:120px;
}

.wctime p{
    color:var(--accent-color);
    font-weight: bold;
    font-size:1.5rem;
}

.wctime button{
    background-color:var(--accent-color);
    border:4px solid var(--border-accent-color);
    color:white;
    font-weight: bold;
    border-radius:0.5rem;
    padding:0.2rem 0.5rem;
    font-size:1.25rem;
    cursor:pointer;
}

#chessclock{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width:100%;
    transition:transform 0.2s, height 0.4s;
}

#chessclock .chesssettings p{
    color:var(--accent-color);
    font-weight: bold;
    font-size:1.3rem;
    margin:0;
    user-select: none;
    -webkit-user-select: none;
}

#chessclock .chesssettings button:focus-visible{
    outline: 1px auto;
    outline: -webkit-focus-ring-color auto 1px;
}

#chessclock div:has(h1.chesscounter){
    width:100%;
    height:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition:background-color 0.25s;
    border-radius: 0.5rem;
}

#chessclock :is(#chesscounter1container,#chesscounter2container) button{
    all:unset;
    border-radius: 0.5rem;
    font-size: 1.5rem;
    background-color:var(--accent-color);
    font-weight: bold;
    color:white;
    padding:0.5rem  1rem;
    border:4px solid var(--border-accent-color);
    cursor: pointer;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    line-height: 22.4px;
}

#chessclock :is(#chesscounter1container,#chesscounter2container) button:focus-visible{
    outline: 1px auto;
    outline: -webkit-focus-ring-color auto 1px;
}

#chessclock #chesscounter1container button{
    position:absolute;
    right:1%;
    bottom:5%;
}
#chessclock #chesscounter2container button{
    position:absolute;
    right:1%;
    top:5%;
}

#chessclock h2.chessfont{
    font-family:'Chess';
    font-size:4rem;
    margin:0;
    background-color:transparent;
    -webkit-text-stroke:2px var(--border-context-color);
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.3s;
}

#chessclock h2.chessfont[data-side="whites"]{
    color:lightgrey;
}

#chessclock h2.chessfont[data-side="blacks"]{
    color:#202020
}

#chessclock h2.chessfont[data-side="none"]{
    visibility: hidden;
}

#chessclock #chesscounter1container h2{
    position: absolute;
    left:1%;
    bottom:5%;
}

#chessclock #chesscounter2container h2{
    position:absolute;
    left:1%;
    top:5%;
}

#chessclock h1.chesscounter{
    border:none;
    margin:0;
    padding:0;
    color:var(--accent-color);
    user-select: none;
    -webkit-user-select: none;
    font-size:5rem;
    width:100%;
    text-align:center;
    transition: transform 0.3s;
}

#chessclock[data-status="started"]{
    height:105%;
    transform: translateX(-50%) translateY(-50%);
    transition:transform 0.2s, height 0.4s;
}

#chessclock .chesssettings{
    background-color: var(--context-color);
    width:90%;
    display:flex;
    align-items: center;
    justify-content: center;
    padding:0.8rem;
    border:4px solid var(--border-context-color);
    border-radius:0.5rem;
    overflow-x: auto;
    overflow-y:hidden;
    user-select: none;
    -webkit-user-select: none;
}

#chessclock label{
    margin-right:0.2rem;
    user-select: none;
    -webkit-user-select: none;
}

#settings{
    padding-left:2.5rem;
    width:90%
}

#settings h1.section-title{
    color:white;
    font-size: 3rem;
    margin-left: -1.5rem;
    margin-bottom:1rem;
}

[data-theme="light"] #settings h1.section-title{
    color:var(--border-accent-color);
}

#settings label:first-child{
    color:white;
    font-weight:bold;
    font-size:1.5rem;
    margin-right:1rem;
}

[data-theme="light"] #settings label:first-child{
    color:var(--border-accent-color);
}

#settings label:not(:first-child){
    color:white;
}

[data-theme="light"] #settings label:not(:first-child){
    color:var(--border-accent-color);
}


#settings select{
    color:var(--accent-color);
    font-weight:bold;
    font-size:1rem;
    background-color: #444;
    border-radius: 0.3rem;
    padding:0.5rem 0.5rem;
    outline: none;
    border:none;
}

[data-theme="light"] #settings select{
    background-color: #aaa;
}


#settings .section-input{
    margin-bottom:0.8rem;
    display: flex;
    align-items: center;
}

#settings input[type="radio"]{
    margin:0 0.3rem 0 1rem;
    accent-color:var(--accent-color);
}

/*ANIMATIONS*/

@keyframes opennav {
    0%{top:-5.9rem;}
    100%{top:0;}
}

@keyframes closenav {
    0%{top:0;}
    100%{top:-5.9rem;}
}

/*MEDIA*/

@media screen and (max-width:1230px){
    #timer #timercontainer{
        width:75%;
    }
}

@media  screen and (max-width:820px) {
    .navbar{
        justify-content: flex-start;
    }
    #timer #timercontainer{
        width:85%;
    }
}

@media screen and (max-width:725px){
    #timer #timercontainer{
        width:95%;
    }
    #timercontainer label{
        font-weight: bold;
        font-size:1.2rem;
        color:var(--accent-color);
    }
    #timercontainer input{
        margin:0;
    }
    #timercontainer button{
        margin:0;
    }
}

@media screen and (max-width:780px){
    #worldclock #alttimecontainer{
        flex-direction: column;
        gap:0;
    }
    #worldclock #altleft, #worldclock #altright{
        width:100%;
    }
}

@media screen and (max-width:545px){
    #timercontainer .time{
        justify-content: flex-start;
        padding-left:0;
        padding-right:0;
        margin-left:0;
        margin-right:0;
    }
    #timercontainer .time[status="counting"]{
        justify-content: space-between;
    }
    #timercontainer .time[status="counting"] h1{
        width:fit-content;
        width:-moz-fit-content;
    }
    #timer h1{
        width:100%;
    }
}

@media (prefers-color-scheme: dark){
    body[data-theme="sys"]{
        background-color: #222;
    }
}

@media (prefers-color-scheme: light){
    body[data-theme="sys"]{
        background-color: #ddd;
    }

    [data-theme="sys"] #settings h1.section-title{
        color:var(--border-accent-color);
    }

    [data-theme="sys"] #settings label:first-child{
        color:var(--border-accent-color);
    }

    [data-theme="sys"] #settings label:not(:first-child){
        color:var(--border-accent-color);
    }

    [data-theme="sys"] #settings select{
        background-color: #aaa;
    }
}

@media (prefers-reduced-motion){
    body[data-animations="anims-sys"] *,
    html:has(body[data-animations="anims-sys"]) style{
        transition: all 0s !important;
        animation-name: unset !important;
        animation-duration: 0s !important;
    }
}