body{
    background-color: #fef5ed;

}
#box-outer {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    animation: rotate_29 5s infinite;
    background-color: #5ACEF2;
    }

#box-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    rotate: 45deg;
    animation: revolve_29 5s infinite;
    background-color: #FF8062;
    }

#box {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    animation: rotate_29 5s infinite;
    background-color: #FEFEFE;
    }

    @keyframes revolve_29 {
        0% {
         transform: translateX(0);
            }
    
        25% {
        transform: translateY(100%);
            }
    
        50% {
        transform: translateX(100%) translateY(100%);
            }
    
        75% {
        transform: translateX(100%);
            }
    
        100% {
        transform: translateX(0);
            }
        }
    
     @keyframes rotate_29 {
        0% {
        transform: rotate(0deg);
            }
    
        20% {
        transform: rotate(90deg);
            }
    
        40% {
        transform: rotate(180deg);
            }
    
        60% {
        transform: rotate(270deg);
            }
    
        80% {
        transform: rotate(360deg);
            }
    
        100% {
        transform: rotate(0deg);
            }
        }

header{
    text-align: center;
}
 h1{
    font-size: 40px;
    text-transform: uppercase;
 }
h2{
    margin-top: 20px;
    margin-left: 10px;
    text-transform: capitalize;
}
.card-title{
    text-align: center;
}
.card-title a{
    text-decoration: none;
    color: #000;
}
.card {
    transition: 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
nav{
    width: 100%;
    margin: auto;
    background-color: #adc2a9;
    padding: 10px ;
    align-items: center;
}
 nav ul li{
  position: relative;
  margin: 0  30px;
  display: inline-block;
  transition: 0.5s;
} 
 nav ul li a{
    text-decoration: none;
    color:brown;
    text-transform: uppercase;

} 
nav ul li:hover{
    transform: translateX(30px);
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
footer{
    background-color: #adc2a9;
    color: #fef5ed;
}