:root {
    --sl-blue-100: rgb(40, 168, 224);
    --sl-grey-100: rgb(110, 111, 113);
    --sl-grey-75:  rgb(146, 147, 148);
    --sl-grey-50:  rgb(182, 183, 184);
    --sl-grey-25:  rgb(219, 219, 219);

    /*--header-height: 10vh;
    --body-height: 85vh;
    --footer-height: 5vh;*/

    --header-height: 7vh;
    --body-height: 90vh;
    --footer-height: 3vh;
}

body, .sp-wrapper, .sp-header, .sp-body, .sp-footer {
    /* Padding inside height/width. */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    /* Sections stay put and get scrollbar if necessary. */
    overflow: auto;
}
body, .sp-wrapper, .sp-header, .sp-body, .sp-footer {
}

body {
    font-family: Montserrat, sans-serif;
    background: white;
    margin: 0;
}
.sp-wrapper {
    height: 100vh;
}
.sp-header {
    height: var(--header-height,10vh);
    line-height: var(--header-height,10vh);

    background: var(--sl-blue-100);
    color: white;
    font-size: 2rem;
    font-family: Montserrat, sans-serif;
    text-align: center;
    /*padding: 1rem;*/
}
@keyframes rotating {
    from {
        /*-ms-transform: rotate(0deg);*/
        /*-moz-transform: rotate(0deg);*/
        /*-webkit-transform: rotate(0deg);*/
        /*-o-transform: rotate(0deg);*/
        transform: rotate(0deg);
        font-size: 1rem;
    }
    50% {
        font-size: 4rem;
    }
    to {
        /*-ms-transform: rotate(360deg);*/
        /*-moz-transform: rotate(360deg);*/
        /*-webkit-transform: rotate(360deg);*/
        /*-o-transform: rotate(360deg);*/
        transform: rotate(360deg);
        font-size: 1rem;
    }
}
.sp-8-8-edition {
    animation: rotating 4s linear infinite;

    font-size: 1.5rem;
    position: fixed;
    translate: 50vw 15vh;
    color: red;
}
.sp-body {
    height: var(--body-height,85vh);

    background: var(--sl-grey-25);
    padding: 1rem;
}
.sp-footer {
    height: var(--footer-height,5vh);
    line-height: var(--footer-height,5vh);

    background: var(--sl-blue-100);
    color: white;
    text-align: right;
    padding: 0 1rem;
}
li {
    /*padding: 0.25rem;*/
    padding: 0.25rem;
}