body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(at 0% 0%, rgb(174, 80, 225) 0, transparent 50%),
        radial-gradient(at 50% 0%, rgb(37, 227, 167) 0, transparent 50%),
        radial-gradient(at 100% 0%, rgb(86, 187, 254) 0, transparent 50%),
        radial-gradient(at 50% 100%, rgb(120, 73, 228) 0, transparent 50%),
        radial-gradient(at 0% 100%, rgb(76, 0, 253) 0, transparent 50%),
        radial-gradient(at 0% 50%, rgb(71, 160, 232) 0, transparent 50%),
        radial-gradient(at 100% 100%, rgb(50, 132, 255) 0, transparent 50%);
    background-repeat: no-repeat;
    background-size: 400% 400%;
    background-position: center;
    background-attachment: fixed;
    align-content: center;
    justify-content: center;
    justify-self: center;
    justify-items: center;
    animation-name: bg;
    animation-duration: 1s;
    animation-name: bg;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    overflow: hidden;
}

@keyframes bg {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

#logo {
    width: 8vmin;
    height: 1.6 vmin;
    position: fixed;
    top: 1vmin;
    left: 1.5vmin;
    float: left;
    vertical-align: top;
    animation-name: Mlogo;
    animation-duration: 1s;
}

#mainContainer {
    position: absolute;
    top: 20%;
    left: 2vw;
}

#slogan {
    font-family: 'Cal Sans';
    line-height: 1.1;
    color: rgba(253, 254, 255, 0.874);
    font-weight: 100;
    font-size: 7vmin;
    animation: mainT 1s ease-out forwards;
    transition: font-size 0.5s, color 1s, text-shadow .5s;
}

#tInput {
    width: 50vmin;
    height: 3.7vmin;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    border: none;
    padding-left: 3vmin;
    font-size: 1.7vmin;
    font-family: 'Baumans';
    color: white;
    text-shadow: 0 0 1px white,
        0 0 2px rgba(255, 255, 255, 0.816),
        0 0 3px rgba(255, 255, 255, 0.706),
        0 0 4px rgba(255, 255, 255, 0.494),
        0 0 5px rgba(255, 255, 255, 0.396),
        0 0 6px rgba(255, 255, 255, 0.246),
        0 0 7px rgba(255, 255, 255, 0.137),
        0 0 8px rgba(255, 255, 255, 0.027);
    border-radius: 10000px;;
}

#slogan:hover {
    font-size: 7.1vmin;
    color: rgba(251, 252, 252, 0);
    text-shadow:
        0 0 2px white,
        0 0 4px rgba(255, 255, 255, 0.816),
        0 0 6px rgba(255, 255, 255, 0.706),
        0 0 8px rgba(255, 255, 255, 0.494),
        0 0 10px rgba(255, 255, 255, 0.396),
        0 0 12px rgba(255, 255, 255, 0.246),
        0 0 14px rgba(255, 255, 255, 0.137),
        0 0 16px rgba(255, 255, 255, 0.027);
}


#searchbar {
    display: flex;
    width: 53vmin;
    height: 4vmin;
    background-color: rgba(255, 255, 255, 0.558);
    border-radius: 70vmin;
    border: 0.3vmin solid rgba(255, 255, 255, 0.621);
    animation-name: bar;
    animation-duration: 1S;
    align-content: center;
    justify-content: center;
    justify-items: center;
    padding-right: 1.4vmin;
    padding-bottom: 0px;
    transition: background-color .5s, box-shadow .5s, backdrop-fliter .5s;
}

#searchbar:hover {
    box-shadow:
        0 0 5px white,
        0 0 10px rgba(255, 255, 255, 0.816),
        0 0 15px rgba(255, 255, 255, 0.706),
        0 0 20px rgba(255, 255, 255, 0.494),
        0 0 25px rgba(255, 255, 255, 0.396),
        0 0 30px rgba(255, 255, 255, 0.246),
        0 0 35px rgba(255, 255, 255, 0.137),
        0 0 40px rgba(255, 255, 255, 0.027);
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(5px);
}

@keyframes bar {
    from {
        width: 0vmin;
        background-color: white;
        opacity: 0;
    }

    to {
        width: 53vmin;
        background-color: rgba(240, 248, 255, 0.558);
        opacity: 1;
    }
}

@keyframes mainT {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
        transform: translateY(0);
        transform: translateY(10px);
    }
}

* {
    user-select: none;
}

@keyframes Mlogo {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#Sicon {
    align-self: center;
    font-size: 4vmin;
    color: rgba(240, 248, 255, 0.615);
    animation: searchI 1s;
    animation-delay: 1s;
}

#menu {
    position: fixed;
    top: 1vmin;
    right: 1.5vmin;
    float: right;
    vertical-align: top;
    border: none;
    border-radius: 50px;
    width: 3.3vmin;
    height: 3.3vmin;
    font-size: 2vmin;
    background-color: transparent;
    color: white;
    transition: background-color .5s, box-shadow .5s, backdrop-fliter .5s;
}

#menu:hover {
    background-color: rgba(240, 248, 255, 0.427);
    cursor: pointer;
    box-shadow:
        0 0 2px white,
        0 0 4px rgba(255, 255, 255, 0.816),
        0 0 6px rgba(255, 255, 255, 0.706),
        0 0 8px rgba(255, 255, 255, 0.494),
        0 0 10px rgba(255, 255, 255, 0.396),
        0 0 12px rgba(255, 255, 255, 0.246),
        0 0 14px rgba(255, 255, 255, 0.137),
        0 0 16px rgba(255, 255, 255, 0.027);
}

#Overlay1 {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 100000000;
    inset: 0;
    justify-self: right;
    justify-items: right;
    font-family: "Cal sans";
    font-weight: 100;
    color: rgba(255, 255, 255, 0.659);
    display: none;
    opacity: 0;
    transition: opacity .5s;
    padding: 5vmin 5vmin 0 0;
    backdrop-filter: blur(10px);
}

#Overlay2 {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 100000000;
    inset: 0;
    justify-self: right;
    justify-items: right;
    font-family: "Cal sans";
    font-weight: 100;
    color: rgba(255, 255, 255, 0.659);
    transition: opacity .5s;
    padding: 5vmin 5vmin 0 0;
    position: fixed;
    display: none;
    opacity: 0;
    backdrop-filter: blur(10px);
}



#SettingsTitle {
    margin: 0;
    letter-spacing: .7vmin;
    font-size: 4vmin;
}

#bar1 {
    position: absolute;
    height: 0.3vmin;
    width: 30vmin;
    background-color: rgba(255, 255, 255, 0.48);
    border-radius: 100px;
    opacity: 0;
    transition: opacity .5s;
    margin-top: -.2vmin;
}

.ops1 {
    opacity: 0;
    transition: opacity .5s;
    display: block;
    margin-right: 1vmin;
}

.bar {
    height: 0.3vmin;
    width: 30vmin;
    background-color: rgba(255, 255, 255, 0.48);
    border-radius: 100px;
    transition: opacity .5s;
}

.optionButtons {
    float: right;
    height: 1.7vmin;
    padding: .01vmin;
    width: 7vmin;
    border: none;
    border-radius: 1000px;
    background-color: rgba(255, 255, 255, 0.358);
    color: rgba(255, 255, 255, 0.597);
    font-family: 'Cal Sans';
    text-align: center;
    font-size: 1.3vmin;
    transition: background-color .5s, box-shadow .5s, backdrop-fliter .5s;
    margin-left: .5vmin;
}

.optionButtons:hover {
    background-color: rgba(240, 248, 255, 0.181);
    cursor: pointer;
    box-shadow:
        0 0 2px white,
        0 0 4px rgba(255, 255, 255, 0.816),
        0 0 6px rgba(255, 255, 255, 0.706),
        0 0 8px rgba(255, 255, 255, 0.494),
        0 0 10px rgba(255, 255, 255, 0.396),
        0 0 12px rgba(255, 255, 255, 0.246),
        0 0 14px rgba(255, 255, 255, 0.137),
        0 0 16px rgba(255, 255, 255, 0.027);
}


#sp1 {
    margin: -1.2min;
    font-size: 2vmin;
}

#seGoogleSearch {
    margin-right: 1vmin;
}

#seDuckduckgo {
    width: 10vmin;
}

#customize {
    position: fixed;
    bottom: 1vmin;
    right: 2vmin;
    float: right;
    vertical-align: bottom;
    border: none;
    border-radius: 50px;
    width: 3.3vmin;
    height: 3.3vmin;
    font-size: 2vmin;
    background-color: transparent;
    color: white;
    transition: background-color .5s, box-shadow .5s, backdrop-fliter .5s;
}

#customize:hover {
    background-color: rgba(240, 248, 255, 0.181);
    cursor: pointer;
    box-shadow:
        0 0 2px white,
        0 0 4px rgba(255, 255, 255, 0.816),
        0 0 6px rgba(255, 255, 255, 0.706),
        0 0 8px rgba(255, 255, 255, 0.494),
        0 0 10px rgba(255, 255, 255, 0.396),
        0 0 12px rgba(255, 255, 255, 0.246),
        0 0 14px rgba(255, 255, 255, 0.137),
        0 0 16px rgba(255, 255, 255, 0.027);
}

#2sp1 {
    margin: -1.2min;
    font-size: 2vmin !important;
}

.ops2 {
    transition: opacity .5s;
    display: block;
    margin-right: 1vmin;
}

#customizationTitle {
    margin: 0;
    letter-spacing: .7vmin;
    font-size: 4vmin;
}

#wpset {
    float: right;
    border-radius: 100vmin;
    border: 0.2vmin solid rgba(255, 255, 255, 0.349);
    background-color: rgba(255, 255, 255, 0.354);
    outline: none;
    font-family: "baumans";
    width: 20vmin;
    height: 1.5vmin;
    color: white;
    font-size: 1.7vmin;
}

#wpsetter {
    border: none;
    border-radius: 10000px;
    background-color: #ffffff3f;
    color: white;
    float: right;
    margin-right: .5VMIN;
    width: 3vmin;
    height: 3vmin;
    font-size: 2vmin;
}

.close {
    background-color: transparent;
    font-size: 2vmin;
    color: rgba(255, 255, 255, 0.363);
    outline: none;
    border: none;
    cursor: pointer;
}