body {
    font-family: "Helvetica Neue", Arial, "Liberation Sans", Roboto, "Noto Sans", sans-serif;
    margin: 0;
    padding: 0;
    width: auto;
    text-align: center;
    font-size: 2vh;
    background-color: white;
    color: black;
}

a, a:visited, a:hover, a:active {
    color: inherit;
}
#page-wrapper {
    display: grid;
    height: 100%;
    grid-template-rows: 10vh 5fr 10vh;
    min-height: 100%;
}

header, main, footer {
    padding: 2vh;
}

header {
}
header h1 {
    margin: 0;
}
header #logo {
    max-height: 10vh;
}
main {
    font-size: 5vw;
    display: grid;
}
main > .content {
    width: 100%;
    margin: auto;
}
.editable input {
    font-size: inherit;
}
.editable.name input {
    width: calc(50% - 20px);
}

.name, .comment {
    letter-spacing: -0.04em;
}
.name {
    white-space: nowrap; /* disallow text wrapping */
}
#lastname {
    font-weight: 600;
}
footer {
    font-size: small;
    display: grid;
    align-content: end;
    justify-items: center;
}

/*
 * Full screen button
 */

body, ::backdrop {
    background: inherit;
}
#fullscreen-button {
    position: absolute;
    bottom:  15px;
    right:  15px;
    background-color: rgba(0,0,0,0.05);
    border:  0;
    width:  40px;
    height:  40px;
    border-radius: 50%;
    box-sizing: border-box;
    transition:  transform .3s;
    cursor:  pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#fullscreen-button:hover {
    background-color: rgba(0,0,0,0.1);
    transform: scale(1.125);
}
#fullscreen-button svg:nth-child(1) { 
    display: none;
}
[fullscreen] #fullscreen-button svg:nth-child(2) {
    display: none;
}
[fullscreen] #fullscreen-button svg:nth-child(1) {
    display: inline-block;
}
#fullscreen-button svg {
    width:  20px;
    height:  20px;
    fill:  inherit;
    margin: 0 auto;
    opacity: 0.25;
}

@media (prefers-color-scheme: dark) {
    body, ::backdrop {
        background-color: black;
        color: white;
    }

    #fullscreen-button {
        background-color: rgba(255,255,255,0.05);
    }
    #fullscreen-button:hover {
        background-color: rgba(255,255,255,0.1);
    }
    #fullscreen-button svg {
        fill:  white;
        /* opacity: 1; */
    }
    
    a, a:visited {
        color: #999;
    }
}