SI13/DRAW/style_tintin.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: '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');
} 

:root{
    font-family:'Roboto';
    --div-title: 2em;
    --regular: 20%; 
}
    
body{
    margin: 0;
    padding: 0;
    max-width: 100%;
    min-height: 100vh;
    background-image: url('assets/grid.png');
    background-size: 8vw;
    overflow-y: hidden;
    z-index: 100;
}

    
    #symbolA {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
        max-width: 10%;
    }
    
    #symbolA2 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
        max-width: 10%;
    }
    
    #symbolA3 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
        max-width: 10%;
    }
    #symbolA4 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
        max-width: 10%;
    }
    #symbolA5 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
        max-width: 10%;
    }
    
    #symbolL {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolL2 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolL3 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolL4 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolL5 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    
    #symbolO {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolO2 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolO3 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolO4 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolO5 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolE {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolE2 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolE3 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolE4 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolE5 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolM {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolM2 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolM3 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolM4 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolM5 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }   
    #symbolT {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolT2 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolT3 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolT4 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolT5 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolH {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolH2 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolH3 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolH4 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolH5 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }    
    #symbolP {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolP2 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolP3 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolP4 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolP5 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }    
    #symbolR {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolR2 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolR3 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolR4 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolR5 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }   
    #symbolU {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    } 
    #symbolU2 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }  
    #symbolU3 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }  
    #symbolU4 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }  
    #symbolU5 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }  
    #Liquid {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        max-width: 10%;
        margin-left: 1%;
    }
    
    #Otherness {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        max-width: 10%;
        margin-left: 1%;
    }    
    #Eco {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        max-width: 10%;
        margin-left: 1%;
    }
    
    #M {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        max-width: 10%;
        margin-left: 1%;
    }
    
    #atata {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        max-width: 10%;
        margin-left: 1%;        
    }
    
    #Tense {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        max-width: 10%;
        margin-left: 1%;
    }
    
    #Hope {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;  
        max-width: 10%;
        margin-left: 1%;
    }    
    
    #Practical{
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        max-width: 10%;
        margin-left: 1%;
    }
    
    #Resurgence1{
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        max-width: 10%;
        margin-left: 1%;
    }
    
    #Undecidability{
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        max-width: 10%;
        margin-left: 1%;
    }
    
    text{
        font-family:'Roboto';
        font-size: 5em;
        color: purple;
        line-height: 100%;
        margin-left: 1%;
    }
    
    .colophon {
        position: fixed;
        bottom: 1%;
        right: 1%;
    }
    
     .licenses {
        display: none;
        position: fixed;
        bottom: 1%;
        left: 1%;
    }
    
      .about {
        position: fixed;
        top: 1%;
        right: 1%;
    }
    

    p{
        font-family:'Roboto';
        line-height: 120%;  
    }

    #pic {
        width: 100px;
    }

    .pic {
        width: 100px;
}

#container{
    z-index: 1;
    line-height: 100%;
    -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

    
#background{
    z-index: 0;
    }

#map{
    width: 100%;
    height: auto;
    }


button{
    position: fixed;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    padding: 0.5vw 1.3em;
    color: black;
    font-size: 1.5vw;
    text-decoration: none;
    margin-bottom: 1.5vw;
    background-color: transparent;
    border-radius: 40px;
    -webkit-box-shadow: 15px 15px 15px 15px; 
    box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
    }
    
button1{
    position: fixed;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    padding: 0.5vw 1.3em;
    color: black;
    top: 1%;
    left: 30px;
    font-size: 1.5vw;
    text-decoration: none;
    margin-bottom: 1.5vw;
    background-color: transparent;
    border-radius: 40px;
    -webkit-box-shadow: 15px 15px 15px 15px; 
    box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
    }
    
button3{
    position: fixed;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    padding: 0.5vw 1.3em;
    color: black;
    bottom: 1%;
    left: 90px;
    font-size: 1.5vw;
    text-decoration: none;
    margin-bottom: 1.5vw;
    background-color: transparent;
    border-radius: 40px;
    -webkit-box-shadow: 15px 15px 15px 15px; 
    box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
    }

.container{ 
      height: 40%;
      width: 60%;
    font-size: var(--div-title);
      padding: 10vw;
      z-index: 10;
      color: black;
      position:fixed;  
      border-radius: 10px;
      box-shadow:  0 0 40px #214c12;
      background-color: rgba(255,255,255,0.95);
      resize: both;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      overflow-x: hidden;
    visibility: hidden;
    }
    
.container2{ 
      height: 40%;
      width: 60%;
    font-size: var(--div-title);
      padding: 10vw;
      z-index: 10;
      color: black;
      position:fixed;  
      border-radius: 10px;
      box-shadow:  0 0 40px #214c12;
      background-color: rgba(255,255,255,0.95);
      resize: both;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      overflow-x: hidden;
    visibility: hidden;
    }
    
.container3{ 
      height: 40%;
      width: 60%;
    font-size: var(--div-title);
      padding: 10vw;
      z-index: 10;
      color: black;
      position:fixed;  
      border-radius: 10px;
      box-shadow:  0 0 40px #214c12;
      background-color: rgba(255,255,255,0.95);
      resize: both;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      overflow-x: hidden;
    visibility: hidden;
    }
    
    
.close{
    font-size: 2em;
    margin-left: 1%;
    /*position: relative;*/
  
}


.intro{ 
      height: 40%;
      width: 60%;
      padding: 10vw;
      z-index: 10;
      color: black;
      position:fixed;  
      border-radius: 10px;
      box-shadow:  0 0 40px #214c12;
      background-color: rgba(255,255,255,0.95);
      resize: both;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      overflow-x: hidden;
    }

.intro:hover{
      box-shadow:  0 0 40px blue;
}

.enter{
    font-size: 1em;top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}

.enter:hover{
    background-color: blue;
    color: white;}
    
    #close{
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    color: black;
    top: 2%;
    right: 2%;
    text-align: right;
    font-size: 0.5vw;
    text-decoration: none;
    margin-bottom: 0.1vw;
    background-color: transparent;
    border-radius: 40px;
    -webkit-box-shadow: 15px 15px 15px 15px; 
    box-shadow: 0px 0px 15px 8px rgba(0,0,0,0);
    }
    
    .palette {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        margin-left: 1%;
    }
    .settings {
        margin-top: 100px;
        position: fixed;
        bottom: 15%;
    }
    
.settings .palette button{
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        margin-left: 1%;
        margin-top: 2%;
    }
.settings .palette button p{
            font-family:'Roboto';
            font-size: 3em;
            line-height: 100%;
    }
.tools .palette{
        font-size: 3em;
        margin-left: 1%;
        margin-top: 2%;
        line-height: 100%;
    }
}