html, body {
    background-color: #080808;
    color: white;
    font-size: 20px;
    max-width: 100%;
    overflow-x: hidden;
}

.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.1)), url("neural-circuits.gif");
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hp {
    padding: 200px 10px 100px 10px;
}

.h2bg {
    background-image: url(hero-2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.shbg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(neurons.jpg);
}

.ibg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(device-addiction.webp);
}

.sbg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(social-destruction.jpg);
}

.fbg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(family.webp);
}

.cbg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(companies.webp);
}

.ts {
    text-shadow: 3px 3px 10px #000000;
}

.cb {
    color: black;
}

@font-face {
    font-family: fb;
    src: url(fb.woff);
}

.fffb {
    font-family: 'fb', sans-serif;
}

@font-face {
    font-family: h;
    src: url(PlayfairDisplay-SemiBold.ttf);
    font-display: swap;
}

.ffh {
    font-family: 'h', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;;
}

.hra:after {
    max-width: 1200px;
    height: 1px;
    content: "";
    margin: auto;
    display: block;
    color: transparent;
    background-image: linear-gradient(90deg, #2ca2b4, #5598de 24%, #7f87ff 45%, #f65aad 76%, #ec3d43);
    will-change: transform;
    overflow: hidden;
    background-clip: initial;
}

.sc {
    height: 10px;
    background-image: linear-gradient(108deg, rgb(8, 148, 255), rgb(201, 89, 221) 34%, rgb(255, 46, 84) 68%, rgb(255, 144, 4));
}

.ip {
    padding: 150px 0px 150px 0px;
}

.hhbg {
    vertical-align: middle;
    margin: auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    overflow: hidden;
    will-change: transform;
}

.hhr {
    background-image: linear-gradient(145deg, #b344ff, #ffb6ff);
}

.hhg {
    background-image: linear-gradient(135deg, #92ca5a, #dac355);
}

.hhb {
    background-image: linear-gradient(to right, #1e3791 0%, #2948b1 40%, #3153c6 55%, #385fda 60%);
}

.hht {
    background-image: linear-gradient(to bottom, rgb(4, 156, 183), rgb(61, 217, 189));
}

.pl {
    padding-left: 8px;
}

@media only screen and (max-width: 600px) {
    .hp {
        padding: 200px 10px 75px 10px;
    }

    .sp {
        padding: 50px 0px 50px 0px;
    }

    .hfs {
        font-size: 64px;
    }

    .hero-image {
        height: 100vh;
        background-position: center 10px;
    }

}

@media only screen and (min-width: 600px) {
    .hp {
        padding: 200px 10px 75px 10px;
    }

    .sp {
        padding: 50px 0px 50px 0px;
    }

    .hfs {
        font-size: 72px;
    }

    .hero-image {
        height: 100vh;
        background-position: center;
    }
}

@media only screen and (min-width: 768px) {
    .hp {
        padding: 200px 10px 100px 10px;
    }

    .sp {
        padding: 100px 0px 100px 0px;
    }

    .hfs {
        font-size: 96px;
    }

    .hero-image {
        height: 100vh;
        background-position: center;
    }
}

@media only screen and (min-width: 992px) {
    .hp {
        padding: 200px 10px 100px 10px;
    }

    .sp {
        padding: 100px 0px 100px 0px;
    }

    .hfs {
        font-size: 96px;
    }

    .hero-image {
        height: 100vh;
        background-position: center;
    }
}

@media only screen and (min-width: 1200px) {
    .hp {
        padding: 200px 10px 100px 10px;
    }

    .sp {
        padding: 100px 0px 100px 0px;
    }

    .hfs {
        font-size: 96px;
    }

    .hero-image {
        height: 100vh;
        background-position: center;
    }
}