@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');
} 
    
* {
  box-sizing: border-box;
}

:root{
    font-family:'Roboto';
    --title: 6vw;
    --sub: 3vw;
    --regular: 3vw;
    --description: 1vw
}
    
body{
    margin: 0;
    padding: 0;
    max-width: 100%;
    min-height: 100vh;
    background-size: 8vw;
    overflow-y: hidden;
    overflow-x: hidden;
    z-index: 100;
}
    
    .row{
        margin: 0 6vw;
    }
button{
    margin-left: 2vw;
    font-family:'Robotomono';
    color: black;
    background-color: white;
}

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

}

.left {
    width: 70%;
    background-color: white;
    
}

.right {
    width: 30%;
    background-color: white;
    border-left: 2px solid black;
    height: 100vw;
}
    

    #button{
        text-align: right;
        
    }
    button{
        font-size: var(--description)}

    
#showMessage{
    margin-top:3vw;
    font-size:1.5vw;
    padding: 2vw;
    font-family:'EBGaramondregular';
    font-size: var(--regular);
    }
    
   #showMessage p{
    font-size: 5vw
    }
    
#intro{
    visibility: hidden; 
    position: absolute; 
    font-family:'Robotomono';     
    overflow-y: scroll;
    margin: 2vw;
    line-height: 1.5vw}
    
#colophon{
    visibility: hidden;
    position: absolute; 
    font-family:'Robotomono';     
    overflow-y: scroll;
    margin: 2vw;}
    
#showMessage{
    margin-top:3vw;
    font-size:1.5vw;
    }
    
a #showMessage{
    margin-top:3vw;
    font-size:1.5vw;
    color: blue;
    }