@font-face {
    font-family: "Lineto-Circular";
    src: url("https://olafureliasson.net/fonts/lineto-circular-book-s.eot");
    src: url("https://olafureliasson.net/fonts/lineto-circular-book-s.eot?#iefix") format("embedded-opentype"), url("https://olafureliasson.net/fonts/lineto-circular-book-s.woff") format("woff"), url("https://olafureliasson.net/fonts/lineto-circular-book-s.ttf") format("truetype"), url("https://olafureliasson.net/fonts/lineto-circular-book-s.svg#LLCircularWeb-Book") format("svg");
    font-weight: 400;
    font-style: normal;
    }

    html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        width: 100%;
        height: 100%;
        letter-spacing: 1px;
        font-family: "Lineto-Circular", Verdana, Geneva, Tahoma, sans-serif;
        background-color: black; /* #1b1a1a */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        overflow: hidden;
    }

    .pointer {
        cursor: pointer;
    }

    div.container {
        position: absolute;
        top: 0;
        height: 100%;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 500ms linear;
        opacity: 0;
        overflow: hidden;
    }

    div.video-container{
        -webkit-clip-path: ellipse(50% 50% at 50% 50%);
        clip-path: ellipse(50% 50% at 50% 50%);
        overflow: hidden;
        margin:0;
        transform: scale(1.3);
    }                    

    div.video-mask{
        -webkit-mask: url(mask.png);
        mask: url(mask.png);
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    div.video-container-horizontal{
        -webkit-clip-path: ellipse(62% 62% at 50% 50%);
        clip-path: ellipse(62% 62% at 50% 50%);
        overflow: visible;
        transform: scale(1);
    }

    div.video-shadow{
        position: absolute;
        /*bigger: box-shadow: inset 0 0 44px 40px #000000;*/
        box-shadow: inset 0 0 30px 25px #000000;
        border-radius: 10000px;
    }

    div.video-shadow-white{
        display:none;
        /* position: absolute;
        box-shadow: inset 0 0 20px 25px #fff;
        border-radius: 10000px; */
    }

    iframe{
        margin-top: -5px;
        transform: translateX(-25%);
    }

    menu, footer{
        font-size: 0.8rem;
        position: absolute;
        top: 0;
        width: 100vw;
        color: white;
        transition: opacity 300ms ease-in;
        opacity: 0;
        display: flex;
        margin: 0;
        padding: 10px;
        justify-content: flex-end;
        z-index: 3;
        box-sizing: border-box;
    }

    menu.on {
        opacity: 1;
    }

    footer {
        display: none;
        top: auto;
        bottom: 10px;
        text-align: center;
        box-sizing: border-box;
        padding: 0 70px;
    }

    menu a, menu a:visited {
        transition: border-color 100ms linear;
        border-bottom: 2px solid transparent;
        color: white;
        text-decoration: none;
    }

    menu a:hover {
        border-color: white;
    }

    #clickable {
        /*cursor: pointer;*/
        opacity: 0;
        /*background-color: red;*/
        position: absolute;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 1;
    }

    /* loading */
    h1 {
        font-size: 1.5rem;
        font-weight: normal;
        text-align: center;
        position: absolute;
        top: 0;
        width: 100vw;
        height: 100%;
        color: white;
        /* background-color: black; */
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    h1.off {
        font-size: 1rem;
        color: white;
        line-height: 1.7em;
    }

    h1.off a {
        transition: border-color 100ms linear;
        border-bottom: 2px solid transparent;
        color: white;
        text-decoration: none;
    }

    h1.off a:hover {
        border-color: white;
    }

    h1 span:after {
        content: '.';
        animation: dots 2s steps(5, end) infinite;
    }

    h1.black span:after {
        content: '.';
        animation: dotsBlack 2s steps(5, end) infinite;
    }

    h1.off span:after{
        content: '';
        animation: none;
    }

    @keyframes dots {
    0%, 20% {
        color: black;
        text-shadow:
        .25em 0 0 rgba(0,0,0,0),
        .5em 0 0 rgba(0,0,0,0);}
    40% {
        color: white;
        text-shadow:
        .25em 0 0 rgba(0,0,0,0),
        .5em 0 0 rgba(0,0,0,0);}
    60% {
        text-shadow:
        .25em 0 0 white,
        .5em 0 0 rgba(0,0,0,0);}
    80%, 100% {
        text-shadow:
        .25em 0 0 white,
        .5em 0 0 white;}
    }

    @keyframes dotsBlack {
    0%, 20% {
        color: white;
        text-shadow:
        .25em 0 0 rgba(0,0,0,0),
        .5em 0 0 rgba(0,0,0,0);}
    40% {
        color: black;
        text-shadow:
        .25em 0 0 rgba(0,0,0,0),
        .5em 0 0 rgba(0,0,0,0);}
    60% {
        text-shadow:
        .25em 0 0 black,
        .5em 0 0 rgba(0,0,0,0);}
    80%, 100% {
        text-shadow:
        .25em 0 0 black,
        .5em 0 0 black;}
    }

    @media only screen and (max-device-width: 500px) {
        menu {
            justify-content: center;
        }
    }
    @media only screen and (max-device-width: 370px) {
        menu {
            font-size:3vw;
        }
    }