@import url('https://fonts.googleapis.com/css2?family=Libertinus+Serif:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body {
    /* overflow: hidden; */
    font-family: 'Nunito', sans-serif;
    font-weight: bold;
    
}
header{
    height: 100vh;
    width:100%
}
/* <!-----------------------------------------side navber-------------------------------------> */

.side-navber i{
    display: flex;
    flex-direction: column; 
    margin-left: 32px;
    font-size: xx-large;
    margin-top: 44px;
    animation: slide-in 1s ease-out;
    animation-delay: 0.5s;
}

@keyframes slide-in{
    0%{
        transform: translateX(-100%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}
.design a{
    position: relative;
    top: 57rem;
    right: 45rem;
    display: block;
    transform: rotate(90deg);
    margin-bottom: 80px;
    font-size: x-large;
    color: #000;
    transition: all .5s ease;
    animation: rotate-in 1s ease-out;
    animation-delay: 1s;

}
@keyframes rotate-in{
    0%{
        transform: rotate(0deg) scale(0);
        opacity: 0;
    }
    100%{
        transform: rotate(90deg) scale(1);
        opacity: 1;
    }
}
/* <!--------------------top navber----------------------------> */

.top-navber{
    position: absolute;
    top: 2rem;
    right: 3rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    animation: fade-in 1s ease-out;

}
@keyframes fade-in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.top-navber::after{
    animation: pulse 2s infinite;
    content: "";
    height: 10px;
    width:10px ;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    right: 1px;
    top: 4px
    
}

@keyframes pulse{
    0%{
        transform: scale(1);
        opacity: 1;
    }
    50%{
        transform: scale(1.5);
        opacity: 0.5;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}
.top-navber .top a{
    color: #000;
    font-size: 1.2rem;
    margin-right: 2rem;
    animation: slide-in-right 1s ease-out;
    transition: all;
}
.design a:hover,
.top a:hover{
    text-shadow: 0 0 10px red;
}
@keyframes slide-in-right{
    0%{
        transform: translateX(100%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}
.top-navbar.top a:first-child{
    color: red;
}
.icons a{
    color: #000;
    font-size: 2rem;
    margin-right: 10px;
    animation: bounce is ease-out infinite ;
}
@keyframes bounce{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-10px);
    }
    
}
.icons img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position:relative;
    top: 5px;
}
/* <!-----------------------------------------food bar-------------------------------------> */ 
.food{
    
    display: flex;
    justify-content: space-around;
    align-items: center;
    animation: slide-in-left 1s ease-out;
}
@keyframes slide-in-left{
    0%{
        transform: translateX(-100%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}
.order{
    position: absolute;
    top: 15rem;
    left:61rem;
    width:281%;
    font-size:1.2rem;
    animation: fade-in 1s ease-out;
}
@keyframes fade-in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.order h1{
    font-size: 5rem;
    right: 88px;
    position: relative;
    text-shadow: 0 0 32px red;
    animation: text-flicker 2s linear infinite;
    width:197%
    
    
}
@keyframes text-flicker{
    0%{
        text-shadow: 0 0 32px red;
    }
    50%{
        text-shadow: 0 0 64px red;
    }
    100%{
        text-shadow: 0 0 32px red;
    }
}
.order p{
    
    position: relative;
    animation: slide-in 1s ease-out;
    right: 5rem;
    width: 11%
    
}
@keyframes slide-in{
    0%{
        transform: translateX(100%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}
.oreder a{
    color: white;
    font-size: 1,8rem;
    position: relative;
    top: 22px;
    left: 91px;
    padding: 6px;
    border : 2px solid black;
    background-color: black;
    animation: pulse 1s infinite;
}
@keyframes pulse{
    0%{
        transform: scale(1);
        
    }
    50%{
        transform: scale(1.1);
        
    }
    100%{
        transform: scale(1);
        
    }
}
.anker{
    color:red;
    position: relative;
    left:-77px;
    top:22px;
    font-size: 2.1rem;
    margin-right:27px;
    animation: rotate 2s linear infinite;
}
@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.sp{
    position:absolute;
    left: -80px;
    top: 15rem;
    font-size: 12px;
    animation: bounce 1s infinite;


}
@keyframes bounce{
    0% ,
    100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-10px);
    }
    
}
.foodbar{
    position:absolute;
    top: 0;
    left: 13rem;
    background-color: rgb(47 45 45);
    width: 25%;
    height: 69vh;
    animation: slide-in-left 1s ease-out;
}
@keyframes slide-in-left{
    0%{
        transform: translateX(-100%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}
.foodbar img{
    width:163%;
    height: 75vh;
    position: relative;
    top: -1rem;
    left: -9rem;
    filter: drop-shadow(0 0 24px black);
    animation: zoom-in 1s ease-out;
}
@keyframes zoom-in{
    0%{
        transform: scale(0);
        opacity: 0;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}
.foodbar span{
    color: white;
    position: relative;
    left: 6rem;
    font-size: 3rem;
    animation: fade-in 1s ease-out;

}
@keyframes fade-in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
/* footer  */

.footer{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    position:absolute;
    width: 58%;
    left: 39rem;
    top: 39rem;
    animation: slide-in -bottom 1s ease-out;
}
@keyframes slide-in-bottom {
    0%{
        transform: translateY(100%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
.images{
    width:156px;
    height:23vh;
    text-align: center;
    background-color: rgb(47 45 45);
    border-radius: 10px;
    animation: fade-in 1s ease-out;
    box-shadow: 12px 14px 58px black;
}
.images img
{
    
    position: absolute;
    width: 13%;
    top: -2rem;
    border-radius:5px ;
    animation: zoom-in 1s ease-out;

    
}
@keyframes zoom-in{
    0%{
        transform: scale(0);
        opacity: 0;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}
.foodbar span{
    color: white;
    position: relative;
    left: 6rem;
    font-size: 3rem;
    animation: fade-in 1s ease-out;

}
@keyframes fade-in{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.footer{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    position:absolute;
    width: 58%;
    left: 39rem;
    top: 39rem;
    animation: slide-in 1s ease-out;
}
@keyframes slide-in{
    0%{
        transform: translateY(100%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
.images{
    width: 156px;
    height: 23vh;
    text-align: center;
    background-color: rgb(47 45 45);
    border-radius: 10px;
    animation: fade-in 1s ease-out;
    box-shadow: 12px 14px 58px black;
}
.images img{
    width: 13%;
    position: absolute;
    top: -2rem;
    border-radius: 5px;
    animation:bounce 1s infinite; 
}
@keyframes bounce{
    0% ,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-10px);
    }
}
.images span{
   position: relative;
   top:3rem;
   right: 35px;
   color: white;
   font-weight: bold;
   font-size: 18px;
   animation: slide-in-right 1s ease-out;
}
@keyframes slide-in-right{
    0%{
        transform: translateX(100%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}
 .images p{
     position: relative;
     top: 5rem;
     color: white;
     margin: -19px ;
     font-size: 14px;
     animation: scale-in 1s ease-out;

 }
 .rating{
    color:gold;
    margin-top: 106px;
    animation: scale-in 1s ease-out;

 }
@keyframes scale-in{
    0%{
        transform: scale(0);
        opacity: 0;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}
  .rating .fa-regular{
    color:#ccc;

  }  
    .images a{
        display: inline-block;
        background-color: #333;
        color: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        text-decoration: none;
        transition: background-color 0.3s ;
        animation: pulse 1s infinite;

    }
    @keyframes pulse{
        0%{
            transform: scale(1);
        }
        50%{
            transform: scale(1.1);
        }
        100%{
            transform: scale(1);
        }
    }
    .images a:hover{
        background-color: #555;
    }
    /* <!-----------------------------------------social icons------------------------------------> 
 */
 .social {
    display: flex;
    justify-content: center;position: absolute;
    bottom: 0;
    animation: slide-in 1s ease-out;
 }
@keyframes slide-in{
    0%{
        transform: translateY(100%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}
.social a {
    margin: 0 10px;
    color: #333;
    font-size: 2rem;
    transition: color 0.3s ;
    animation: scale-in 1s ease-out;

}
@keyframes scale-in{
    0%{
        transform: scale(0);
        opacity: 0;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}
.social a:hover {
    color:#666;
    animation: pulse 0.5s infinite;

}
@keyframes pulse{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}
.social .fa-instagram:hover{
    color: red;

}
.social .fa-github:hover{
    color: red;

}
.social .fa-linkedin:hover{
    color: #0077b5;

}
.social .fa-google:hover{
    color: #db4437;

}
.social .fa-facebook:hover{
    color: #3b5998;

}
.item img {
    transition: outline 0.3s ease-in-out;
    outline: 4px solid transparent;
    /* intial outline */
}
.item img.animated{
    outline: 4px solid #ff9800;
    outline-offset: 8px;
    animation: pulse 1s infinite;

}
@keyframes pulse {
    0% {
        outline-color:#ff9800;

    }
    50% {
        outline-color: #ff5722;

    }
    100% {
        outline-color: #ff9800;

    }
}
/* toggle */

.theme-switch{
    display:flex;
    align-items: center;
    cursor: none;

}
.theme-switch-checkbox{
    display: none;

}
.theme-switch-label{
    display: flex;
    align-items: center;
    margin-left: 10px;
 }
 .theme-switch-label i{
    margin-right: 5px;

 }

 /* dark mode styles */
body.dark-mode{
    background-color: #121212;
    color: #ffffff;
}
.dark-mode .top-navber,
.dark-mode .side-navber,
.dark-mode .food,
.dark-mode .footer,
.dark-mode .social{
    background-color: #333;
    color:#fff;

}
.dark-mode .top-navber a,
.dark-mode .side-navber a,
.dark-mode .food h1,
.dark-mode .food p,
.dark-mode .footer p,
.dark-mode .anker,
.dark-mode .sp{
    color: #fff;
}
.dark-mode .social a i{
    color:#fff;
}
.dark-mode .soacial a i:hover{
    color: #ccc;
}
.dark-mode .social a{
   background-color: #444;
}