@import "_reset.css";

/* ABOUT*/
a:link {
    text-decoration: none;
    color: black;
}
a:visited {
    text-decoration: none;
    color: black;
}
a:hover {
    color: rgb(142, 142, 142);
}
.back {
    font-size: 8em;
    padding-bottom: 0.5em;
    padding-left: 0.3em;
    color: #000;
    text-decoration: none;
    color: black;
}
.about {
    font-size: 6em;
    padding-left: 1.3em;
    
}


/* BUTTON RESET*/

button {
  background: transparent;
  box-shadow: 0px 0px 0px transparent;
  border: 0px solid transparent;
  text-shadow: 0px 0px 0px transparent;
}

button:hover {
  background: transparent;
  box-shadow: 0px 0px 0px transparent;
  border: 0px solid transparent;
  text-shadow: 0px 0px 0px transparent;
}

button:active {
  outline: none;
  border: none;
}

button:focus {
  outline: 0;
}

/* BUTTON "+" */
button {
    color: inherit;
    font-weight: 500;
    display: flex;
    font-size: 1.75em;
    margin-right: 0.5em; 
    padding-bottom: 0.1em; /*abstand zu #more*/
}
button:hover {
    color: rgb(142, 142, 142);
    
}

/* GENERAL */
html {
    font-size: 0.625em; /* 10px */
    font-family: 'helvetica neue', monospace;
    font-weight: 600;
}

html, body, main  {
     background-color: white;
    }
img  {
    width: auto;
    padding-top: 1em; 
    display: block;
    max-width: 100vw;
    max-height: 105vh;
}
.scale-width {
    width: 100vw;
    height: auto
}

.lime {
    background-color: rgb(204, 255, 0); /* lime: (204, 255, 0)*/
}

.violet {
    background-color: rgb(114, 45, 167); /* violet: (114, 45, 167)*/
}
footer  {
    z-index: 3;
    position: fixed;
    top: 0.1em;
    bottom: 0.2em;
    left: 0.3em;
    mix-blend-mode: difference;
    color: white;
    font-size: 5em;
}

.footer > div {
    display: none;
}

.column {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.column li:first-child {
    margin-top: 50vh;
}

.symbio {
    width: 100%;
}

/* TEXT DROP-DOWN*/

#more  {
    display:none;
    font-size: 1em;
    mix-blend-mode: none;
    padding: 1em;
    padding-top: 1.5em;
    padding-left: 1.2em;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: -30;
}
/* BG DROP-DOWN */
.more {
    background-color: rgb(0, 31, 255); /*VIOLET*/
}
.orange {
     background-color: rgb(255, 81, 0); /*ORANGE*/
}
.lime {
     background-color: rgb(204, 255, 0); /*LIME*/
}


/*_________________*/
/* BREAKINGPOINTS */


@media screen and (max-width: 800px) {
 #more {
     word-wrap: break-word;
  }
.about {
    font-size: 4em;
    }
    .back {
        font-size: 6em;
    }
    
img {
    width: 90vw;
    }
    
    footer {
        
    }
.white {
       height: 30%;
}
.symbio {
    width: 100%;
}

/* MIDDLE SIZE*/
@media screen and (max-width: 500px) {
 #more {
    font-size: 1.6em;
    padding-left: 1.2em;
  }
.about {
    font-size: 2.5em;
    }
.back {
    font-size: 5em;
    } 
footer {
    font-size: 1.6em;
}
button  {
    font-size: 3em;
    margin-left:
    margin-top: -0.5em;
}
img {
    width: 100vw;
    padding-top: 1em;
}
.white {
       height: 40em; 
    }
.symbio {
    width: 100%;
}
}