:root{
    font-size: 20px;
}

@font-face {
    font-family: GZ_normal;
    src:url(GZ_font_Normal.otf);
}

@font-face {
    font-family: GZ_medium;
    src:url(GZ_font_Medium.otf);
}

html{
    font-family: GZ_normal;
    overflow: hidden;
    background-color: #ffffff;
}

body{
height: 100vh;
width: 100vw;
margin: 0;
}

.title{  
    z-index: 100;
    position: fixed;
    font-size: 3rem;
    line-height: 1;  
    font-family: GZ_medium;
    letter-spacing: -.03em;
    top:1rem;
    left:1rem;
}

.info{
    z-index: 100;
    position: fixed;
    line-height: 1.1;  
    letter-spacing: -.02em;
    left: 1rem;
    bottom: 1rem;
}

.info p{
    margin:0;
    padding:0;
    margin-top:1em;
}

a{
    text-decoration: none;
    color: #000000;
    transition: .2s;
}

a:hover{
    color: #ff0000;
}

#video{
 display: block;
 position: fixed;
 width: 50vw;
 height: auto;
 background-color: #ffffff;
 -webkit-clip-path: inset(5px 5px);
 top: 45%;
 left: 50%;
 transform: translateY(-50%) translateX(-50%);
}

#mobile{
    width:0px;
    height:0px;
}


@media only screen and (max-width: 800px) {

    #video{ 
     width: 80vw;
     top: 45%;
     left: 50%;
     transform: translateY(-50%) translateX(-50%);
    }
    
}

@media only screen and (max-width: 500px) and (-webkit-min-device-pixel-ratio: 3){

    #video{
     width: 50vh;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
    }
    
    #mobile{
    width:100%;
    height:auto;
    }
    
    #desktop{
    width:0px;
    height:0px;
    opacity:0;
    }
    
    
    .title{  
        font-size: 2rem;
    }
    
    .info{
        font-size:.8rem;
    }
    
}

@media only screen and (max-width: 500px) and (-webkit-min-device-pixel-ratio: 2){

    #video{
     width: 50vh;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
    }
    
    #mobile{
    width:100%;
    height:auto;
    }
    
    #desktop{
    width:0px;
    height:0px;
    opacity:0;
    }
    
    
    .title{  
        font-size: 2rem;
    }
    
    .info{
        font-size:.8rem;
    }
    
}

@media only screen and (min-width: 1200px) {
    #video{
        width: 40vw;
        top: 45%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
       }

       .title{  
        font-size: 3rem;
    }
    
}