:root {
    --main-bg-color: white;
    --main-color: #404040;
    --pushed-bg-color: #d0d0d0;
    --span-color: #888;
}

.dark {
    --main-bg-color: #222;
    --main-color: #bbb;
    --pushed-bg-color: #444;
    --span-color: #777;
}



#main {
    font-family: 'pt-sans';

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100vh;

    background-color: var(--main-bg-color);
    color: var(--main-color);
}

#content {
    margin: auto;
    margin-top: 40vh;

    display: inline-block;
}

#content h1 {
    font-size: 34pt;
    margin-bottom: 0.5ex;
}

span {
    color: var(--span-color);
}

#content span {
    font-size: 14pt;
    padding-left: 0.75ex;
}

#panel {
    /*
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    
    */
    position: fixed;
    width: 7vh;
    height: 14vh;
    bottom: 0;
    right: 0;
}


.sun {
    font-size: 21pt;
}

.moon {
    font-size: 16pt;
}


/* https://www.schoolsw3.com/howto/howto_css_switch.php */


.switch > label {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 56px;
    margin: 2px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--pushed-bg-color);;
    -webkit-transition: .4s;
    transition: .4s;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    top: 4px;
    background-color: var(--main-bg-color);
    -webkit-transition: .2s;
    transition: .2s;
}
/*
.switch input:checked + .slider {
    background-color: #2196F3;
}

.switch input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}
*/
.switch input:checked + .slider:before {
    -webkit-transform: translateY(22px);
    -ms-transform: translateY(22px);
    transform: translateY(22px);
}

.switch .slider.round {
    border-radius: 26px;
}

.switch .slider.round:before {
    border-radius: 26px;
}