/* Handyansicht */

/* Schrift */

body {
    font-family: 'Source Sans Pro', sans-serif;
}

p {
    font-size: 1.1rem;
     -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

/* Logos */

#logos {
    height: 60px;
    margin: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#logos div {
    width: auto;
    height: 100%;
    align-self: center;
}

#logos img {
    width: auto;
    height: 100%;
}

/* Grid */
.flexi {                 
    display: grid;
    grid-template-columns:  repeat(auto-fill, minmax(140px, 1fr)) ;
    padding: 5px;
    margin-bottom: 100px;

}


.grid-item {
    padding: inherit;
}

html {
        overflow-y: scroll;
    }

body {
    background-color:  #e5e5e5;
    overflow-y: overlay;
}


/* Karte */

.karte {
    padding: 17px;
    background-color: #afafaf;
    display: flex;
    flex-direction: column;



}

.karte p {
    margin: 0px;

}

.thumbnail {
    justify-content: center;
}

.thumbnail img {
    display: block;
    margin: auto;
}

.kartenbottom {
    margin-top: 10px;
    justify-content: center;
    display: grid;
    grid-template-columns:  1fr auto 1fr;
}



/* Navigation */

.navbar {
    background-color: #872A2A;
    position: fixed;
    bottom: 0;
    width: 100%;

    display: block;
    padding-left: 10vw;
    padding-right: 10vw;
}


.buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.buttons a {
    background-color: #471616; /* Green */
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    color: #E5E5E5;
    padding: 6px 18px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin-left: 10px;
    margin-right: 10px;
}



/* DetailKarte */

.detailgrid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns:  auto 1fr auto;
    margin-bottom: 100px;
    margin-top: 40px;
}

.detailkarte {
    justify-self: center;
    grid-column-start: 2;
}

.detailkarten-bild img {
    justify-self: center;
    width: 100%;
    height: auto;
}


.detailkarte-body {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-row-gap: 15px;
    grid-column-gap: 10px;
    justify-items: center;
    justify-content: center;
}



#monstername {
    grid-column-start: 2;
    grid-column-end: end;
    justify-self: start;
    align-self: center;
}



#monstertext {
    grid-column-start: 1;
    grid-column-end: end;
    max-width: 400px;
    margin-top: 20px;
    
   padding: 3px;
}

#monstertext p {
    text-align: justify;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

#typicon {
    width: 50px;
}
/* button next */

.next {
  background-color: #4CAF50;
  color: white;
}

.round {
  border-radius: 50%;
}



/* Map */

#chmap {
    margin-bottom: 5px;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#svgmap{
    
    z-index: -1;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10vh;
    margin-bottom: 300px;
    max-width: 1000px;
    


}

/* About */

.about {
    margin-top: 40px;
    margin-bottom: 70px;
    display: block;
    margin-left: 5vw;
    margin-right: 5vw;
    flex-wrap: wrap;
}

#autors {
    bottom: 20px;
}

/* Typ */

#typname {
    text-align: center;
    
    
}

#typ {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 20px;
}

#typenicon {
    margin-right: 20px;
}


/* Unter 330 Pixel Breite */

@media screen and (max-width: 330px) {
    .flexi {
        grid-template-rows:  repeat(auto-fill, minmax(130px, 1fr)) ;
    }

    .karte {
        padding: 10px;
    }

    .navbar {
        padding-left: 5vw;
        padding-right: 5vw;
    }
    
    .buttons a {
    margin-left: 5px;
    margin-right: 5px;
}

    
    .about {
    margin-top: 40px;
    margin-left: 5vw;
    margin-right: 5vw;
    
}

    .detailgrid {
        grid-gap: 5px;

    }

    .detailkarte-body {
        margin-top: 30px;
        grid-row-gap: 3px;
    }

    .detailkarten-bild img {
        width: 300px;
    }

    #typicon {
    width: 40px;
    margin: 0px;
}
    
    #typenicon {
    margin-right: 15px;
}
    #gameLink {
        display: none;
    }

    
}



/* Ab 360 Pixel Breite */

@media screen and (min-width: 360px) {
    .flexi {
        grid-template-columns:  repeat(auto-fill, minmax(150px, 1fr)) ;
    }
    
    #gameLink {
        display: none;
    }


}

/* Ab 540 Pixel Breite */

@media screen and (min-width: 540px) {

    .flexi {
        grid-template-columns:  repeat(auto-fill, minmax(200px, 1fr)) ;
    }

    .detailkarten-bild {
        max-width: 400px;

    }

    /* Navigation */

    .navbar {
        padding-left: 25vw;
        padding-right: 25vw;

    }

      .about {
    margin-top: 60px;
    margin-left: 25vw;
    margin-right: 25vw;
    
}
    #gameLink {
        display: inline;
    }

}

@media screen and (max-height: 700px) { 

    #svgmap{
        margin-top: 10px;
        max-width: 800px;
    }
}




/* Ab 960 Pixel Breite */

@media screen and (min-width: 960px) {

    .flexi { 
        margin-left: 5vw;
        margin-right: 5vw;
        grid-template-columns:  repeat(auto-fill, minmax(250px, 1fr)) ;
    }
    
    #svgmap{
    
    margin-top: 5vh;


}



/* Ab 1360 Pixel Breite */

@media screen and (min-width: 1400px) {
    .flexi { 
        margin-left: 20vw;
        margin-right: 20vw;
    }



    
    


}
}