@import "main_style.css";

body{
    background-image: url("../img/Triangles_mobile.png"), url("../img/background2.png");
    width: 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-attachment: fixed, fixed;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    overflow: auto;
    margin-top: 20%;
}

.main_container{
    display: block;
    margin-top: 10%;
    margin-bottom: 30%;
}

.arrow_glitch{
    display: none;
}
/* ================== article main img ============ */
.main_article_img{
    width: 100%;
    padding: 0 1rem;
    position: relative;
    margin-bottom: 2rem;
}

.back_img_left{
    position: absolute;
    background-color: #23a6d5;
    width: 85%;
    height: 90%;
    z-index: -1;
    left: 0.7rem;
    top: -0.3rem;
    animation: back-slide 1.5s ease forwards;
}

.back_img_right{
    position: absolute;
    background-color: #e73c7e;
    width: 85%;
    height: 90%;
    z-index: -1;
    bottom: -0.3rem;
    right: 0.7rem;
    animation: back-slide2 1.5s ease forwards;
}

.main_article_img img{
    display: block;
    width: 100%;
    box-shadow: 0 0 5px rgb(36, 36, 36);
    animation: fadein .5s ease forwards;
    /* box-shadow: 6px 6px 0px -4px #e73c7e, -6px -6px 0px -4px #23a6d5; */
}

.article_title{
    color: white;
    font-family: 'Montserrat';
    position: absolute;
    bottom: 0;
    text-align: center;
    left: 0;
    padding: .7rem 1rem;
    font-size: .9rem;
    text-shadow: 0 0 2px rgb(27, 27, 27);
    left: 0;
    right: 0;
}

.article_title span{
    text-transform: uppercase;
    font-weight: bold;
    font-family: "Jost";
}

/* ================= article part 1 ============ */
.article_part{
    padding: 1rem;
    margin-bottom: 2rem;
}
.article_part p{
    color: white;
    font-size: .85rem;
    text-align: left;
    margin-bottom: .5rem;
}

.article_part p span{
    font-weight: 600;
    color: rgb(255, 210, 217);
}
/* =========== album covers ========= */
.album_covers{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}
.album_covers img{
    display: block;
    width: 100%;
    padding: 1rem;
}

.cover{
    width: 80%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover_bg{
    position: absolute;
    background-color: #e73c7e;
    width:90%;
    display: block;
    height: 90%;
    z-index:-1;
    transform: skew(-5deg, 3deg);
    animation: bg-rotate 5s ease-in-out infinite alternate-reverse;
}

.cover_back_bg{
    position: absolute;
    background-color: #23a6d5;
    width:90%;
    display: block;
    height: 90%;
    z-index:-1;
    transform: skew(8deg, -4deg);
    animation: bg-rotate2 3s ease-in-out infinite alternate;
}

@keyframes bg-rotate{
    from{
        transform: skew(-5deg, 3deg);
    }
    to{
        transform: skew(5deg, -3deg);
    }
}

@keyframes bg-rotate2{
    from{
        transform: skew(8deg, -4deg);
    }
    to{
        transform: skew(-8deg, 4deg);
    }
}
/* ================= VIDEO =========== */
.video_wrapper{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin: 0 2rem;
    transition: 1s ease;
}

.video_wrapper:hover{
    box-shadow: 0 0 25px rgb(98, 163, 247);
}

.video_wrapper iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* =============== footer =========== */
footer{
    display: none;
}

/* ================== KEYFRAMES ================ */
@keyframes back-slide{
    from{
        opacity: 0;
        transform: translate(-12%, -12%);
    }
    to{
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes back-slide2{
    from{
        opacity: 0;
        transform: translate(12%, 12%);
    }
    to{
        opacity: 1;
        transform: translate(0, 0);
    }
}

/* ================ MEDIA QUERIES ========== */
@media screen and (min-width: 480px){
    .article_title{
        font-size: 1.2rem;
        padding: .5rem 1.2rem;
    }
    .article_title span{
        font-size: 1.3rem;
    }
    .article_part p{
        font-size: 1rem;
    }
    body{
        margin-top: 15%;
    }
    .main_container{
        margin-top: 5%;
    }
    /* .back_img_left, .back_img_right{
        width: 95%;
        height: 95%;
        animation: 0;
    } */
}

@media screen and (min-width: 768px){
    .sub_body, body{
        background-image: url("../img/triangles_tablet.png"), url("../img/background2.png");
        width: 100%;
        background-repeat: no-repeat, no-repeat;
        background-position: center, center;
        background-attachment: fixed, fixed;
        background-size: auto, cover;
    }
    body{
        margin-top: 10%;
    }
    .main_container{
        margin-bottom: 0;
    }
    .article_title{
        font-size: 2rem;
        padding: 1rem 1.2rem;
    }
    .article_title span{
        font-size: 2.1rem;
    }
    .main_article_img{
        padding: 0 2rem;
    }
    .back_img_left{
        left: 1.7rem;
    }
    .back_img_right{
        right: 1.7rem;
    }
    .article_part p{
        font-size: 1.2rem;
    }
    .album_covers{
        flex-direction: row;
        justify-content: space-around;
    }
    .cover{
        flex-basis: 45%;
    }
    .arrow_glitch{
        display: block;
        position: relative;
        bottom: 0%;
        right: -35%;
        z-index: -1;
    }
    .arrow_glitch img{
        width: 100%;
    }
}

@media screen and (min-width: 1024px){
    .main_container{
        padding: 0 3rem;
    }
    .article_title{
        padding: 1rem 0;
    }
    .cover_bg, .cover_back_bg{
        width: 95%;
        height: 95%;
    }
    .video_wrapper{
        width: 70%;
        padding-bottom: 40%;
        margin: 0 auto;
    }
    .arrow_glitch{
        /* display: block;
        position: relative;
        bottom: 37%;
        right: -45%;
        z-index: -1;
        transform: rotate(290deg); */
        display: block;
        position: relative;
        bottom: 60%;
        right: -46%;
        z-index: -1;
        transform: rotate(290deg);
    }
    .arrow{
        /* display: block;
        position: absolute;
        bottom: -90%;
        top: initial;
        left: -7%;
        z-index: -1;
        transform: scale(-1, 1) rotate(290deg); */
        display: block;
        position: relative;
        bottom: 40%;
        top: initial;
        left: -46%;
        z-index: -1;
        transform: scale(-1, 1) rotate(290deg);
    }
}

@media screen and (min-width: 1280px){
    .sub_body, 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: 40px 35%, center;
        background-attachment: fixed, fixed;
    }
}

@media screen and (min-width: 1400px){
    body{
        margin-top: 5%;
    }
    .main_container{
        padding: 0 15%;
    }
    .video_wrapper{
        width: 85%;
        padding-bottom: 46%;
    }
    .arrow{
        transform: scale(-1.3, 1.3) rotate(290deg);
    }
    .arrow_glitch{
        transform: rotate(290deg) scale(1.3);
    }
    .back_img_left{
        left: 1.7rem;
        top: -0.3rem;
    }
    .back_img_right{
        right: 1.7rem;
        bottom: -0.3rem;
    }
}

@media screen and (min-width: 1600px){
    .article_title{
        font-size: 3rem;
    }
    .article_title span{
        font-size: 3.2rem;
    }
}