@font-face {

    font-family: h1;
    src: url(/fonts/h1.ttf);

}

@font-face {

    font-family: h2;
    src: url(/fonts/h2.ttf);

}

@font-face {

    font-family: li;
    src: url(/fonts/li.ttf);

}

@font-face {

    font-family: p;
    src: url(/fonts/p.ttf);

}

@keyframes hidden2visible {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

html {

    margin: 0;

    width: 100%;
    height: 100%;

}

body {

    margin: 0;

    width: 100%;
    height: 100%;

    background-color: black;
    user-select: none;

}

video {

    position: fixed;

    width: 100%;
    height: 100%;

    object-fit: cover;
    z-index: -1;

    pointer-events: none;
    animation: hidden2visible 1s ease-in;

}

h1 {

    margin: 0;

    position: fixed;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
    z-index: -1;

    font-family: h1;
    font-size: xxx-large;

    color: white;
    animation: hidden2visible 10s ease-in, hidden2visible 5s ease-out 25s reverse forwards;

}

ol {

    margin: 0;
    padding: 60px 0 0 0;

    list-style-type: none;
    background-color: rgba(255, 255, 255, 0.5);

    font-size: 0;
    text-align: center;

}

ol > li {

    padding: 0 0 60px 60px;
    width: 260px;

    display: inline-block;
    vertical-align: top;

    font-size: initial;
    text-align: initial;

}

h2 {

    margin: 0;

    font-family: h2;
    font-size: large;

}

abbr {

    text-decoration: none;

}

abbr:hover {

    cursor: context-menu;

}

ul {

    margin: 0;
    padding: 0;

    list-style-position: inside;

}

ul.highlights {

    list-style-image: url(/icons/highlight.svg);

}

ul.hyperlinks {

    list-style-image: url(/icons/hyperlink.svg);

}

ul > li {

    font-family: li;
    font-size: small;

    line-height: 2;

}

a {

    text-decoration: none;
    color: firebrick;

}

a:hover {

    color: crimson;

}

p {

    margin: 0;
    padding: 15px;

    font-family: p;
    font-size: x-small;

    text-align: right;
    color: white;

}