#hero {
    opacity: 1;
    aspect-ratio: 5 / 2;
    background-image: url('../img/hero.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    border: var(--secondary-color) solid 5px;
    border-radius: 10px;
}
*{
    list-style: none;
    text-decoration: none;
}
.orange {
    background-color: rgb(228, 167, 55);
    border-color: rgb(196, 187, 172);
    color: white;

}
.background-orange {
    background-color: rgb(207, 106, 38);
}

.list-items {
    display: block;
    color: black;
    font-weight: bold;
    border: 2px solid var(--secondary-color);
    border-radius: 5px;
    background-color: var(--light-color);
    transition: background-color 0.3s, color 0.3s;
}