body{
    font-family: monospace;
    margin: auto;
}

#header{
    margin: 0px auto;
    width: 100%;
    color: blueviolet;
    background: rgb(221, 225, 12) ; 
    display: flex;
    justify-content: center;
}

.left-panel{
    font-size: large;
    background: rgb(236, 66, 239);
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

div{
    
    display: flex;
    justify-content: center;
    align-items: center;

}

section{
    display: flex;
}
#footer{
    width: 100%;
    color: blueviolet;
    background: rgb(221, 225, 12) ; 
    display: flex;
    justify-content: center;
}
img{
    width: 25px;
}


.new-data-class{
    color: white;
    font-size: large;
    font-style: italic;
    text-decoration: underline;
    background: green   ;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

#button-panel{
    background: rgb(35, 39, 250);
    width: 50%;
    display: flex;
    gap: 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
h3{
    background: plum;
}

.new-border{
    color: black;
    font-style: italic;
    border: 3px yellow solid;
    border: 10px;
}
.Mammal{
    color: rgb(17, 231, 13);
}
.Bird{
    color: rgb(0, 238, 255);
}
.Reptile{
    color: rgb(68, 9, 9);
}

p{
    padding: 5px;
    text-transform: uppercase;
    font-size: larger;
}


button{
    background: greenyellow;
    cursor: pointer;
    width: 450px;
    height: 70px;
    font-weight: bold;
    border: 3px solid rgb(236, 66, 239);
    border-radius: 50px;
}