main {
    text-align: center;
}

.hero {
    position:relative;
    min-height:100vh;
}

    #home-bg {
        user-select: none;
        position: relative;
        z-index:1;
        margin-bottom:-4%;
    }

    #home-logo {
        margin-left:15%;
        width:70%;
        user-select: none;

        z-index:3;

        /* animation-name: pulse_size;
		animation-duration: 1.5s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-timing-function: ease-in-out; */
    }

    .testimonials {
        position:absolute;
        inset:5%;
        width:90%;
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-gap:5em;
        align-content: center;
    }

        .test {
            width:35%;
            text-align: center;
            padding:2em 0;
        }

            .test .stars {
                padding:0 20%;
                display:grid;
                grid-template-columns: repeat(5,1fr);
                filter: drop-shadow(0 0 3px #ff73a6) drop-shadow(0 0 10px #ff73a6);
                margin-bottom:1em;
            }

            .test p.quote,
            .test p.giver {
                font-size:2.1em;
                text-transform: uppercase;
                font-weight: bold;
                letter-spacing: 0.05em;
                line-height: 1;
                margin:0;
            }

            .test p.giver {
                font-size:1em;
                color:var(--blue);
                margin-top:1em;
            }

        .test:nth-last-of-type(2n+1){
            justify-self: right;
        }

.grad-btn {
    margin-bottom:5%;
}


.video {
    padding:0 5%;
    margin-bottom:5%;
    position: relative;
    z-index:5;
}

    .video .vid {
        box-shadow:0 0 25px var(--blue);
    }

.intro {
    position: relative;
    z-index:2;
    display:grid;
    grid-template-columns: 2fr 1fr;
    margin-bottom:0;
    padding:0 5% 0 0;
}

    .image img {
        width:100%;
    }

    .intro .text {
        text-align: left;
    }

    .intro .text h2 {
        font-size: 3em;
        color:Var(--pink);
        font-weight:bold;
        text-shadow:0 0 10px #0005;
    }

    .intro p {
        font-size: 1.6em;
        line-height: 1.8;
    }


    
.insta {
    display:grid;
    grid-template-columns: repeat(6,1fr);
    grid-gap:1em;
    padding:0 5%;
    margin-bottom:5em;
}

    .insta a {
        width:100%;
        aspect-ratio: 1 / 1;
        position:relative;
        overflow:hidden;
        box-shadow:0 0 25px var(--blue);
    }

        .insta a div {
            position:absolute;
            width:100%;
            height:100%;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
            transition:all 0.5s ease-out;
        }

            .insta a img {
                width:100%;
                height:100%;
                object-fit: cover;
            }
        
            .insta a:hover div {
                width:110%;
                height:110%;
            }

@media screen and (max-width:1099px){
    .test {
        padding:0;
        width:45%;
    }
}

@media screen and (max-width:999px){

    .hero {
        margin-top:5.4em;
    }

    .intro {
        grid-template-columns:1fr;
        padding:0;
    }

        .intro .text {
            padding:5%;
            text-align: center;
        }
}

@media screen and (max-width:899px){
    .testimonials {
        position:static;
        grid-template-columns: repeat(3,1fr);
        width:100%;
        inset:0;
        padding:0 5% 5% 5%;
    }

        .test {
            width:100%;
            text-align: center;
        }

        #home-logo {
            width:100%;
            margin-left:0;
        }

    .hero {
        min-height:unset;
    }
}

@media screen and (max-width:699px){
    .testimonials {
        grid-template-columns: repeat(2,1fr);
        grid-gap:2.5em;
    }
    
    .insta {
        grid-template-columns: repeat(4,1fr);
        grid-gap:0.5em;
    }
}

@media screen and (max-width:499px){
    .testimonials {
        grid-template-columns:1fr;
        grid-gap:3em;
        margin-block:3rem;
    }

        .test .stars {
            padding:0 30%;
        }

        .test {
            display:none;
        }

        .test:nth-of-type(1),
        .test:nth-of-type(2),
        .test:nth-of-type(3){
            display:block;
        }

        .test p.quote {
            font-size:1.6em;
        }
}