/* 
    * file: index.css
    * author: @TechnicDev
    * description: Styling for the index page
    * version: 1.0.0
*/

/* Hero background blurry background circle */
:root{
    --hero-x: 0px;
    --hero-y: 0px;
}
.hero::before{
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.09);
    width: 45vw;
    height: 45vw;
    z-index: 1;
    border-radius: 50%;
    filter: blur(5vw);
    transform: translate(var(--hero-x), var(--hero-y));
    transition: .1s;
}
.hero{
    top: calc(3rem + 50px);
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    z-index: 5;
}
.hero > div{
    z-index: 5;
}

@media screen and (min-width: 760px) {
    .hero-image img {
        width: 35vw;
    }
}
@media screen and (max-width: 760px) {
    .hero-image img {
        width: 45vw;
    }
}


/* Some complicated things to style the text in the hero */
@media screen and (min-width: 760px) {
    .hero-text h1{
        font-size: 2.5rem;
    }
}
@media screen and (max-width: 760px) and (min-width: 621px) {
    .hero-text h1{
        font-size: 2rem;
    }
}
@media screen and (max-width: 620px) and (min-width: 460px) {
    .hero-text h1{
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 460px) {
    .hero-text h1{
        font-size: 1rem;
    }
}


.sub-hero{
    margin-top: 5rem;
    text-align: center;
    z-index: 6;
    position: relative;
}
.sub-hero > a{
    text-decoration: none;
    font-weight: 800;
    font-size: 2rem;
    color: rgb(255, 255, 255, 0.6);
    transition: .3s;
}
.sub-hero > a:hover{
    color: rgb(255, 255, 255, 0.9);
}


.features-section{
    background-color: #000;
    max-width: 70rem;
    margin: 0 auto;
    margin-top: 8rem;
    user-select: none;
}
.features-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    padding: 2rem;
}

.feature-image{
    display: flex;
    justify-content: center;
    align-items: center;
}
.feature-image > img{
    width: 100px;
    z-index: 5;
    transition: .3s;
    opacity: 0.7;
}
.feature-image::after{
    content: '';
    position: absolute;
    width: 125px;
    height: 125px;
    background-color: rgba(255, 255, 255, 0.10);
    z-index: 1;
    border-radius: 50%;
    filter: blur(15px);
    transition: .3s;
}
.feature > hr{
    border: 1px solid rgba(255, 255, 255, 0.25);
    width: 50%;
    margin: 1rem auto;
}
.feature > h1{
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    transition: .3s;
}
.feature > p{
    font-size: 1rem;
    margin-top: .5rem;
    margin-bottom: 0;
    padding: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    transition: .3s;
}
.feature:hover .feature-image::after{
    width: 150px;
    height: 150px;
    filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.13);
}
.feature:hover > h1{
    color: rgba(255, 255, 255, 1);
}
.feature:hover > p{
    color: rgba(255, 255, 255, 0.8);
}
.feature:hover .feature-image > img{
    opacity: 1;
}

@media screen and (min-width: 900px) {
    .systems{
        margin: 5rem auto;
        max-width: 90rem;
        display: flex;
    }
}
@media screen and (max-width: 900px) {
    .systems{
        margin: 5rem auto;
        max-width: 90vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .systems-text{
        margin-top: 17rem;
    }
}

.systems-images > img{
    transition: .3s;
    position: absolute;
    margin: 0 auto;
    z-index: 5;
}

@media screen and (min-width: 1070px){
    .systems-imagges-container{
        width: 40rem;
    }
    .systems-images > img{
        width: 30rem;
    }
    .systems{
        padding-left: 5rem;
        justify-content: space-between;
    }
    [data-image='1']{transform: translate(0,0);}
    [data-image='2']{transform: translate(5rem,5rem);}
    [data-image='3']{transform: translate(10rem,10rem);}

    .systems-images:hover [data-image='1']{transform: translate(-5rem,-5rem) scale(1.1) rotate(5deg);}
    .systems-images:hover [data-image='2']{transform: translate(5rem,5rem) scale(1.1)  rotate(-2deg);}
    .systems-images:hover [data-image='3']{transform: translate(15rem,15rem) scale(1.1)  rotate(2deg);}
    .systems-text{
        padding-right: 3rem;
    }
}
@media screen and (max-width: 1069px) and (min-width: 400px) {
    .systems-imagges-container{
        width: 26rem;
    }
    .systems-images > img{
        width: 20rem;
    }
    .systems{
        padding-left: 3rem;
        justify-content: space-around;
    }
    [data-image='1']{transform: translate(0,0);}
    [data-image='2']{transform: translate(2rem,2rem);}
    [data-image='3']{transform: translate(4rem,4rem);}

    .systems-images:hover [data-image='1']{transform: translate(-2rem,-2rem) scale(1.075) rotate(5deg);}
    .systems-images:hover [data-image='2']{transform: translate(2rem,2rem) scale(1.075)  rotate(-2deg);}
    .systems-images:hover [data-image='3']{transform: translate(6rem,6rem) scale(1.075)  rotate(2deg);}
}
@media screen and (max-width: 400px) {
    .systems-imagges-container{
        width: 80vw;
    }
    .systems-images > img{
        width: 50vw;
    }
    .systems{
        padding-left: 5vw;
        justify-content: space-around;
    }
    [data-image='1']{transform: translate(0,0);}
    [data-image='2']{transform: translate(2rem,2rem);}
    [data-image='3']{transform: translate(4rem,4rem);}

    .systems-images:hover [data-image='1']{transform: translate(-2rem,-2rem) scale(1.075) rotate(5deg);}
    .systems-images:hover [data-image='2']{transform: translate(2rem,2rem) scale(1.075)  rotate(-2deg);}
    .systems-images:hover [data-image='3']{transform: translate(6rem,6rem) scale(1.075)  rotate(2deg);}
}



.systems-images::before{
    content: '';
    position: absolute;
    background-color: rgba(255, 255, 255, 0.09);
    width: 35vw;
    height: 35vw;
    z-index: 1;
    border-radius: 50%;
    filter: blur(5vw);
    z-index: 1;
    transition: .3s;
}
.systems-images:hover::before{
    width: 45vw;
    height: 45vw;
    transform: translateY(-5rem);
}

@media screen and (min-width: 1200px) {
    .systems-text{
        width: 30rem;
    }    
}
@media screen and (max-width: 1200px) and (min-width: 900px) {
    .systems-text{
        width: 20rem;
        padding-right: 2rem;
    }    
}

.systems-text > h1{
    text-align: center;
    font-size: 2.5rem;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.8);
    transition: .3s;
}
.systems-text > hr{
    border: 1px solid rgba(255, 255, 255, 0.25);
    width: 50%;
    margin: 1rem auto;
}
.systems-text > p{
    font-size: 1rem;
    margin: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.6);
    transition: .3s;
}