body {
    background-color: #b3b3d7;
}

.logo img {
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

header {
    border: 2px solid;
    background-color: #D1CAB0;
}

.nav-btns a {
    background-color: #555; /* Box background color */
    color: white; /* Text color */
    text-decoration: none; /* Removes underline */
    padding: 2.5px 20px; /* Box padding */
    border-radius: 4px; /* Slight rounding for the box */
    font-family: Arial, sans-serif;
    transition: background-color 0.3s ease; /* Smooth hover effect */

}

.nav-btns a:hover {
    background-color: #777; /* Lighter background on hover */
  }

#animations {
    display: flex;

}

.ani-1 {
    border: 2px solid black;
    padding: 20px;
    border-radius: 10px;
    width: fit-content;
    background-color:blueviolet;
    font-size: small;
    color: rgb(255, 255, 255);
    margin: 20px;
}

.ani-1 img {
    width: 200px;
    height: 200px;
}

.ani-2 {
    border: 2px solid rgb(0, 0, 0);
    padding: 20px;
    border-radius: 10px;
    width: fit-content;
    background-color:blueviolet;
    font-size: small;
    color: rgb(255, 255, 255);
    margin: 20px;
}

.ani-2 img {
    width: 200px;
    height: 200px;
}

.ani-3 {
    border: 2px solid rgb(0, 0, 0);
    padding: 20px;
    border-radius: 10px;
    width: fit-content;
    background-color:blueviolet;
    font-size: small;
    color: rgb(255, 255, 255);
    margin: 20px;
}

.ani-3 img {
    width: 200px;
    height: 200px;
}

.ani-4 {
    border: 2px solid rgb(0, 0, 0);
    padding: 20px;
    border-radius: 10px;
    width: fit-content;
    background-color:blueviolet;
    font-size: small;
    color: rgb(255, 255, 255);
    margin: 20px;
}

.ani-4 img {
    width: 200px;
    height: 200px;
}