:root{    --base-color: hsl(60, 81%, 94%);    --text-color: hsl(36, 26%, 11%);    --main-color: hsl(0, 0%, 5%);    --curve-variant: hsla(258, 92%, 45%, 0.527);    --curve-color: hsla(0, 2%, 29%, 0.932);    --hover-color: hsl(56, 99%, 43%);    --nav-color: linear-gradient(to right, hsl(60, 89%, 33%), hsl(39, 80%, 34%), hsl(73, 81%, 29%));    --nav-text-color: hsl(0, 0%, 100%);    --nav-hover-color: hsl(36, 26%, 11%);    --general-font: 'Kumar One', cursive;    --link-font: 'Gravitas One', cursive;    --head-font: 'Gravitas One', cursive;}body{    margin: 0;    padding: 0;    overflow-x: hidden;}input{    display: none;}.switch{    width: 50px;    height: 30px;    position: absolute;    display: flex;    background: rgb(243, 232, 232);    border-radius: 200px;    box-shadow: inset 0px 5px 15px hsl(0, 0%, 0%), inset 0px -5px 15px hsl(0, 0%, 60%);    cursor: pointer;    transition: .3s;    float: right;    right: 10px;    top: 20px;    i{        position: absolute;    }    .fa-sun{        color: var(--nav-text-color);        font-size: 1.2em;        margin: 0 auto;        display: flex;        justify-content: center;        align-items: center;        top: 5px;        left: 5px;        visibility: hidden;    }    .fa-moon{        color: var(--nav-text-color);        font-size: 1.2em;        margin: 0 auto;        display: flex;        justify-content: center;        align-items: center;        right: 5px;        top: 5px;        visibility: hidden;    }    .toggle-text{        color: var(--nav-text-color);        font-size: .7em;        margin: 0px auto;        display: block;        justify-content: center;        align-items: center;        right: 0px;        top: 30px;        position: relative;    }/*     .slider{        position: absolute;        top: 5px;        left: 5px;        width: 30px;        height: 30px;        background-color: var(--nav-text-color);        border-radius: 50%;        transition: .3s;    }           .slider:before{        content: "";        position: absolute;        top: 5px;        left: 5px;        width: 30px;        height: 30px;        background-color: var(--nav-text-color);        border-radius: 50%;        transition: .3s;    }    .slider:after{        content: "";        position: absolute;        top: 5px;        left: 5px;        width: 30px;        height: 30px;        background-color: var(--nav-text-color);        border-radius: 50%;        transition: .3s;    } */    }.switch::after {    content: "";    width: 18px;    height: 18px;    position: absolute;    top: 5px;    left: 5px;    border-radius: 180px;    background: linear-gradient(180deg, rgb(247, 193, 144), rgb(255, 208, 0));    box-shadow: inset 0px 5px 10px hsl(0, 0%, 0%);    transition: .3s;}#darkmode-toggle {    width: 0;    height: 0;    visibility: hidden;}input:checked + .switch{    background: rgb(50, 50, 51);    transition: .3s;} input:checked + .switch::after{    left: 10px;    transform: translateX(15px);    background: linear-gradient(180deg, rgb(168, 164, 164), rgb(61, 60, 60));}.switch:active::after{    width: 2px;    transition: .3s;}.darkmode{    width: 100vw;    height: auto;    background: hsl(0, 100%, 99%);    z-index: -11111;    position: absolute;    transition: .3s;    top: 0;}input:checked + .switch +.darkmode{    background: rgb(22, 19, 19);}header{    width: 100%;    height: 70%;    overflow: hidden;}.background{    background-color: black;    top: 0;    display: block;    width: 100%;    height: 70%;    max-height: 600px;    object-fit: cover;    border: none;    border-radius: 10px;    position: absolute;    z-index: -11111;    filter: blur(5px);    }.roll{    width: 60px;    height: 60px;    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);    background: var(--curve-color);    justify-content: center;    align-items: center;    display: flex;    scale: 1.3;    transition: all .5s ease-in-out;    cursor: pointer;    transform: translateY(35px);    z-index: -1;}.par{    float: left;    margin: 20px;    animation: roll infinite linear .9s  2s forwards;}.par2{    float: right;    margin: 20px;    animation: roll infinite linear .9s  2s reverse;}.carousel-container{    display: block;    margin: 30px auto;    text-align: center;    color: var(--base-color);    .carousel-text{        font-size: .8em;        font-family: "DM Serif Display", serif;        font-weight: 400;        font-style: normal;        color: var(--base-color);        text-align: center;        cursor: context-menu;        line-height: 1.5em;        &::first-letter{            color: var(--hover-color);        }        &::first-line{            font-size: 1.5em;        }    }}/* @keyframes roll{    0%{        transform: rotate(0deg);    }    100%{        transform: rotate(360deg);    }} */.clip{    h1{        font-size: 3em;        font-family: "DM Serif Display", serif;        font-weight: 400;        font-style: normal;        color: var(--base-color);        text-align: center;        cursor: context-menu;        line-height: 1.5em;        &::first-letter{            font-size: 2em;            color: var(--hover-color);        }        &::first-line{            font-size: 1.5em;        }        &:hover{           animation: shake .5s linear;        }    }    .carousel-container{        display: block;        font-size: 1.5em;        margin: 30px auto;        text-align: center;        color: var(--base-color);        .cursor {            font-weight: bold;            color: #333;            animation: blink 0.7s infinite;        }    }    input{        display: flex;        margin: 20px auto;        width: 15rem;        height: 1rem;        padding: 10px 15px;        border: 2px solid;        border-radius: 20px;        font-size: 1.2em;        background-color: var(--curve-variant);        /* display: none; */        &::placeholder{            color: var(--nav-hover-color);            text-decoration: none;        }    }    button{        display: flex;        margin: 20px auto;        width: 10rem;        height: 3rem;        padding: 10px 15px;        border: none;        border-radius: 20px;        font-size: 1.2em;        background-color: var(--curve-variant);        color: var(--nav-text-color);        cursor: pointer;        scale: 1;        transition: all .5s ease-in-out;        text-align: center;        }                .menuBtn{            justify-content: center;            align-items: center;            width: 50px;            height: 50px;            background-color: var(--curve-variant);            color: var(--nav-text-color);            cursor: pointer;            transition: all .5s ease-in-out;            text-align: center;            display: none;        }    }.searchbar{    border: 2px solid var(--curve-variant);    margin: 0px auto;    width: 350px;    height: 80px;    box-sizing: border-box;    display: flex;    justify-content: center;    align-items: center;    border-radius: 30px;    position: relative;    background-color: var(--curve-variant);    display: flex;    justify-content: space-between;    &:hover{        box-shadow: 0 0 10px var(--curve-variant);    }    .search-label{        display: flex;        justify-content: center;        align-items: center;        position: absolute;        left: 5px;        top: 10px;        width: 60px;        height: 60px;        border-radius: 50%;;        color: var(--base-color);        cursor: pointer;        transition: all .5s ease-in-out;        &:hover{            transform: scale(1.1);            animation: shake .5s ease-in-out;        }        &:active{            left: -10px;            outline: none;        }    }    .search{        display: flex;        margin: 0 auto;        width: 280px;        height: 40px;        padding: 10px 15px;        border: none;        border-radius: 20px;        font-size: 1.2em;        background-color: transparent;        color: var(--nav-text-color);        text-align: center;        &::placeholder{            color: var(--base-color);            text-decoration: none;        }                &:active{            outline: none;            border: none;        }    }}.result{    position: relative;    margin: 20px auto;    width: 90%;    padding: 10px;    height: auto;    max-height: 200px;    overflow-y: auto;    background-color: black;    border-radius: 20px;    box-shadow: 0 0 10px var(--curve-variant);    z-index: 11111;.flash-highlight {  background-color: #fff3cd !important;  transition: background-color 0.5s ease;}    .results-dropdown {        top: calc(100% + 50px); /* Exactly 50px below the input area */        left: 10%;              /* Centered relative to the search container */        width: 80%;             /* Exactly 80% width */        height: auto;           /* Height auto */        max-height: 300px;              overflow-x: hidden;                background: rgb(36, 35, 35);        border: 1px solid canvas;        border-radius: 10px;        box-shadow: 0 2px 6px rgba(30, 14, 85, 0.384);        margin: 0 auto;                      padding: 5px;                     list-style: none;               li{            padding: 5px;            gap: 10px;            cursor: pointer;            text-decoration: none;            font-size: 1.2em;            color: canvas;            height: auto;            &:hover{                background-color: black;                transform: scale(1.1);                text-align: center;            }            a{                text-decoration: none;                padding: 5px;                border-radius: 10px;            }        }}} .hidden {    display: none !important;}.menu{        display: flex;        border: 2px solid var(--curve-variant);        border-radius: 20px;        background-color: var(--curve-variant);        margin: 10px auto;        position: relative;        width: 90%;        height: 100%;        justify-content: center;        align-items: center;        flex-wrap: wrap;        .xmark{            display: none;        }        .menuList{            display: flex;            flex-wrap: wrap;            h1{                font-size: 2.5em;                color: var(--text-color);                text-align: center;                margin: 1.5em auto;                display: block;                clear: both;                display: none;            }            nav{                display: flex;                justify-content: center;                                ul{                    display: flex;                    justify-content: center;                    align-items: center;                    flex-wrap: wrap;                    margin: 1.5em auto;                    padding: 0;                    list-style-type: none;                    font-size: 1.2em;                    color: var(--nav-text-color);                    text-align: center;                    text-decoration: none;                    line-height: 2em;                    li{                        margin: 0 1em;                        padding: 0;                        text-align: center;                        text-decoration: none;                        color: var(--nav-text-color);                        transition: all .5s ease-in-out;                        cursor: pointer;                        word-spacing: 10px;                        a{                            text-decoration: none;                            color: var(--nav-text-color);                            font-size: 1.3em;                            padding: 10px;                            border-radius: 20px;                            transition: all .5s ease-in-out;                            cursor: pointer;                            &:hover{                                background-color: var(--hover-color);                                color: var(--nav-hover-color);                                transform: scale(1.1);                            }                        }                    }                }            }        }    }.curve{    border: 2px solid;     margin: em 0;}main{    background-color: transparent;    margin-top: 15em;    z-index: -10;    h2{        font-size: 2.5em;    }}.links{    position: relative;    justify-content: center;    align-items: center;    flex-wrap: wrap;    margin: 2em auto;    width: 80%;    height: 100%;    line-height: 2.5em;    background-color: var(--curve-variant);    border-radius: 20px;    padding: 20px;    box-shadow: 0 0 25px var(--curve-variant);    h2{        font-size: 3.5em;        margin: 1em auto;        text-align: center;        font-weight: 500px;    }    p{        font-size: 1.5em;        text-align: center;    }        a{        text-decoration: none;        color: var(--nav-text-color);        font-size: 1.3em;        padding: 10px;        border-radius: 20px;        transition: all .5s ease-in-out;        cursor: pointer;        &:active{            background-color: var(--hover-color);            color: var(--nav-hover-color);            transform: scale(1.1);        }    }    .section1{         justify-content: center;         padding: auto;         border-bottom: 2px solid var(--curve-variant);         margin: 0 2em auto;    }    .section2{        justify-content: center;        padding: auto;        margin: 0 2em auto;     }    .section3{        justify-content: center;        padding: auto;        margin: 0 2em auto;        border-bottom: 2px solid red;        border-radius: 0 0 20px 20px;            }}footer {    justify-content: center;    align-items: center;    flex-wrap: wrap;    margin:  1em auto;    width: 80%;    height: 50%;    background-color: var(--curve-variant);    border-radius: 20px;    padding: 1em 20px;    box-shadow: 0 0 10px var(--curve-variant);}  footer a{        text-decoration: none;        color: var(--nav-text-color);        padding: 1em;        border-radius: 20px;        transition: all .5s ease-in-out;        cursor: pointer;          &:hover {            background-color: var(--hover-color);            color: var(--nav-hover-color);         }    }footer .footer1{        margin: auto;        top: 0;    }@keyframes blink {            0%, 100% { opacity: 1; }            50% { opacity: 0; }}@keyframes shake{            0%{                transform: translateX(0);            }            25%{                transform: translateX(-5px);            }            50%{                transform: translateX(5px);            }            75%{                transform: translateX(-5px);            }            100%{                transform: translateX(0);            }                    }   @media only screen and (max-width: 780px) {    h1{        font-size: 3em;        margin-top: 3em;    }    .switch{        right: 70px;        top: 20px;        z-index: -1;    }    .carousel-container{        font-size: .9em;        margin: 50px auto;    }    p, a, li{        font-size: 1em;    }    .background{        height: 60%;        max-height: 400px;        background-size: cover;    }    .clip{        h1{            font-size: 2em;        }        .crousel{            font-size: .9em;        }    }    #menuBar{        display: flex;        position: absolute;        top: -10px;        right: 10px;        border-radius: 50%;        &:hover{            transform: scale(1.1);            animation: shake .5s ease-in-out;        }    }    .searchbar{        border: 2px solid var(--curve-variant);        margin: 0px auto;        width: 300px;        height: 55px;        box-sizing: border-box;        display: flex;        justify-content: center;        align-items: center;        border-radius: 30px;        position: relative;        background-color: var(--curve-variant);        display: flex;        justify-content: space-between;        &:hover{            box-shadow: 0 0 10px var(--curve-variant);        }        .search-label{            display: flex;            justify-content: center;            align-items: center;            position: absolute;            left: 5px;            top: -5px;            width: 60px;            height: 60px;            border-radius: 50%;;            color: var(--base-color);            cursor: pointer;            transition: all .5s ease-in-out;            &:hover{            transform: scale(1.1);                animation: shake .5s ease-in-out;            }            &:active{                left: -10px;                outline: none;            }        }    .search{        display: flex;        margin: 0 auto;        width: 270px;        height: 40px;        padding: 10px 10px;        border: none;        border-radius: 30px;        font-size: 1.2em;        background-color: transparent;        color: var(--nav-text-color);        text-align: center;        &::placeholder{            color: var(--base-color);            text-decoration: none;        }            }    .search:active{        outline: none;        border: none;    }    }    .off{        display: none;    }     .menu{        position: fixed;        background-color: var(--curve-variant);        width: 70%;        height: 90vh;        top: 10px;        color: var(--nav-text-color);        z-index: 11;        border-radius: 0px 25px 20px 0px;        transition: all .5s linear;        .xmark{            display: block;            position: absolute;            top: 2px;            right: 2px;            background-color: green;            border: none;            color: var(--nav-text-color);            font-size: 2em;            cursor: pointer;            height: 50px;            width: 50px;            border-radius: 50%;            z-index: 111111;            &:hover{                color: black;                transform: scale(1.1);                background-color: var(--hover-color);            }        }        .menuList{            position: absolute;            display: flex;            flex-direction: column;              text-align: center;            top: 0px;            left: 0px;            background-color: black;            width: 100%;            height: 100%;            color: var(--nav-text-color);            border-radius: 0px 25px 20px 0px;            h1{                font-size: 2.5em;                color: var(--text-color);                text-align: center;                margin: .8em auto;                display: block;                clear: both;            }            nav{                display: flex;                flex-direction: column;                justify-content: center;                                ul{                    display: flex;                    gap: 20px;                    flex-direction: column;                    justify-content: center;                    align-items: center;                    flex-wrap: wrap;                    margin: 1.5em auto;                    padding: 0;                    list-style-type: none;                    color: var(--nav-text-color);                    text-align: center;                    text-decoration: none;                    line-height: 2em;                    li{                        margin: 0 1em;                        padding: 0px;                        text-align: center;                        text-decoration: none;                        color: var(--nav-text-color);                        cursor: pointer;                        word-spacing: 10px;                        a{                            text-decoration: none;                            color: var(--nav-text-color);                            padding: 10px;                            border-radius: 20px;                            transition: all .5s ease-in-out;                            cursor: pointer;                            font-size: 1em;                                                       &:hover{                                text-decoration: underline;                                transform: scale(1.1);                            }                        }                    }                }            }        }    }    main{        margin-top: 10em;    }}