/* https://www.w3schools.com/cssref/atrule_scope.php */

@scope (.mainindex) {
    .index-content {
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        padding: 80px 20px;
        min-height: 60vh;
        margin-top: 20px;
    }

    .bg-img img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }

    .index-text {
        position: relative;
        z-index: 2;
        color: black;
        text-align: center;
        max-width: 75%;
    }

    .index-text h1 {
        font-size: 50px;
        text-align: center;
        margin-bottom: 20px;
    }

    .index-text p {
        font-size: 25px;
        text-align: center;
        -webkit-text-stroke: 4px #dadada;
        paint-order: stroke fill;
    }
}