* {
    margin: 0;
    padding: 0;
    font-family: 'Oswald', sans-serif;
}

body {
    background-color: white;
}

h2 {
    position: absolute;
    color: white;
    transition: .25s cubic-bezier(.87,.28,.44,.74);  
}

@keyframes hoverable {
    0% {text-shadow: 10px -5px 20px black;}
    100% {text-shadow: 80px -45px 1px orange;}
}

.swap > h2 {
    animation: hoverable 2s alternate-reverse 0s infinite  cubic-bezier(.13,.55,.57,.86);
}

p {
    position: absolute;
    color: black;
    background-color: orange;
    text-align: center;
    border-radius: 5px;
    opacity: 0;
    transition: .25s cubic-bezier(.87,.28,.44,.74);
    transform: rotateY(-180deg);
}

.firstPage {
    display: flex;
    position: fixed;
    flex-direction: row;
    transition: 0.25s cubic-bezier(.08,.79,.62,.91);
    background: linear-gradient(90deg, white, black, #9ACD32, #7FFF00, #008000, #00FF00, #006400);
}

.firstPage > .welcome {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 40vw;
}

.dummy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100dvh;
    width: 100vw;
    outline: 1px solid black;
}

@media only screen and (max-width: 600px) {
    .dummy {
      width: 200vw;
    }
  }

.swap {
    color: white;
    transition: .5s cubic-bezier(.14,.79,.58,.94);
}

/* .swap:hover {
    background-color: orange;
} */ 

.swap:hover h2 {
    opacity: 0;
    transform: rotateY(180deg);
}

.swap:hover p {
    transform: rotateY(0deg);
    opacity: 1;
    margin-bottom: 4vh;
}

.buttons {
    position: absolute;
    margin: 3vh;
    margin-bottom: 2vh;
    /* border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black; */
    padding-top: 6vh;
    border-radius: 12px;
}

.buttons > .verschieben {
    text-align: center;
    font-size: auto;
    opacity: 80%;
    border-radius: 12px;
    user-select: none;
    transition: 1s cubic-bezier(0,1.16,.66,1.03);
}

.buttons > .verschieben:active {
    transform: scale(0.75);
}

.buttons > .right, .buttons > .left {
    padding: calc(2vh + 2vw);
    border: none;
    border-radius: 10%;
    color: white;
    background: black;
    transition: 1s cubic-bezier(0,1.16,.66,1.03);
    opacity: 75%;
}

.buttons > .right:active, .buttons > .left:active {
    padding: calc(2vh + 1.8vw);
    border-radius: 5%;
    border: none;
    color: black;
    background: #39FF14;
}

i {
    font-size: 8vh;
    color: white;
    opacity: 90%;
}


.hidden {
    opacity: 0;
    /* transition: 1s cubic-bezier(.12,.66,.29,.85); */
    transition: 2s cubic-bezier(.58,.3,.03,.89);
    filter: blur(8px);
    transform: scale(0.1);
}

.shown {   
    /* transform: scaleY(1);  */
    filter: blur(0);
    opacity: 1;
    transform: scale(1);
}

.welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.welcome h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: orange;
}

@keyframes welcome {
    0% {
        transform: translateY(0vh) scale(100%);
    }

    40% {
        transform: translateY(-20vh) scale(140%);
    }
    50% {
        transform: rotateX(60deg);
    }
    80% {
        transform: rotateX(-60deg) translateY(20vh) scale(100%);
    }
    100% {
        transform: translateY(0vh);
    }
}

.welcome .phylogeny {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: transparent;
    filter: invert(100%);
    margin-top: 20vh;
    font-size: 10vh;
    text-shadow: 10px -10px 0px black, 10px -9px 20px lightgreen, 10px -9px 8px blue;
    animation: welcome 10s alternate-reverse 1s 2 cubic-bezier(.92,.2,.24,.99);
    transition: 1s cubic-bezier(.54,.35,.25,.85);
}

.welcome .phylogeny:hover {
    transform: scale(110%);
}

.welcome i {
    color: black;
    font-size: 150vw;
    position: absolute;
    z-index: -1;
    overflow: hidden;
}

.treeOne {
    display: grid;
    /* background-image: url(treeOne.png); */
    /* background-size: 100% 100%; */
    grid-template-areas: 
    ". . apusmonada"
    "amorphea obazoa berivates"
    "impressum amoebozoa opisthokonta"
    ;
    outline: 0px solid black;
    width: 100%;
    height: 100%;
    background-image: url(treeOne.svg);
    background-size: 100% 100%;
}

.impressum {
    grid-area: impressum;
}

.standart {
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 0px solid black;
}

.amorphea {
    grid-area: amorphea;
}

.amoebozoa {
    grid-area: amoebozoa;
}

.obazoa {
    grid-area: obazoa;
}

.apusmonada {
    grid-area: apusmonada;
}

.berivates {
    grid-area: berivates;
}

.opisthokonta {
    grid-area: opisthokonta;
}

.treeTwo {
    display: grid;
    grid-template-areas: 
    ". . basidiomycota"
    ". . ascomycota"
    "holomycota fungi zygomycota"
    ". . glomeromycota"
    ". . chytridiomycota"
    ". ichthyosporea ."
    "holozoa filasterea ctenophora"
    ". choanoflagellata porifera"
    ". metazoa parahoxozoa";
    width: 100%;
    height: 100%;
    background-image: url(treeTwo.svg);
    background-size: 100% 100%;
}

.treeThree {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-areas: "";
}

.holomycota {
    grid-area: holomycota;
}

.holozoa {
    grid-area: holozoa;
}

.fungi {
    grid-area: fungi;
}

.ichthyosporea {
    grid-area: ichthyosporea;
}

.filasterea {
    grid-area: filasterea;
}

.choanoflagellata {
    grid-area: choanoflagellata;
}

.metazoa {
    grid-area: metazoa;
}

.basidiomycota {
    grid-area: basidiomycota;
}

.ascomycota {
    grid-area: ascomycota;
}

.zygomycota {
    grid-area: zygomycota;
}

.glomeromycota {
    grid-area: glomeromycota;
}

.chytridiomycota {
    grid-area: chytridiomycota;
}

.ctenophora {
    grid-area: ctenophora;
}

.porifera {
    grid-area: porifera;
}

.parahoxozoa {
    grid-area: parahoxozoa;
}

.treeThree {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas: 
    "calcarea anthozoa ."
    "hexactinellida myxozoa xenoturbella"
    "demospongiae medusozoa acoelomorpha"
    "placozoa . ."
    "cnidaria xenacoelomorpha deuterostomia"
    "bilateria nephrozoa protostomia"
    ;
    background-image: url(treeThree.svg);
    background-size: 100% 100%;
}

.calcarea {
    grid-area: calcarea;
}

.hexactinellida {
    grid-area: hexactinellida;
}

.demospongiae {
    grid-area: demospongiae;
}

.placozoa {
    grid-area: placozoa;
}

.cnidaria {
    grid-area: cnidaria;
}

.bilateria {
    grid-area: bilateria;
}

.anthozoa {
    grid-area: anthozoa;
}

.myxozoa {
    grid-area: myxozoa;
}

.medusozoa {
    grid-area: medusozoa;
}

.xenacoelomorpha {
    grid-area: xenacoelomorpha;
}

.nephrozoa {
    grid-area: nephrozoa;
}

.xenoturbella {
    grid-area: xenoturbella;
}

.acoelomorpha {
    grid-area: acoelomorpha;
}

.deuterostomia {
    grid-area: deuterostomia;
    transition: .5s;
}

.deuterostomia:hover {
    margin-bottom: -4vh;
    transition: .5s;
}

.protostomia {
    grid-area: protostomia;
}

.treeFour {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas: 
    "nemertodermatida . crinozoa"
    "acoela echinodermata asterozoa"
    ". hemichordata echinozoa"
    "ambulacraria . enteropneusta"
    "chordata . pterobranchia"
    ". cephalochordata tunicata"
    ". olfactores craniota"
    ". . ."
    ;
    background-image: url(treeFour.svg);
    background-size: 100% 100%;
}

.nemertodermatida {
    grid-area: nemertodermatida;
}
.acoela {
    grid-area: acoela;
}
.ambulacraria {
    grid-area: ambulacraria;
}
.chordata {
    grid-area: chordata;
}
.echinodermata {
    grid-area: echinodermata;
}
.hemichordata {
    grid-area: hemichordata;
}
.cephalochordata {
    grid-area: cephalochordata;
}
.olfactores {
    grid-area: olfactores;
}
.crinozoa {
    grid-area: crinozoa;
}
.asterozoa {
    grid-area: asterozoa;
}
.echinozoa {
    grid-area: echinozoa;
}
.enteropneusta {
    grid-area: enteropneusta;
}
.pterobranchia {
    grid-area: pterobranchia;
}
.tunicata {
    grid-area: tunicata;
}
.craniota {
    grid-area: craniota;
}

.treeFive {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas: 
    "crinoidea . ."
    "asteroidea . ."
    "ophiuroidea myxini actinopterygii"
    "echinoidea petromyzontida ."
    "holothuroidea . sarcopterygii"
    "cyclostomata chondrichthyes ."
    "gnathostomata osteognathostomata ."
    ". . ."
    ;
    background-image: url(treeFive.svg);
    background-size: 100% 100%;
}


.crinoidea {
    grid-area: crinoidea;
}
.asteroidea {
    grid-area: asteroidea;
}
.ophiuroidea {
    grid-area: ophiuroidea;
}
.echinoidea {
    grid-area: echinoidea;
}
.holothuroidea {
    grid-area: holothuroidea;
}
.cyclostomata {
    grid-area: cyclostomata;
}
.gnathostomata {
    grid-area: gnathostomata;
}

.gnathostomata:hover {
    transform: translate(5px, -35px);
}

.myxini {
    grid-area: myxini;
}
.petromyzontida {
    grid-area: petromyzontida;
}
.chondrichthyes {
    grid-area: chondrichthyes;
}
.osteognathostomata {
    grid-area: osteognathostomata;
}
.actinopterygii {
    grid-area: actinopterygii;
}
.sarcopterygii {
    grid-area: sarcopterygii;
}

.treeSix {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas: 
    "coelacanthimorpha latimeriidae latimeria"
    "dipnoi . gymnophiona"
    ". lissamphibia caudata"
    "tetrapoda . anura"
    ". amniota synapsida"
    ". . diapsida"
    ". . ."
    ;
    background-image: url(treeSix.svg);
    background-size: 100% 100%;
}

.coelacanthimorpha {
    grid-area: coelacanthimorpha;
}
.dipnoi {
    grid-area: dipnoi;
}
.tetrapoda {
    grid-area: tetrapoda;
}
.latimeriidae {
    grid-area: latimeriidae;
}
.lissamphibia {
    grid-area: lissamphibia;
}
.amniota {
    grid-area: amniota;
}
.latimeria {
    grid-area: latimeria;
}
.gmynophiona {
    grid-area: gymnophiona;
}
.caudata {
    grid-area: caudata;
}
.anura {
    grid-area: anura;
}
.synapsida {
    grid-area: synapsida;
}
.diapsida {
    grid-area: diapsida;
}

.treeSeven {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas: 
    "varanopidae . ."
    "edaphosauridae . ."
    "therapsida mammalia squamata"
    "caseasauria . sphenodontida"
    "sphenacodontidae lepidosauria ."
    "ophiacontidae  testudines crocodylia"
    ". archosauria aves"
    ". . ."
    ;
    background-image: url(treeSeven.svg);
    background-size: 100% 100%;
}

.varanopidae {
    grid-area: varanopidae;
}
.edaphosauridae {
    grid-area: edaphosauridae;
}
.therapsida {
    grid-area: therapsida;
}
.caseasauria {
    grid-area: caseasauria;
}
.sphenacodontidae {
    grid-area: sphenacodontidae;
}
.ophiacontidae {
    grid-area: ophiacontidae;
}
.mammalia {
    grid-area: mammalia;
}
.lepidosauria {
    grid-area: lepidosauria;
}
.testudines {
    grid-area: testudines;
}
.archosauria {
    grid-area: archosauria;
}
.squamata {
    grid-area: squamata;
}
.sphenodontida {
    grid-area: sphenodontida;
}
.crocodylia {
    grid-area: crocodylia;
}
.aves {
    grid-area: aves;
}

.treeEight {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas: 
    "crocodylidae . ."
    "alligatoridae . ."
    "gavialidae . protostomia"
    "palaeognathae galloanserae protostomia"
    "neognathae neoaves ."
    ". . ."
    ;
    background-image: url(treeEight.svg);
    background-size: 100% 100%;
}

.crocodylidae {
    grid-area: crocodylidae;
}
.alligatoridae {
    grid-area: alligatoridae;
}
.gavialidae {
    grid-area: gavialidae;
}
.palaeognathae {
    grid-area: palaeognathae;
}
.neognathae {
    grid-area: neognathae;
}
.galloanserae {
    grid-area: galloanserae;
}
.neoaves {
    grid-area: neoaves;
}

.treeNine {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas: 
    ". . nematoida"
    ". cycloneuralia scalidophora"
    "ecdysozoa panarthropoda tardigrada"
    ". . onychophora"
    ". . euarthropoda"
    "lophotrochozoa . ."
    ;
    background-image: url(treeNine.svg);
    background-size: 100% 100%;
}

.ecdysozoa {
    grid-area: ecdysozoa;
}
.lophotrochozoa {
    grid-area: lophotrochozoa;
}
.cycloneuralia {
    grid-area: cycloneuralia;
}
.panarthropoda {
    grid-area: panarthropoda;
}
.nematoida {
    grid-area: nematoida;
}
.scalidophora {
    grid-area: scalidophora;
}
.tardigrada {
    grid-area: tardigrada;
}
.onychophora {
    grid-area: onychophora;
}
.euarthropoda {
    grid-area: euarthropoda;
}

.treeTen {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas: 
    "nematoda . xiphosura"
    "nematomorpha pantopoda arachnida"
    "priapulida euchelicerata arachnida"
    "kinorhyncha . chilopoda"
    "loricifera . progoneata"
    "chelicerata myriapoda crustacea"
    "mandibulata pancrustacea hexapoda"
    ". . ."
    ;
    background-image: url(treeTen.svg);
    background-size: 100% 100%;
}

.nematoda {
    grid-area: nematoda;
}  
.nematomorpha {
    grid-area: nematomorpha;
}
.priapulida {
    grid-area: priapulida;
}
.kinorhyncha {
    grid-area: kinorhyncha;
}
.loricifera {
    grid-area: loricifera;
}
.chelicerata {
    grid-area: chelicerata;
}
.mandibulata {
    grid-area: mandibulata;
}
.pantopoda {
    grid-area: pantopoda;
}
.euchelicerata {
    grid-area: euchelicerata;
}
.myriapoda {
    grid-area: myriapoda;
}
.pancrustacea {
    grid-area: pancrustacea;
}
.xiphosura {
    grid-area: xiphosura;
}    
.arachnida {
    grid-area: arachnida;
}   
.chilopoda {
    grid-area: chilopoda;
}                            
.progoneata {
    grid-area: progoneata;
}   
.crustacea {
    grid-area: crustacea;
}   
.hexapoda {
    grid-area: hexapoda;
}     

.treeEleven {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas: 
    "acariformes . ostracoda"
    "arachnopulmonata scorpiones mystacocarida"
    "parasitoformes tetrapulmonata branchiura"
    "opiliones . pentastomida"
    "symphyla . malcostraca"
    "diagnatha pauropoda thecostraca"
    ". diplopoda copepoda"
    ". . branchiopoda"
    ". . xenocarida"
    ". . ."
    ". . ."
    ;
    background-image: url(treeEleven.svg);
    background-size: 100% 100%;
}

.acariformes {
    grid-area: acariformes;
}
.arachnopulmonata {
    grid-area: arachnopulmonata;
}
.parasitoformes {
    grid-area: parasitoformes;
}
.opiliones {
    grid-area: opiliones;
}
.symphyla {
    grid-area: symphyla;
}
.diagnatha {
    grid-area: diagnatha;
}
.scorpiones {
    grid-area: scorpiones;
}
.tetrapulmonata {
    grid-area: tetrapulmonata;
}
.pauropoda {
    grid-area: pauropoda;
}
.diplopoda {
    grid-area: diplopoda;
}
.ostracoda {
    grid-area: ostracoda;
}
.mystacocarida {
    grid-area: mystacocarida;
}
.branchiura {
    grid-area: branchiura;
}
.pentastomida {
    grid-area: pentastomida;
}
.malacostraca {
    grid-area: malcostraca;
}
.thecostraca {
    grid-area: thecostraca;
}
.copepoda {
    grid-area: copepoda;
}
.branchiopoda {
    grid-area: branchiopoda;
}
.xenocarida {
    grid-area: xenocarida;
}

.treeTwelve {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas: 
    "eumalacostraca . archaeognatha"
    "stomatopoda ectognatha dicondylia"
    "leptostraca . ."
    " cephalocarida entognatha diplura"
    "remipedia . ellipura"
    ". . ."
    ;
    background-image: url(treeTwelve.svg);
    background-size: 100% 100%;
}

.eumalacostraca {
    grid-area: eumalacostraca;
}
.stomatopoda {
    grid-area: stomatopoda;
}
.leptostraca {
    grid-area: leptostraca;
}
.cephalocarida {
    grid-area: cephalocarida;
}
.remipedia {
    grid-area: remipedia;
}
.ectognatha {
    grid-area: ectognatha;
}
.entognatha {
    grid-area: entognatha;
}
.archaeognatha {
    grid-area: archaeognatha;
}
.dicondylia {
    grid-area: dicondylia;
}
.diplura {
    grid-area: diplura;
}
.ellipura {
    grid-area: ellipura;
}

.treeThirteen {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas:
    "zygentoma . odonata"
    "pterygota palaeoptera ephemeroptera"
    ". neoptera polyneoptera"
    ". . condylognatha"
    "protura . psocodea"
    "collembola . holometabola"
    ". . ."
    ;
    background-image: url(treeThirteen.svg);
    background-size: 100% 100%;
}

.zygentoma {
    grid-area: zygentoma;
}
.pterygota {
    grid-area: pterygota;
}
.protura {
    grid-area: protura;
}
.collembola {
    grid-area: collembola;
}
.palaeoptera {
    grid-area: palaeoptera;
}
.neoptera {
    grid-area: neoptera;
}
.odonata {
    grid-area: odonata;
}
.ephemeroptera {
    grid-area: ephemeroptera;
}
.polyneoptera {
    grid-area: polyneoptera;
}
.condylognatha {
    grid-area: condylognatha;
}
.psocodea {
    grid-area: psocodea;
}
.holometabola {
    grid-area: holometabola;
}

.treeFourteen {
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-areas:
    "lophotrochozoa"
    ;
    background-image: url(treeFourteen.svg);
    background-size: 100% 100%;
}