@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&family=Nunito:wght@600&display=swap');

:root{
    --bg: #F3F4F7;
    --txt: #010B14;
    --darkbg: #251d29;
    --darkt: #ffd1f7;
    --lightbg: #fff;
    --lightt: #d43370;

    --toggleWidth: 30em;
    --toggleHeight: 16em;
    --toggleBtnRadius: 10em;
    
    --bgColor--night: #423966;
    --mooncolor: #d9fbff;
    --bgColor--day: #9ee3fb;

}

html[data-theme='light'] {
    --bg: #F3F4F7;
    --txt: #010B14;
}

html[data-theme='dark'] {
    --bg: #010B14;
    --txt: #F3F4F7;
}

body {
    font-family: Arial;
    color: var(--txt);
    background-color: var(--bg);
    transition: all ease-in-out 0.3s;
    overflow: hidden;
}

nav {
    width: 100vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#full-logo {
    width: 10rem;
    position: absolute;
    top: 1rem;
    left: 2rem;
}

footer {
    position: fixed;
    left: 50vw;
    bottom: 0vh;
    transform: translate(-50%, 0%);
    display: grid;
    place-items: center;
}

.clock {
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    font-family: 'Nunito', sans-serif;
}
.clock h1 {
    margin: 1rem;
    font-size: 6em;
    text-align: center;
}

.clock h2 {
    margin: 1rem;
    padding: 0;
}

.tdnn {
    cursor: pointer;
    /*change size of toggle with font-size*/
    font-size: 13%;
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    height: var(--toggleHeight);
    width: var(--toggleWidth);
    border-radius: var(--toggleHeight);
    transition: all 500ms ease-in-out;
    background: var(--bgColor--night);
}
.day {
    background: #ffbf71;
}
.moon {
    position: absolute;
    display: block;
    border-radius: 50%;
    transition: all 400ms ease-in-out;
    top: 3em;
    left: 3em;
    transform: rotate(-75deg);
    width: var(--toggleBtnRadius);
    height: var(--toggleBtnRadius);
    background: var(--bgColor--night);
    box-shadow: 3em 2.5em 0 0em var(--mooncolor) inset,
    rgba(255, 255, 255, 0.1) 0em -7em 0 -4.5em,
    rgba(255, 255, 255, 0.1) 3em 7em 0 -4.5em,
    rgba(255, 255, 255, 0.1) 2em 13em 0 -4em,
    rgba(255, 255, 255, 0.1) 6em 2em 0 -4.1em,
    rgba(255, 255, 255, 0.1) 8em 8em 0 -4.5em,
    rgba(255, 255, 255, 0.1) 6em 13em 0 -4.5em,
    rgba(255, 255, 255, 0.1) -4em 7em 0 -4.5em,
    rgba(255, 255, 255, 0.1) -1em 10em 0 -4.5em;
}
.sun {
    top: 4.5em;
    left: 18em;
    transform: rotate(0deg);
    width: 7em;
    height: 7em;
    background: #fff;
    box-shadow: 3em 3em 0 5em #fff inset, 0 -5em 0 -2.7em #fff,
    3.5em -3.5em 0 -3em #fff, 5em 0 0 -2.7em #fff, 3.5em 3.5em 0 -3em #fff,
    0 5em 0 -2.7em #fff, -3.5em 3.5em 0 -3em #fff, -5em 0 0 -2.7em #fff,
    -3.5em -3.5em 0 -3em #fff;
}