@font-face {
    font-family: 'Imperial';
    src: url('../assets/imperialurw-med-webfont.woff2') format('woff2'),
         url('../assets/imperialurw-med-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing:border-box;
    font-family:"Imperial", sans-serif;
    font-size:1.5vh;
    font-size: calc(var(--vh, 1vh) * 1.5);
    line-height:1.5vh;
    line-height: calc(var(--vh, 1vh) * 1.5);
    color:white;
    -webkit-text-size-adjust:none;
    text-size-adjust:none;
    }
            a {
                font-size:inherit;
                text-decoration:none;
            }
            body {
                border:0;
                margin:0;
                padding:0;
                background:black;
                min-height:100vh;
                min-height: calc(var(--vh, 1vh) * 100);
                min-width:100vw;
            }
            .circle {
                width:100vh;
                height:100vh;
                height: calc(var(--vh, 1vh) * 100);
                position:fixed;
                top:50vh;
                top: calc(var(--vh, 1vh) * 50);
                left:50vw;
                border-radius:50%;
                background:black;
                background-size:cover;
                background-position:center center;
            }
            #circle-L {
                transform:translate(-100.03%,-50%);
            }
            #circle-R {
                transform:translate(0.03%,-50%);
            }
            #menu {
                display:flex;
                justify-content:space-between;
                position:fixed;
                top:0;
                width:100%;
                text-align:center;
                padding:2vh;
                padding: calc(var(--vh, 1vh) * 2);
            }
            p {
            }
            p:last-of-type {
                margin-bottom:0;
            }
            #text-left {
                position:fixed;
                left:2vh;
                left: calc(var(--vh, 1vh) * 2);
                top:50vh;
                top: calc(var(--vh, 1vh) * 50);
                width:40vw;
                transform:translate(0,-50%);
                text-align:left;
            }
            #text-right {
                display:flex;
                flex-direction:column;
                justify-content:flex-end;
                position:fixed;
                right:2vh;
                right: calc(var(--vh, 1vh) * 2);
                top:50vh;
                top: calc(var(--vh, 1vh) * 50);
                width:40vw;
                text-align:right;
                transform:translate(0,-50%);
            }
            #text-right p{
                 margin-top:0;   
                }
            #title {
                position:fixed;
                height:2.5vh;
                height: calc(var(--vh, 1vh) * 2.5);
                width:100%;
                bottom:1vh;
                bottom: calc(var(--vh, 1vh) * 1);
                left:0;
                background-image:url('../images/title.png');
                background-position:center center;
                background-repeat:no-repeat;
                background-size:contain;
                pointer-events:none;
                z-index:999;
            }
            .togglebox {
                position:fixed;
                bottom:2vh;
                bottom: calc(var(--vh, 1vh) * 2);
                left:0;
                text-align:center;
                width:100%;
            }
            video {
                height:90vh;
                height: calc(var(--vh, 1vh) * 90);
                width:90vw;
                position:fixed;
                top:50vh;
                top: calc(var(--vh, 1vh) * 50);
                left:50vw;
                transform:translate(-50%,-50%);
            }
           @media all and (orientation:portrait) {
                .circle {
                    width:100vw;
                    height:100vw;
                }
                #circle-L {
                transform:translate(-50%,-100.03%) rotate(90deg);
                }
                #circle-R {
                transform:translate(-50%,0.03%) rotate(-90deg);
                }
                #text-left {
                position:fixed;
                top:6vh;
                top: calc(var(--vh, 1vh) * 6);
                left:0;
                height:44vh;
                height: calc(var(--vh, 1vh) * 44);
                width:100vw;
                text-align:center;
                transform:translate(0,0);
                }
                #text-right {
                position:fixed;
                top:94vh;
                top: calc(var(--vh, 1vh) * 94);
                right:0;
                max-height:44vh;
                max-height: calc(var(--vh, 1vh) * 44);
                width:100vw;
                text-align:center;
                transform:translate(0,-100%);
                }
                #title {
                height:2vh;
                height: calc(var(--vh, 1vh) * 1.5);
                }
                p{
                }
            }