.copy {
    text-align: center;
}


/* Food Style */

* {
    font-family: 'Ubuntu', sans-serif;
}

#food {
    background: #ffa726;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    justify-items: center;
    align-items: center;
}

.card {
    width: 80%;
    margin: 10%;
}

#info {
    text-align: center;
    margin: 10%;
}

p {
    font-size: 20px;
    text-align: justify;
}


/* Biodiversity style */

@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Kodchasan&display=swap');
h1 {
    font-family: 'Kodchasan', sans-serif;
    font-size: 3em;
    margin-top: 60%;
    color: white
}

h2 {
    font-family: 'Kodchasan', sans-serif;
    font-size: 1.3em;
    color: black;
    margin: 2%;
    margin-top: 5%
}

h3 {
    font-family: 'Kodchasan', sans-serif;
    font-size: 1.6em;
    color: black;
    text-align: left;
    margin-bottom: 0%;
}

.cardBox {
    display: inline-block;
    font-size: 1.2em;
    margin: 1% 0 0 1%;
    perspective: 800px;
    transition: all 0.3s ease 0s;
    width: 15%;
    margin-left: 9%;
}

.front {
    background-image: url("./assets/Sceloporus-spp.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.front-plateu {
    background-image: url("./assets/Phrynosoma_orbiculare.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.front-crotalus {
    background-image: url("./assets/Crotalus_ravus.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.front-axolotl {
    background-image: url("http://cdn.mexiconewsnetwork.com/uploads/images/21828ajolote.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.front-tlaloc {
    background-image: url("https://static.inaturalist.org/photos/17258129/medium.jpg?1545329324");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.front-froggy {
    background-image: url("https://cdn-5befa143f911c80db489a19d.closte.com/wp-content/uploads/2018/12/rana-interna-2.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.card-b .back a:hover {
    background: #fff;
    color: #333;
    text-shadow: 0 0 1px #333;
}

.cardBox:hover .card-b {
    transform: rotateY( 180deg);
}

.card-b {
    margin: 10%;
    background: #F0F4C3;
    cursor: default;
    height: 450px;
    transform-style: preserve-3d;
    transition: transform 0.4s ease 0s;
    width: 150%;
    -webkit-animation: giro 1s 1;
    animation: giro 1s 1;
    border: solid 2px #8BC34A;
    border-radius: 30px;
}

.card-b .front,
.card-b .back {
    font-family: 'Noto Sans', sans-serif;
    backface-visibility: hidden;
    box-sizing: border-box;
    color: white;
    display: inline-block;
    font-size: 0.5em;
    height: 100%;
    padding: 0.8em;
    position: absolute;
    text-align: center;
    width: 100%;
}

.card-max {
    width: 200%;
}

.card-b .back {
    transform: rotateY( 180deg);
}

.cardBox .card-b {
    -webkit-animation: giro 2.5s 1;
    animation: giro 2.5s 1;
}

.imagen-animal {
    width: 100%;
    height: 219px;
}

.cardBox:nth-child(1) .card-b .back {
    background: cornflowerblue;
}

.cardBox:nth-child(2) .card-b .back {
    background: orange;
}

.cardBox:nth-child(3) .card-b .back {
    background: yellowgreen;
}

.cardBox:nth-child(4) .card-b .back {
    background: tomato;
}

@-webkit-keyframes giro {
    from {
        transform: rotateY( 180deg);
    }
    to {
        transform: rotateY( 0deg);
    }
}

@keyframes giro {
    from {
        transform: rotateY( 180deg);
    }
    to {
        transform: rotateY( 0deg);
    }
}

.front-hummingbird {
    background-image: url("./assets/Lampornis_clemenciae_2.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.front-mockingbird {
    background-image: url("./assets/Mimus_polyglottos.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.front-pelican {
    background-image: url("./assets/Pelecanus_erithrorhynchos.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.front-sceloporus {
    background-image: url("./assets/Sceloporus-spp.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.front-horned {
    background-image: url("./assets/Phrynosoma_orbiculare.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.front-kinosternon {
    background-image: url("./assets/Kinosternon_integrum.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.front-romerolagus {
    background-image: url("./assets/Teporingo.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.front-bassaricus {
    background-image: url("./assets/cacomixtle.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.front-didelphis {
    background-image: url("./assets/Tlacuache.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}

.front-gray {
    background-image: url("./assets/zorra_gris.jpeg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
}