@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body {
    margin: 0;
    overflow-x: hidden;
    font-family: "Poppins", sans-serif !important;
    transition: all 1s;
    position: relative;
}

:root {
    --headerHeight: 0px;
}

::selection {
    color: rgb(247, 226, 189);
    background-color: rgb(87, 64, 64);
}

#preloader {
    height: 100vh;
    width: 100%;
    background: var(--bs-light) url(https://media.tenor.com/xDZkQ6ALTmIAAAAi/loading-snake-io.gif) no-repeat center center;
    background-size: 5%;
    clip-path: fill-box;
    position: fixed;
    z-index: 999999;
}

.gradiant {
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.6) 20%, rgba(10, 10, 10, 0.3) 70%, rgba(10, 10, 10, 0) 100%);
}

#carouselExampleIndicators {
    height: calc(100vh);
}

@media (max-width: 1199.98px) {
    #carouselExampleIndicators {
        height: auto;
    }
    .card-img-top {
        font-size: smaller;
    }
    @media (max-width: 767.98px) {
        .nav.nav-pills {
            display: none;
        }
        header {
            justify-self: start;
            width: 100%;
        }
    }
}

.hidden {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-50%);
    transition: all 1s;
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

input:focus:invalid {
    border: 2px solid var(--bs-danger);
}

input:valid {
    border: 2px solid var(--bs-success);
}

div > input,
div > select {
    width: 100%;
    outline: none;
    transition: all 0.5s;
}

form i {
    margin-left: -30px;
    cursor: pointer;
}

label {
    margin-top: 8px;
    width: 100%;
}

input[type="radio"] {
    margin-right: 10px;
}

#Toggle_animation {
    width: 200px;
    height: 30px;
    background-color: #123456;
}

.themer,
.scrollToTop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 15px;
    transition: all 1s;
    > i {
        font-size: 25px;
        display: block;
        position: relative;
        top: 1px;
        right: 0px;
    }
}

.themer {
    bottom: 15px;
    z-index: 9;
}

.scrollToTop {
    bottom: 80px;
    z-index: 10;
}

:is(.themer, .scrollToTop):hover {
    > i {
        font-size: 30px;
    }
}

#food_cards {
    perspective: 1500px;
}

.full-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;

    .card {
        backface-visibility: hidden;
    }

    .back {
        text-align: justify;
        position: absolute;
        top: 0;
        background-color: var(--bs-secondary-bg);
        transform: rotateY(-180deg);
    }
}

.full-card:hover {
    transform: rotateY(-180deg);
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.full-card::before,
.full-card::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: calc(100% + 4px);
    width: calc(100% - 20px);
    background: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
    border-radius: 0.375rem;
    z-index: -1;
    animation: 3s spin linear infinite;
}

.full-card::before {
    filter: blur(1.2rem);
    opacity: 0.7;
}

@keyframes spin {
    from {
        --angle: 0deg;
    }
    to {
        --angle: 360deg;
    }
}