@import "main_style.css";

/* ===================== HEADER ================ */

/* ===================== MAIN ================ */
main{
    /* height: 100vh; */
    overflow: auto;
}

.main_container{
    /* height: 100vh; */
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.about_img{
    width: 100%;
    margin-top: 5rem;
    /* position: fixed; */
    padding: 0 1rem;
    animation: slideIn 1.5s ease-in-out forwards;
}

@keyframes slideIn{
    from{
        opacity: 0;
        transform: translateY(-100%);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

.about_img img{
    display: block;
    width: 100%;
}

.about_text{
    margin-top: 2rem;
    margin-bottom: 1rem;
    opacity: 0;
    animation: text-fade 1.2s ease-in-out 1s forwards;
}

.about_desc{
    color: rgb(255, 217, 255);
    text-align: center;
    padding: .5rem;
    font-family: 'Jost', sans-serif;
}

/* ===================== ARROWS IMG ==================== */
.arrow{
    mix-blend-mode: screen;
    transform: rotate(180deg);
    position: fixed;
    left: 0;
    top: 40%;
    display: none;
    animation: arrow-flicker 4s linear infinite forwards reverse;
}

.arrow img{
    display: block;
}

.arrow_glitch{
    mix-blend-mode: screen;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    animation: arrow-flicker 5s linear 1s infinite forwards reverse;
}

.arrow_glitch img{
    display: block;
    width: 150px;
    position: relative;
}
/* ======================== MEDIA QUERIES ============== */
@media screen and (min-width: 320px) and (max-width: 479px){
    .about_img{
        width: 85%;
        margin-top: 3rem;
    }
    .about_text{
        margin: 0;
    }
    .about_desc{
        padding: 0 2rem;
    }
    .about_desc:first-child{
        margin-bottom: .5rem;
    }
    .arrow_glitch img{
        width: 120px;
    }
    footer{
        opacity: 0;
    }
}
@media screen and (min-width: 480px){
    .sub_body{
        background-image: url("../img/triangles_tablet.png"), url("../img/background2.png");
        width: 100%;
        /* background-size: 100%, cover; */
        background-repeat: no-repeat, no-repeat;
        background-position: center, center;
        background-attachment: fixed, fixed;
    }

    .about_img{
        width: 80%;
    }

    .about_text{
        margin-top: 2rem;
        padding: 0 4rem;
        line-height: 1.5rem;
    }

    .arrow_glitch img{
        bottom: 1.5rem;
    }
}

@media screen and (min-width: 576px){
    .about_text{
        font-size: 1.3rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px){
    .about_img{
        width: 60%;
        margin-top: 8rem;
    }

    .about_text{
        padding: 0 10rem;
    }

    .arrow{
        display: block;
    }

    .arrow img{
        width: 150px;
    }

    .arrow_glitch{
        position: absolute;
        right: 0;
        top: 65%;
        display: block;
        width: auto;
    }
}

@media screen and (min-width: 992px){
    .about_img{
        width: 60%;
    }
    .arrow{
        display: block;
        top: 25%;
    }
    .arrow img{
        width: 150px;
    }
    .about_text{
        padding: 0 20%;
        line-height: 1.8rem;
        margin: 0;
    }
}

@media screen and (min-width: 1200px){
    .sub_body{
        background-image: url("../img/triangles_desktop.png"), url("../img/background2.png");
        width: 100%;
        background-size: 85%, cover;
        background-repeat: no-repeat, no-repeat;
        background-position: 16px 62%, center;
        background-attachment: fixed, fixed;
    }
    .arrow img{
        width: 100%;
    }

    .arrow_glitch img{
        width: 200px;
        top: -50%;
    }
}

@media screen and (min-width: 1400px){
    .about_img{
        width: 40%;
    }

    .arrow_glitch{
        mix-blend-mode: screen;
        width: auto;
        display: block;
        position: fixed;
        right: 0;
        bottom: 8%;
        animation: arrow-flicker 5s linear 1s infinite forwards reverse;
    }

    .about_text{
        padding: 0 20%;
        font-size: 1.8rem;
        line-height: 2.4rem;
    }

    .about_desc:first-child{
        margin-bottom: 2rem;
    }
}