/*
 *  Copyright (c) Lesosoftware 2020
 *  https://github.com/leso-kn
 */

:root, body
{
    cursor: default;
    user-select: none;

    /* fine tune */
    line-height: 5vw;
}
h1
{
    position:fixed !important;
    margin:0;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    line-height: 100vh;
    text-align:center;
    font-size:7vw;
}
h2
{
    padding-bottom:0;
    margin-bottom:0;
    margin-top: 40vh;
    font-size:5vw;
    line-height:5vw;
}
h2 ~ h2
{
    margin-top:0;
    padding-top:0;
    font-size:3vw;
}
h1 ~ h2
{
    position: fixed;
    margin-top:50vh;
    left:0;
    width:100vw;
    text-align: center;
    font-size:3vw;

    transform: translateY(50%);
}
h3
{
    font-size:5vw;
    line-height:10vw;
    margin-top: 2vw;
}
page
{
    left:0;
    top:0;
    width:calc(97vw - 52px);
    height:100vh;

    padding: 0 6vw;
    font-size:3vw;
    visibility: collapse;
    position:fixed;
}

.center
{
    position: fixed;
    left:50vw;
    top:50vh;

    transform: translate(-50%,-50%);
}

progbar
{
    position:fixed;
    top:0;
    left:0;
    width:0vw;
    height:.7vh;
    transition: width .4s;

    background:gray;
}

@keyframes fade-out-up
{
    0%
    { opacity: 1; transform: none; visibility: visible; }
    100%
    { opacity: 0; transform: scale(1.1); visibility: collapse; }
}

@keyframes fade-in-down
{
    0%
    { opacity: 0; transform: scale(0.9); visibility: visible; }
    30%
    { opacity: 0; }
    100%
    { opacity: 1; transform: none; }
}

@keyframes fade-out-down
{
    0%
    { opacity: 1; transform: none; visibility: visible; }
    100%
    { opacity: 0; transform: scale(0.9); visibility: collapse; }
}

@keyframes fade-in-up
{
    0%
    { opacity: 0; transform: scale(1.1); visibility: visible; }
    20%
    { transform: scale(1.1); }
    30%
    { opacity: 0; }
    100%
    { opacity: 1; transform: none; }
}

@media screen, print
{
    /* Fix for bullet point alignment in chromium */
    ul { padding-inline-start: calc(6px + .9em); }
}