<style>
html {
    height: 100vh;
}
body {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;

    height: 100vh;
    background: #222222;
    overflow-x: hidden;
    
    color: #fff;
    font-family: 'Roboto', Arial, sans-serif;

    /*scroll-behavior: smooth;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior-y: contain;*/
    overscroll-behavior: none;
}
a {
    color: #fff;
    cursor: pointer;
    text-decoration: underline dotted;
}
a:hover {text-decoration: underline;}

@font-face {
    font-family: 'title_font';
    src: url('font.otf') format('opentype');
}
.f1, .f2, .f3 {font-family: 'title_font';}
.f1 {line-height: 1.1;}
.f4 {
    font-family: 'Roboto', Arial, sans-serif;
    color: #888;
}

#pcontainer {
    height: 100vh;
}
.left, .right, .center {
    position: absolute;
    opacity: 0;

    /*transform: translate(-50%, -50%);*/
}
.center {
    text-align: center;
}
.menu ,#viewport {
    position: fixed;
    /*width: 100%;*/
    cursor: pointer;
    font-family: 'title_font';
}
#viewport {
    text-align: center;
    display: none;
}
.smedia {
    position: fixed;
    top: 50%;
    right: 2vw;
    transform: translate(0%, -50%);
}
#music {
    position: fixed;
    top: 2.7vh;
    right: 1.9vw;
    width: 3.6vw;
}
#top {
    position: fixed;
    bottom: 5vh;

    /*display: flex;
    align-items: flex-end;*/
}
/*#svg_music {
    fill: #666;
    transition: fill 0.7s ease;
}
#svg_music:hover {
    fill: #fff;
    transition: fill 0.7s ease;
}*/
#menu_container{
    display:flex;
}
#menu_display{
    width: 22vw;
    border: 2px solid white;
    padding: 6px;

    display: flex;
    align-items: center;
    text-align: center;
}
.menu_item {
    display: none;
    color: #888888;
}
#mmenu {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    padding: 4vh 0 0 8vw;

    display: none;
}
#mmenu_open, #mmenu_close {
    position: fixed;
    left: 46vw;
    bottom: 4vh;

    width: 8vw;
    height: 4vh;
    /*background-color: white;*/
}
#menu_line{
    border: 2px solid white;
    margin-left: 0.3vw;
    width: 3vw;
}
.mline {
    display: block;
    height: 5px;
    width: 100%;
    /*border-radius: 10px;
    margin-bottom: 7px;*/
    background-color: white;
    margin-bottom: 0.8vh;
}
.mcross_1{
    display: block;
    height: 5px;
    width: 100%;
    background-color: white;

    -ms-transform: translate(0, 13px) rotate(45deg);
    -webkit-transform: translate(0, 13px) rotate(45deg);
    transform: translate(0, 13px) rotate(45deg);
}
.mcross_2{
    display: block;
    height: 5px;
    width: 100%;
    background-color: white;

    -ms-transform: translate(0, 8px) rotate(-45deg);
    -webkit-transform: translate(0, 8px) rotate(-45deg);
    transform: translate(0, 8px) rotate(-45deg);
}
.mmenu_item {
    width: 84vw;
    border-bottom: 3px solid white;
    margin-bottom: 2vh;
}

.button {
    cursor: pointer;
    /*display: inline-block;*/
}
.title {line-height: 1;}
.content {
    width: 30vw;
    height: 35vh;

    line-height: 1.6;
}
.fcontent {
    width: 100vw;

    line-height: 1.6;
    /*background-color: rgba(0, 0, 0, 0.8);*/
}
#loading {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    
    display: block;

    opacity: 1;
    transition: opacity 0.4s;
}
#loading_text {
    position: fixed;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-family: 'title_font';
}
#ptimeline, #star{
    position: fixed;
    top: 0;
}
#darrow{
    width: 100%;
    position: absolute;
    bottom: 4vh;
}

#highway{
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 0);
    
    /*height: 100vh;
    display: flex;
    align-items: center;*/
}
#milestone{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#gif_1{
    position: absolute;
    top: 600px;
    left: 10vw;
}
#gif_2{
    position: absolute;
    top: 900px;
    right: 10vw;
}
#gif_3{
    position: absolute;
    top: 800px;
    right: 15vw;
}
.tgif{display: inline-block;}
canvas{
    width: 100vw !important;
}
.ftworld {
    position: absolute;
    bottom: 3vh;
    right: 3vh;
}
.finger{display: inline;}
.dj{
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}
#highway_overlay, #dj_overlay{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 180, 255, 0.3);
}
#highway_beam_img, #dj_beam_img{margin-top: -5%;}
#beam {
    position: fixed;
    /*top: 150%;
    bottom: -40%;*/
    left: 50%;
    transform: translate(-50%, 0);
    width: 800px;
    height: 225px;
    background-image: url('../img/beam.png');
    background-repeat: no-repeat;
    background-size: 4000px 3376px;
}
#beam_2 {
    position: fixed;
    /*top: 150%;*/
    bottom: -40%;
    left: 50%;
    transform: translate(-50%, 0) scale(2.8);
    width: 800px;
    height: 225px;
    background-image: url('../img/beam.png');
    background-repeat: no-repeat;
    background-size: 4000px 3376px;
}
.float {
    -webkit-animation-name: floating;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}
.left_float {
    -webkit-animation-name: left_floating;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}
.scale_float {
    -webkit-animation-name: scale_floating;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes floating{
    from {-webkit-transform:translate(0%, 0px);}
    65% {-webkit-transform:translate(0%, 15px);}
    to {-webkit-transform: translate(0%, -0px);}    
}
@-webkit-keyframes left_floating{
    from {-webkit-transform:translate(-50%, 0px); opacity: 1;}
    65% {-webkit-transform:translate(-50%, 15px); opacity: 0.9;}
    to {-webkit-transform: translate(-50%, -0px); opacity: 1;}    
}
@-webkit-keyframes scale_floating{
    from {-webkit-transform:translate(-50%, 0px) scale(2.8);}
    65% {-webkit-transform:translate(-50%, 15px) scale(2.8);}
    to {-webkit-transform: translate(-50%, -0px) scale(2.8);}    
}

/*collections click*/
.dj, #t_banner_1, #t_banner_2, #t_ftw_1, #t_ftw_2, #t_start_1, #t_collections_1, #t_collections_2, #t_milestones_1, #t_milestones_2, #t_team_1, #t_team_2, #t_end_1{pointer-events: none;}

@media only screen and (orientation: landscape) {
    .menu, .smedia{display: block;}
    #mmenu_open{display: none;}
    #planet{
        transform: scale(1.3) translate(0%, -10%);
    }
    #star{
        width: 100%;
    }
    #milestone{
        transform: scale(1.6) translate(-4%, -4%);
    }
    .title{
        /*top: 80%;
        opacity: 0;*/
        position: fixed;
        bottom: 2%;
    }
    .content, .fcontent{
        top: 15%;
        opacity: 0;
    }
    .banner {top: 80%;}
    .fcontent{height: 80vh;}
    body{font-size: 1.3vw;}
    .f1{font-size: 3vw;}
    .f2{font-size: 7.5vw;}
    .f2 br{display: block;}
    .f4{font-size: 1.1vw;}
    .menu{
        top: 3%;
        left: 2vw;
        font-size: 2vw;
    }
    /*left menu*/
    .menu_item{
        margin-left: 0.6vw;
    }
    #mnews:hover, #mfingertheworld:hover, #mcollections:hover, #mmilestones:hover, #mteam:hover{color: #fff !important;}

    #music{display: block;}
    #mftw{display: none;}
    .left{left: 0%;}
    .right{right: 0%;}
    .rcorner{
        right: 1.8%;
    }
    .smedia_icon{
        width: 3.3vw;
        margin-bottom: 2vh;
    }
    #sphere_img img{width: 30vw;}
    .tgif img{width: 10vw;}
    /*.dj{
        position: fixed;
        left: 50%;
        transform: translate(-50%, 0);
        height: 100vh;
        display: flex;
        align-items: center;
    }
    #dj{height: 100vh;}*/
    .news_thumb{
        margin: auto;
        width: 15vw;
    }
    .news_thumb video, .news_thumb img{width: 15vw;}

    .ftw{
        width: 3.5vw;
        /*margin-right: 1vw;*/
    }
    .ftw_studio{display: inline;}
    .ftw_studio img{height: 65px;}

    .finger img{height: 50px;}
    .clow{
        display: none;
    }
    #highway_img img{height: 55vh;}
    #highway_beam_img img{height: 30vh;}
    #arrow img{
        width: 1.5vw;
        margin-top: 2vh;
    }
    canvas{
        height: 100vh !important;
    }
}
@media only screen and (orientation: portrait) {
    /*protrait*/
    .menu, .smedia{display: none;}
    #mmenu_open{display: block;}
    #planet{
        /*position: fixed;
        -webkit-transform: scale(1.0) translate(0%, 12%);*/
        transform: scale(1.0) translate(0%, 15.5%);
    }
    #star{
        left: 0;
        width: 100%;
        height: 100%;
    }
    #milestone{
        transform: scale(2) translate(2%, 15%);
    }
    #pcontainer {
        /*ios safari bottom*/
        height: 90vh !important;
    }
    .title{
        top: 10%;
        /*opacity: 0;*/
    }
    .content, .fcontent{
        top: 15%;
        opacity: 0;

        line-height: 1.4;
    }
    .fcontent{height: 88vh;}
    .mmenu_item{                
        font-size: 7.7vw;
        font-family: 'title_font';
        text-decoration: none;
    }
    #music{display: none;}
    .ftw_studio{display: inline;}
    .ftw_studio img{
        width: 12vw;
    }
    .ftworld img{
        width: 25vw;
    }
    #mftw{
        margin-bottom: 0.7vh;
        position: relative;
        left: 28vw;
    }
    .news_thumb{text-align: center;}
    .news_thumb video, .news_thumb img{width: 40vw;}

    body{font-size: 4.5vw;}
    
    .f1{font-size: 7vw;}
    .f2{font-size: 10vw;}
    .f2 br{display: none;}
    .f4{font-size: 4vw;}
    .left, .right{
        width: 90vw;
        left: 5% !important;
    }
    .mccenter{
        display: flex;
        justify-content: center;
        text-align: center;
    }
    .mccenter img{margin: 0 auto;}
    .mclow{
        display: none;
    }
    .micon{
        width: 84vw
    }
    .smedia_icon{
        width: 40px;
        display: inline-block;
        margin-right: 2vw;
    }
    .mmusic_icon{
        width: 40px;
        float: right;
    }
    #darrow{
        bottom: 20vh;
    }

    #sphere_img img{height: 27vh;}
    .tgif img{width: 30vw;}
    #highway_img img{height: 25vh;}
    #highway_beam_img img{
        height: 14vh;
        /*transform: scale(0.45);*/
    }
    .dj{top: 30%;}
    /*#dj{height: 100vh;}*/
    .finger img{height: 40px;}
    #arrow img{
        width: 4vw;
        margin-top: 1vh;
    }
    canvas{
        height: 70vh !important;
    }
}
</style>