@media screen{
        
    @font-face {
        font-family: 'Roboto';
        src:  url('Roboto-Regular.ttf');
}
    @font-face {
        font-family: 'Robotobold';
        src:  url('Roboto-Bold.ttf');
}
    @font-face {
        font-family: 'Robotomedium';
        src:  url('Roboto-Medium.ttf');
}
    @font-face {
       font-family: 'WFTF';
        src:  url('wftfs-Regular.otf');
}
    @font-face {
        font-family: 'EBGaramonditalic';
        src:  url('EBGaramond-MediumItalic.ttf');
}
    @font-face {
        font-family: 'EBGaramonditalicsemi';
        src:  url('EBGaramond-SemiBoldItalic.ttf');
}
    @font-face {
        font-family: 'EBGaramondregular';
        src:  url('EBGaramond-Medium.ttf');
}
    @font-face {
        font-family: 'Brut';
        src:  url('Brut_Grotesque-Text.otf');
} 
    .grab{
        cursor: grab;
    }

    #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: 100%;
        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%;
    }
    


:root{
        font-family:'Roboto';
        --regular: 20%;
        
    }

    body{
    /*pointer-events: none;*/
    margin: 0 ;
    height: 100vh;
    width: 100vw;
    background-color: var(--background-color);
    background-image: url('grid.png');
    background-size: 8vw;
    overflow-y: hidden;
}
    
    
    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;}

p:hover{
    box-shadow: 0px 0px 40px black;
    }
    



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{
    z-index:15; 
    position: absolute; 
    overflow: scroll; 
    font-size: 2em;
    line-height: 100%;
    color: blue;   
    height: 97%;
    width: 20%;
    padding: 10px;
    margin-top: 3.5%;
    z-index: 10;
    color: #242322;
    position:fixed;
    right: 0.01px;
    border-radius: 2px;
    top: 10px;
    opacity: 1;
    padding: 1em;
    box-shadow:  0 0 40px #214c12;
    background-color:#bbb9c17d;
    overflow: scroll;
    overflow-x: hidden; 
    resize: both;
       visibility: hidden;
    opacity: 0;
}

.container2{
    z-index:15; 
    position: absolute; 
    overflow: scroll; 
    color: blue;   
    height: 97%;
    width: 20%;
    padding: 10px;
    z-index: 10;
    color: #242322;
    position:fixed;
    left: 0.01px;
    border-radius: 2px;
    top: 10px;
    opacity: 1;
    padding: 1em;
    box-shadow:  0 0 40px #214c12;
    background-color:#bbb9c17d;
    overflow: scroll;
    overflow-x: hidden; 
    resize: both;
       visibility: hidden;
    opacity: 0;
    }
.container3{
    z-index:15; 
    position: absolute; 
    overflow: scroll; 
    color: blue;   
    height: 97%;
    width: 20%;
    padding: 10px;
    z-index: 10;
    color: #242322;
    position:fixed;
    right: 0.01px;
    border-radius: 2px;
    top: 10px;
    opacity: 1;
    padding: 1em;
    box-shadow:  0 0 40px #214c12;
    background-color:#bbb9c17d;
    overflow: scroll;
    overflow-x: hidden; 
    resize: both;
       visibility: hidden;
    opacity: 0;
    }
.close{
    font-size: 2em;
    margin-left: 1%;
    position: relative;
}
}

.intro{
    z-index:15; position: absolute;
    height: 70%;
    width: 70%;
    padding: 10px;
    z-index: 10;
    color: black;
    position:fixed;  
    border-radius: 10px;
    padding: 1em;
    box-shadow:  0 0 40px #214c12;
    background-color:white;
    resize: both;
    visibility: hidden;
    opacity: 0;
    top: 50%;
    left: 50%;
    z-index:10;
    transform: translate(-50%, -50%);
    overflow-x: hidden; 
    resize: both;
    visibility: visible;
    opacity: 1;
}

.enter{
    font-size: 1em;top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    
#close{    
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    color: black;
    bottom: 1%;
    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)
}