SI13/style.css

@media screen{
        
    @font-face {
        font-family: 'Roboto';
        src:  url('fonts/Roboto-Regular.ttf');
}
    @font-face {
        font-family: 'Robotobold';
        src:  url('fonts/Roboto-Bold.ttf');
}
    @font-face {
        font-family: 'Robotomedium';
        src:  url('fonts/Roboto-Medium.ttf');
}
    
    @font-face {
        font-family: 'Robotomono';
        src:  url('fonts/RobotoMono-Bold.ttf');
}
    
    @font-face {
       font-family: 'WFTF';
        src:  url('fonts/wftfs-Regular.otf');
}
    @font-face {
        font-family: 'EBGaramonditalic';
        src:  url('fonts/EBGaramond-MediumItalic.ttf');
}
    @font-face {
        font-family: 'EBGaramonditalicsemi';
        src:  url('fonts/EBGaramond-SemiBoldItalic.ttf');
}
    @font-face {
        font-family: 'EBGaramondregular';
        src:  url('fonts/EBGaramond-Medium.ttf');
}
    @font-face {
        font-family: 'Brut';
        src:  url('fonts/Brut_Grotesque-Text.otf');
} 
    
    @font-face {
        font-family: 'WFTF_custom-Regular';
        src:  url('fonts/WFTF_custom-Regular.otf');
}  
    
* {
  box-sizing: border-box;
}

:root{
    font-family:'Roboto';
    --title: 6vw;
    --sub: 1.2vw;
    --sub-r: 5.5vw;
    --regular: 2vw;
    --r-r: 5vw;
    --description: 1vw;
    --right: 1vw;
    --icon: 1.7vw
}
    
body{
    background-image: url('grid.png');
    background-size: 8vw;
    margin: 0 4vw;
    padding: 0;
    max-width: 100%;
    height: 100%;
    background-size: 8vw;
    overflow-x: hidden;
    z-index: 100;
/*     text-shadow: 10px 10px 5px rgba(0,0,0,0.05) */
}
    

button{
    font-family:'Robotomono';
    color: black;
    background-color: white;
    font-size: var(--description);
    border-radius: 40px;
    display: fixed;
    margin: 0 1vw;
   margin-bottom: 2vw;
     min-width: 3vw; 
}
    
button:hover{
    font-family:'Robotomono';
    color: black;
    background-color: #D3D3D3;

}
    
button:focus{
    font-family:'Robotomono';
    color: black;
    background-color:#c6c6c6;

}
    
    
    

    .row{
        margin-top: -3vw;
    }
    

    
.header{
    position: fixed;
    line-height: 4vw;
    overflow-y: hidden;
}
    
#title{
    font-family:'Roboto';
    font-size: var(--title);
    }
    
.column {
    float: left;
    position: fixed
}

.left {
    width: 60%; 
    margin-top: 20%;
    }
    
#showMessage{
    padding-right: 2vw;
    font-family:'EBGaramondregular';
    font-size: var(--regular);
    line-height: 2.5vw;
    }
    

.right {
    right: 2vw;
    margin-top: 22.5vw;
    width: 35%;
    background-color: white;
    height: 100vh;
    position: fixed;
    background-color: rgba(0,0,0,0)
    
}
    
.right p, li, b{
    font-size: var(--right);
    line-height: 1.5vw;
    padding: 0 5vw  0 1vw;
    font-family:'Robotomedium'; 
}
    
.right h3{
    font-size: var(--sub);
    padding: 0 5vw  0 1vw;
}
    
.right p,b,h3,ul{
        margin: .7vw 1vw;
}
    
#button{
    text-align: center;  
}
    
#innest{
    position: relative;
    overflow-y: scroll;
}


#intro{
    visibility: hidden; 
    position: absolute; 
    margin-top: 2vw;
    overflow-y: hidden;
    line-height: 1.5vw;}

    
 #colophon{
    visibility: hidden;
    position: absolute; 
    margin-top: 2vw;
}
    
#print{
    visibility: hidden;
    position: absolute; 
    margin-top: 2vw;
} 


#archive{
    width: 35vw;
    visibility: hidden; 
    position: relative; 
    top: -25vw;
    /* margin: 90% 0; */
    overflow-y: hidden;}

#archive video{
    width: 100%;
    margin: 40% 0;
    /* position: absolute; */
    top: 0;
}
    
#innest{
    position: relative;
    overflow-y: scroll;
}

#license{
    visibility: hidden;
    position: absolute; 
    margin-top: 2vw;
} 
    
#license a{
    text-decoration:underline;
    color: black
}
    
#license a:visited{
    text-decoration:underline;
    color: black
}
    
#license ul{
    font-size: var(--regular);
    font-family:'Robotomedium'; 
}
    

    .A{
        color: #ff6c2f;
    }
    
    .M{
        color: red;
    }
    
        .T{
        color: silver;
    }
    
    .L{
        color: #00939b;
    }
    
    .P{
        color: #ff14d0; ;
    }
    
    .R{
        color: #0F0;
    }
    
    .U{
        color: #3255a4;
    }
    
    .H{
        color: #0078bf;
    }
    
    .O{
        color: #00f;
    }
    
    .E{
        color: green;
    }
    
    
    #showMessage a{
    
    color: black;
    text-decoration: none;
    font-family: 'EBGaramonditalic';
    
    }
    
    #showMessage span{
        font-family: "WFTF";
        text-decoration: underline;
        font-size: var(--icon);
    }
    
    
        #showMessage .A:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
/*     text-decoration: underline; */
            color: #ff6c2f;
    }
    
            #showMessage .M:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
/*     text-decoration: underline; */
            color: red;
    }
    
            #showMessage .T:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
/*     text-decoration: underline; */
            color: silver;
    }
    
            #showMessage .L:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
/*     text-decoration: underline; */
            color: #00939b;
    }
    
            #showMessage .P:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
/*     text-decoration: underline; */
            color: #ff14d0;
    }
    
            #showMessage .R:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
/*     text-decoration: underline; */
            color: #0f0;
    }
    
            #showMessage .U:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
/*     text-decoration: underline; */
            color: #3255a4;
    }
    
                #showMessage .E:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
/*     text-decoration: underline; */
            color: green;
    }
    
                #showMessage .H:hover{
        -webkit-transition: all .5sease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5sease;
        transition: all .5s ease;
/*     text-decoration: underline; */
            color: #0078bf;
    }
    
                #showMessage .O:hover{
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5s ease;
        transition: all .5s ease;
/*     text-decoration: underline; */
            color: blue;
    }
    
    
    
    #future{
        text-decoration: none;
        font-family: 'EBGaramonditalic';
        cursor: pointer; 
    }
    
    #future:hover{
/*         text-decoration: underline; */
        filter: blur(1.5px);
        -webkit-transition: all .5 ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5sease;
        transition: all .5s ease;
/*         animation: sexy 1s infinite; */
    }
     
.customfont{
    font-family: "WFTF_custom-Regular";
    font-size: 4vw
 }
    
#sub{
    font-family: 'EBGaramonditalic';
    font-size: 2.8vw;
}
    
#gallery{
    font-family: "WFTF";
    font-size: 15vw;
    text-align: center;
    margin: 40% 0;
    height: 0;
    display: absolute;
}
    
    .mini{
        font-size: 0.8vw;
        line-height: 1vw;
        
    }

    .mini a{
        text-decoration: none;
        
    }    
    
    @media only screen and (max-width: 600px) {
        
        body{
            overflow-y: hidden;
            margin: 0 7vw;
        }
        #title{
            margin-top: 9vw;
            font-size: 11vw;
            line-height: 9vw
        }
        
        #sub{
            font-size: 4.8vw;
            
            width: 30%
        }
        
        
        .column{
            position: relative
        }
        
        .left{
            margin-top: 40vw;
            width: 90%;   
            overflow-y: auto;
        }
        
        #innest{
            position: relative;
            overflow-y: none;
        }


        #showMessage{
            font-size: var(--r-r);
            line-height: 5vw
        }
        
        #showMessage span{
        font-family: "WFTF";
        text-decoration: underline;
        font-size: 4vw;
    }
        
        #gallery{
    font-family: "WFTF";
    font-size: 45vw;
    text-align: center;
    margin: 40% 0;
    height: 0;
    display: absolute;
}
        
        
        .right{
            height: 200%;
            margin: 0;
            width: 100%;
            position: relative;
            overflow-y: none;
            margin-bottom: 30vw
            
        }
        
        .right p, li, b{
        font-size: 4vw;
        line-height: 5.5vw;
        padding: 0 5vw  0 1vw;
        font-family:'Robotomedium'; 
    }
    
    .right h3{
        font-size: var(--sub-r);
        padding: 0 5vw  0 1vw;
        line-height: 5vw
    }
    
    .right p,b,h3, ul{
        margin: .7vw 1vw;
    }
    
        .mini{
            font-size: 3vw
        }
        
        .customfont{
    font-family: "WFTF_custom-Regular";
    font-size: 6vw
 }
        
        button{
            font-size: 4vw;
    margin: 0;
            margin-bottom: 3vw;
     min-width: 20%; 
}

#archive{
    width: 100%;
    position: relative;
    top: -68vw;
}
    }

}