:root{
    font-family: Marlin, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --alternate-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

    --main-background-light: #fafafa;
    --main-background-dark: #0a0a0a;
    --main-text-light: #202124;
    --main-text-dark: #f5f5f5;
    --main-background2-light: #dfe1e5;
    --main-background2-dark: #303030;

    /*var(--arc-background-gradient-color1),
    var(--arc-palette-maxContrastColor),
    var(--arc-palette-foregroundPrimary),
    var(--arc-background-gradient-color0),
    var(--arc-background-gradient-overlay-color1),
    var(--arc-background-gradient-color1))*/
    /*#553c9a, #ee4b2b, #00c2cb, #ff7f50, #553c9a*/
    /*--arc-background-gradient-color1: #553c9a;*/
    /*--arc-palette-maxContrastColor: #ee4b2b;*/
    /*--arc-palette-foregroundPrimary: #00c2cb;*/
    /*--arc-background-gradient-color0: #ff7f50;*/
    /*--arc-background-gradient-overlay-color1: #553c9a;*/
    transition: .15s ease-out;
    background: var(--main-background-light);
    color: var(--main-text-light);

    --shadow-color-light: rgba(32, 33, 36, 0.28);
    --shadow-color-dark: rgba(245, 245, 245, 0.28);

    --hover-shadow: 0 1px 6px 0 var(--shadow-color-light);
}
@keyframes moving-grad{
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}
body{
    /*background: linear-gradient(45deg, var(--arc-background-gradient-color0) 0%, var(--arc-background-gradient-color1) 100%);*/
    background-size: 1000% 1000%;
    animation: moving-grad 30s ease alternate-reverse;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
}
#outside{
    display: flex;
    justify-content:center;
    align-items: center;
    height:75vh;
    background:transparent;
}
#inside{
    justify-content:center;
    align-items: center;
    text-align: center;

    width: 50%;
    background:transparent;
}

#the{
    /* make it similar to the google search bar*/
    /*border: 1px solid #dfe1e5;*/
    border: 1px solid var(--main-background2-light);
    border-radius: 24px;
    box-shadow: none;
    font-size: 16px;
    height: 44px;
    margin: 0 auto;
    padding: 0 16px;

    transition: .25s ease-out;

    display: flex;
    justify-content: center;
    align-items: center;


}
#the:hover{
    /*border: 1px solid #dfe1e5;*/
    border: 1px solid var(--main-background2-light);
    border-radius: 24px;
    /*box-shadow: none;*/
    font-size: 16px;
    height: 44px;
    margin: 0 auto;
    padding: 0 16px;
    transition: .25s ease-out;
    /*border: 1px solid #dfe1e5;*/
    box-shadow: var(--hover-shadow);

    background: var(--main-background-light);
}
#the:focus-within{
    /*border: 1px solid #dfe1e5;*/
    border: 1px solid var(--main-background2-light);
    border-radius: 24px;
    /*box-shadow: none;*/
    font-size: 16px;
    height: 44px;
    margin: 0 auto;
    padding: 0 16px;
    transition: .25s ease-out;
    /*border: 1px solid #dfe1e5;*/
    box-shadow: var(--hover-shadow);

    background: var(--main-background-light);
}

#text{
    border: none;
    background-color: transparent;
    width: 100%;
    font-size: 16px;
    height: 44px;
    margin: 0;
    padding: 0 16px;
    /*color: #202124;*/
    color: var(--main-text-light);
    word-wrap: break-word;
    outline: none;
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    /*text-align: center;*/

}
#text:focus{
    outline: none;
}

#search{
    border: none;
    background-color: transparent;
    /*cursor: pointer;*/
}
#searchicon{
    cursor: pointer;
}

h1 {
    font-size: 70px;
    font-weight: 600;
    background: black;
    /*background-image: linear-gradient(-45deg, var(--arc-background-gradient-color1), var(--arc-palette-maxContrastColor), var(--arc-palette-foregroundPrimary), var(--arc-background-gradient-color0), var(--arc-background-gradient-overlay-color1), var(--arc-background-gradient-color1));*/
    /*#553c9a, #ee4b2b, #00c2cb, #ff7f50, #553c9a*/
    background-size: 250px;
    background-repeat: repeat;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 400% 400%;
    animation: animated-gradient 30s infinite alternate-reverse;
}

@keyframes animated-gradient {
    to {
        background-position: 200%;
    }
}

#help {
    position: fixed;
    top: 20px;
    left: 20px;
    color: var(--main-text-light);
}

.cooltipz--right {
    transition: .15s ease-out;
}
.cooltipz--visible {
    transform: scale(105%);
}
#dark-mode {
    position: fixed;
    bottom: 20px;
    left: 20px;
    color: var(--main-text-light);
}