@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;1,700&display=swap);

* {
    font-family: Roboto, sans-serif;
    font-size: 24px;
    margin: 0;
    overflow-x: hidden;
    padding: 0
}

.header {
    align-items: center;
    background-color: #3b4cca;
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 300px;
    justify-content: center;
    width: 100%
}

.header img {
    width: 50px
}

.header h1 {
    margin: 10px
}

.header input {
    border: 1px solid #5869ee;
    border-radius: 5px;
    height: 40px;
    margin-top: 10px;
    padding-left: 10px;
    width: 250px
}

.header input:focus {
    outline: none
}

.header button {
    background-color: #ff3232;
    border: 1px solid #5869ee;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    margin-top: 10px;
    padding: 10px;
    width: 200px
}

.header button:hover {
    background-color: red
}

.displaySection {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 55vh
}

.displaySection img {
    width: 200px
}

.displaySection #species {
    margin-top: 0
}

.displaySection h1,
h3,
h4 {
    margin-top: 10px;
    text-transform: capitalize
}

footer {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top: auto
}

/*# sourceMappingURL=main.39f4610c.css.map*/