.main-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    background-color: rgba(85, 0, 0, 0.902);
    background-image: url('../Images/rampart_back.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.container {
    background-color: rgba(5, 3, 0, 0.822);
}
.creature {
    background-color: rgb(33, 125, 62);
}
.list>a{
    color: rgb(121, 57, 0);
}
.list>div>a{
    color: rgb(121, 57, 0);
}
.drop a{
    color: rgb(121, 57, 0);
}
.list a:hover {
    color: rgb(149, 203, 48);
}
.creature>a>img {
    border-color: rgb(69, 38, 0);
    
}
.description{
    font-size: 0px;
    position: absolute;
    transition: 240ms ease;
    list-style: none;
    margin-top: -2px; 

}

.description li{
    color: rgb(176, 176, 176);
}
.name {
    text-align: center;
    font-size: 2em;
    color: rgb(78, 45, 0);
}
.creature:hover{
    background-color: rgb(20, 118, 35);
    border-radius: 10%; 
    height: 124%;
    width: 96%;
    box-shadow: 0px 5px 5px 9px rgb(110, 203, 77);
    margin-top: -30px;
    margin-left: -5px;
}
@media (max-width: 1000px) {
    .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5);
    }
}
@media (max-width: 600px) {
    .container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(9);
    }
    .creature {
        margin-inline: 0;
    }
}