SI13/DRAW/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: '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;
    overflow-x: hidden;
    z-index: 100;
}
    

    #atata {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        margin-left: 1%;        
    }
    
    #symbolA {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    
    #symbolA2 {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    
    #symbolL {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    
    #symbolO {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    #symbolE {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    
    #symbolM {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    
    #symbolT {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    
    #symbolH {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    
    #symbolP {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    
    #symbolR {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    
    #symbolU {
        font-family:'WFTF';
        font-size: 3em;
        margin-left: 15%;
    }
    
    #Liquid {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        margin-left: 1%;
    }
    
    #Otherness {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        margin-left: 1%;
    }
    
    #Eco {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        margin-left: 1%;
    }
    
    #M {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        margin-left: 1%;
    }
    
    #Tense {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        margin-left: 1%;
    }
    
    #Hope {
        font-family:'Roboto';
        font-size: 3em;
        line-height: 1%; /*this has to be modified, in order to grab elements only where they are*/
        margin-left: 1%;
    }    
    
    #Practical{
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        margin-left: 1%;
    }
    
    #Resurgence1{
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        margin-left: 1%;
    }
    
    #Undecidability{
        font-family:'Roboto';
        font-size: 3em;
        line-height: 100%;
        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 {
        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{
        position: fixed;
        bottom: 1%;
        left: 1%;
    border: solid 2px ;
    padding: 1.3em;
    font-size: 1vw;
    text-decoration: none;
    margin-bottom: 1.5vw;
    border-radius: 40px;

    box-shadow: 0px 0px 10px 1px;
    width: 18%
    }
    
    .palette input, label, button{
        margin: .2vw 0;
    }
    .palette input{
        width: 30%
    }

    #clear{
        height: .7%;
        font-size:  0.8vw;
        display: inline
    }
    
    .palette label, button{
        margin-left: 1.5vw;
                font-size: 1.5em;
        display: inline
    }