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.5fvw;
    --regular: 2vw;
    --description: 1vw;
    --right: 1vw;
    --icon: 1.7vw
}
    
body{
    background-image: url('grid.png');
    background-size: 8vw;
    margin: 0 10vw;
    padding: 0;
    max-width: 100%;
    min-height: 100vh;
    background-size: 8vw;
    overflow-y: hidden;
/*     overflow-x: hidden; */
    z-index: 100;
}
    

button{
    font-family:'Robotomono';
    color: black;
    background-color: white;
    font-size: var(--description);
    border-radius: 40px;
/*       margin-left: 20vw; */
    display: inline-block;
    margin: 0 1vw;
/*     min-width: 10vw; */
}

    

    
.header{
    position: relative;
/*     height: 1vw; */
/*     margin: 0 6vw;     */
/*     width: 100vw; */
    line-height: 4vw
}
    
#title{
    font-family:'Roboto';
    font-size: var(--title);
/*     padding:-1vw; */
    }
    

    
.column {
  float: left;


}

.left {
    width: 65%;
    background-color: white;
    font-family:'Robotomono';   
    background-color: rgba(0,0,0,0)}
    
    #showMessage{
    margin-top:3vw;
    padding-right: 2vw;
    font-family:'EBGaramondregular';
    font-size: var(--regular);
    line-height: 3vw;
    }
    

.right {
    width: 35%;
    background-color: white;
    border-left: 2px solid black;
    height: 300vw;
    text-align: right;
        background-color: rgba(0,0,0,0)
    
}
    
    .right p{
        font-size: var(--right);
        line-height: 1.5vw;
        padding: 0 10vw  0 2vw
    }
    

    #button{
text-align: center;
      
    }

    

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

    
    

    
    .A{
        color: orange;
    }
    
    .M{
        color: red;
    }
    
        .T{
        color: silver;
    }
    
    .L{
        color: aqua;
    }
    
    .P{
        color: #ff14d0; ;
    }
    
    .R{
        color: #0F0;
    }
    
    .U{
        color: grey;
    }
    
    .H{
        color: yellow;
    }
    
    .O{
        color: blue;
    }
    
    .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: orange;
    }
    
            #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: aqua;
    }
    
            #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: pink;
    }
    
            #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: grey
    }
    
                #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: yellow;
    }
    
                #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';
    }
    
    #future:hover{
        text-decoration: underline;
        filter: blur(1px);
        -webkit-transition: all .5sease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -ms-transition: all .5sease;
        transition: all .5s ease;
        animation: sexy 1s infinite;
    }
    
    
    @keyframes sexy{
        0%{font-family: 'Roboto';}
        70%{font-family: 'Brut';}
        100%{font-family: 'EBGaramonditalicsemi';}
    }
    
    
    
        #gallery{
        font-family: "WFTF";
        font-size: 15vw;
/*         text-align: center; */
        margin: 40% 25%
    }
    
    .customfont{
        font-family: "WFTF_custom-Regular";
        font-size: 4vw
    }
    
    #sub{
    font-family: 'EBGaramonditalic';
    font-size: 2.8vw;
    }