:root {
    --clock-left-margin: 17%;
}

* {
    margin:0;
    padding:0;
}

body {
    width:100vw;
    height:56.25vw;
    overflow-x: hidden;
    position:relative;

    font-family: 'Lobster', cursive;
    color:white;
}

.background {
    position:absolute;
    z-index:-100;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

.greeting {
    position:absolute;
    left:var(--clock-left-margin);
    top:9%;
    font-size: 3vw;
}

.clock {
    position:absolute;
    z-index:-2;
    left:var(--clock-left-margin);
    top:11%;
    font-family: 'Monoton', cursive;
    font-size: 11vw;
}

.grass-layer {
    position:absolute;
    z-index:-1;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

.quote {
    position:absolute;
    bottom:1%;
    right:37%;
    color:black;
    font-size:1.2vw;
}

.todo-form {
    position:absolute;
    left:31%;
    top:37%;

    display:flex;
    flex-direction: column;
}

input {
    width: 30vw;
    border:none;
    border-bottom: 2px solid white;
    padding-bottom: 5px;
    background: none;
    font-size: 2vw;
    color: white;
}

input:focus {
    outline-style:none;
}

input::placeholder {
    font-family: 'Lobster', cursive;
    color: white;
}

.todo-list {
    position:absolute;
    left: 73.5%;
    top: 33%;


    font-size: 1.4vw;
    list-style-type: none;
}

.todo-list li button {
    margin-right:0.5vw;
    width: 1.3vw;
    height: 1.3vw;
    background: none;
    border: 2px solid white;
}

.weather-wrapper {
    position:absolute;
    top:1%;
    left:1%;
    font-size:1.2vw;
}

.music-wrapper {
    position:absolute;
    display:flex;
    align-items: top;
    top:1%;
    right:1%;
}

.music-name {
    margin-right: 0.5vw;
    font-size:1.2vw;
}

.music {
    border:none;
    background: none;
    color:white;
    font-size:2vw;
}

/* login splash */
.login-splash {
    position:absolute;
    display:flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    justify-content: center;
    align-items: center;
    left:0;
    top:0;
    z-index:100;

    background-color: rgba(0,0,0,0.8);

    transition:all 1s ease-in-out;
}

.login-splash h2 {
    font-size: 5vw;
    margin-bottom: 5vw;
}


/* always bottom */
.hidden {
    visibility: hidden;
    opacity: 0;
}