*{
    box-sizing:border-box;
}

body {
    background-color:rgb(0, 0, 0)
}

.header-container>a{
    text-align:right center;
    color: red;
}

h1 {
    color:white;
    text-align:center;
}


.grid-container{
    width:100%;
    height:100vh;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap:10px;
    padding:10px;
    grid-template-areas:
        "lion-item   tiger-item   dolphins-item"
        "horse-item   jaguar-item   hyena-item"
        "megalodon-item   snowleopard-item   peregrinefalcon-item"

}

.grid-item {
    display: flex;
    justify-content:center;
    align-items:center;
    flex-wrap: wrap;
    flex: 100%;
    height:100%;
    width:100%;
    padding: 0 4px;
    border: 1px solid rgba(0, 0, 0, 0.8); /*Creates a boreder outline for each frid item*/
}


.lion-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .lion-item:before {
        content: '';
        position: absolute;
        top:0px;
        right:0pc;
        bottom:0px;
        left:0px;
        background-image: url(lion.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity:0.5;
    }

.tiger-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .tiger-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(tiger.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.dolphins-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .dolphins-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(dolphins.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.horse-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .horse-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(horse.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.jaguar-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .jaguar-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(jaguar.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.hyena-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .hyena-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(hyena.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.megalodon-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .megalodon-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(megalodon.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.snowleopard-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .snowleopard-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(snowleopard.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.peregrinefalcon-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .peregrinefalcon-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(peregrinefalcon.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.cobra-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .cobra-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(cobra.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.spider-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .spider-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(spider.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.orca-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .orca-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(orca.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.shark-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .shark-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(shark.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.cheetah-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .cheetah-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(cheetah.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.bee-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .bee-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(bee.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.komodo-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .komodo-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(komodo.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.elk-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .elk-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(elk.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

.lamprey-item {
    position: relative;
    text-align: center;
    padding: 20px;
}

    .lamprey-item:before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0pc;
        bottom: 0px;
        left: 0px;
        background-image: url(lamprey.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;
    }

p{
    font-family: 'Times New Roman', Times, serif;
    font-size:20px;
    position:relative;
    color:white;
    opacity:1;
}