@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');
} 

    #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%;
    }
#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;
  height: 50%;
  width: 50%;
  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%);}

.close{font-size: 1em;
    color: white;top: 2%;
    right: 2%;}
    
    
    span{color: white;
    }    

.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)}