* {
    margin: 0 ;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
.body {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.images {
    display: grid;

}

.image {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

.buttons {
    text-align: center;
}
.button {
    border-radius: 1em;
    background-color: #bebebe;
    font-size: larger;
}


/*TODO scrollbar */

body::-webkit-scrollbar {
    width: .5em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.212);
    box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.212);
}

body::-webkit-scrollbar-thumb {
    background-color: rgb(31, 31, 31);
}

body::-webkit-scrollbar-track-piece {
    background-color: rgb(207, 207, 207);
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: rgb(238, 238, 238);
    }

    .button {
        text-align: center;
        color: #EEEEEE;
        border-color: #EEEEEE;
        background-color: #585858;
    }
    body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.212);
        box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.212);
    }

    body::-webkit-scrollbar-thumb {
        background-color: rgb(139, 139, 139);
    }

    body::-webkit-scrollbar-track-piece {
        background-color: rgb(77, 77, 77);
    }

}