/* -------------------- INDEX.HTML STYLING (HEADER) --------------------- */
@media screen and (max-width: 1900px){

   .bottom-images img{
        height: 350px;
        width:240px;
        margin:5px;
    }
    
}
@media screen and (max-width: 1600px){

    .bottom-images img{
         height: 320px;
         width:210px;
         margin:5px;
     }
     
 }
 @media screen and (max-width: 1300px){

    .contain-images{
         flex-wrap: wrap;
     }
     
 }

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

        .about,
        .portofolio{
            font-size: 100px;
            width:41%;
        }
        .portofolio{
            width: 59%;
        }
        nav{
            width: 900px;
        }
        .logo-text{
            font-size: 45px;
        }
        .top-right-text{
            font-size: 18px;
            right:10px;          
        }

        aside .bottom-right-text{
            font-size: 45px;
            width: 250px;
            height: 170px;          
        }


    

        .contact-content h2{
            letter-spacing: 14px;
            font-size: 88px;
            top:1000px;
            width:600px;
        }
        .contact-content{
            width:90%;
            top:50%;
        }
        .contact-data a{
            font-size: 30px;
            letter-spacing:4px;
        }
        .top-right-number{
            position: absolute;
            left: 70px;
        }
}


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

        .about,
        .portofolio{
            font-size: 70px;
            width:41%;
        }
        .portofolio{
            width: 59%;
        }
        nav{
            width: 650px;
            height: 180px;
        }
        .contact{
            bottom: -20px;
            font-size:35px;
        }
        .bottom-left-article{
            width: 500px;
        }
        .customers{
            font-size:40px;
            width:260px;
            bottom:85px;
        }
}
@media screen and (max-width:750px){
    .contact-content h2{
        letter-spacing: 8px;
        font-size: 35px;
        width:250px;
    }
    .contact-content{
        width:90%;
        top:60%;
    }
    .contact-data a{
        font-size: 22px;
        letter-spacing:4px;
    }
}

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

        .about,
        .portofolio{
            font-size: 50px;
            width:41%;
        }
        .portofolio{
            width: 59%;
        }
        nav{
            width: 500px;
            height: 80px;
        }
        .contact{
            font-size:25px;
            bottom: -27px;
        }

        .logo-text{
            position: absolute;
            top: 20px;
            left: 15px;
            font-size: 50px;
        }
        .mobile-left-logo{
            top:20px;
            visibility:visible;
            font-size: 45px;
        }
        .mobile-socialm-icons{
            visibility:hidden;
        }


        aside .top-right-article{
            visibility: hidden;
        }
        .bottom-left-number{
            font-size: 350px;
        }
        .bottom-left-article{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 750px;
            height: 300px;
            visibility: hidden;
        }
}


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

        .about,
        .portofolio{
            font-size: 40px;
            width:41%;
        }
        .portofolio{
            width: 59%;
        }
        nav{
            width: 440px;
            height: 80px;
        }
        .contact{
            font-size:20px;
            bottom: -10px;
        }
        .logo-text{
            font-size: 35px;
        }
        .mobile-left-logo{
            top:20px;
            font-size: 35px;
        }
        .bottom-left-number{
            font-size: 310px;
        }
        .bottom-left-number{
            position: absolute;
            height: 100%;
            font-size: 300px;
            left: 30px;
            bottom: 70px;
            }
         .bottom-left-article{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 670px;
            height: 250px;
        }
       
        aside .bottom-right-text{
            font-size: 30px;
            width: 166px;
            height: 130px;
        }
}


@media screen and (max-width: 460px){
        .contact-content p:nth-of-type(3) a{
            font-size: 16px;
        }

        .mobile-socialm-icons{
            left:5px;
        }
}

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

        .about,
        .portofolio{
            font-size: 33px;
            width:40%;
        }
        .portofolio{
            width: 60%;
        }
        nav{
            width: 350px;
            height: 80px;
        }
        .contact{
            font-size:18px;
            bottom: -10px;
        }

        .top-right-text{
            font-size: 15px;
            left:70px;         
        }
        .customers{
            bottom:65px;
            width:140px;
        }
}

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

}

/* -------------------- INDEX.HTML STYLING (ABOUT ME) --------------------- */

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

        .fixed-background p{
            font-size: 40px;
        }
        .fixed-background p:nth-child(2){
            font-size: 25;
        }
        .top-section{
            padding-bottom:50px; 
            overflow: hidden;
        }
        .top-img img{
            position: relative;
            z-index: -1;
            width: 450px;
            height: 500px;
            transform: translate(3px);
            top: 30px;
        }
        .middle-section{
            margin-top:100px;   
        }
        .bottom-section{
            margin-top:150px;   
            flex-direction: column;
        }
        .top-text p{
            font-size: 40px;
        }
        .top-text p:nth-of-type(2) {
            font-size: 70px;
        }
        .top-text h3{
            font-size: 130px;
        }

        .middle-text{
            width:450px;
        }
        .middle-text p{
            padding-left: 40px;
        }
        .middle-pictures{
            position: relative;
            width: 650px;
            height: 350px;
        }
        .middle-pictures img{
           height: 80%;
        }
}

@media screen and (max-width: 1400px){
        .top-text p{
            font-size: 30px;
}
        .top-text p:nth-of-type(2) {
            font-size: 60px;
        }
        .top-text h3{
            font-size: 120px;
        }
        .top-section .top-text{
            position: relative;
            width: 70%; 
        }
        .top-section .top-img{
            width: 30%; 
        }
        .top-section img{
            position: relative;
            z-index: -1;
            width: 450px;
            height: 500px;
            left:50px;
            top: 30px;
        }
        .bottom-images img{
            height: 400px;
            margin-bottom:30px;
            width:300px;
        }
        .contain-images{
            width:100%;
            flex-wrap: wrap;
        }
        .middle-section{
            margin-top:30px;  
            flex-direction: column-reverse;
        }
        .middle-text{
            border-left: 2px solid rgba(226, 241, 13, 0.952);
            font-size: 18px;
            width:60%;
            left:2%;
            align-items: right;
            margin-bottom:60px;
        }
        .bottom-text img:nth-of-type(1),
        .bottom-text img:nth-of-type(2),
        .bottom-text img:nth-of-type(3){
            left:-9.3%;
            top: -8.2%;
            width: 60px;
            height: 60px;
        }
        .bottom-text img:nth-of-type(2){
            left:-11%;
            top: -10%;
            width: 80px;
            height: 80px;
        }
        .middle-pictures{
            position: relative;
            width: 750px;
            height: 400px;
        }
        .middle-pictures img{
           height: 90%;
        }
}

@media screen and (max-width: 1100px){
              
        .top-text h3{
            font-size: 90px;
        }
        .middle-pictures{
            width: 550px;
            height: 350px;
        }
    }
    @media screen and (max-width: 900px){
              
        .middle-pictures{
            width: 450px;
            height: 300px;
        }
    }


@media screen and (max-width: 800px){
        .middle-text{
            width:88%;
        }           
        .bottom-section{
            margin-top:80px;
        }

        .bottom-text{
            font-size: 17px;
            width: 400px;
        }

        .top-text p{
            font-size: 20px;
        }
        .top-text p:nth-of-type(2) {
            font-size: 24px;
            margin-left:0;
        }
        .top-text h3{
            font-size:37px;
            margin-top: 60px;
            margin-left: 10px;
        }       
        .top-section .top-text{
            position: relative;
            width: 70%; 
        }
        .top-section .top-img{
            width: 30%; 
        }
        .top-section img{
            position: relative;
            z-index: -1;
            width: 250px;
            height: 300px;
            left:50px;
            top: 30px;
        }
        .fixed-background p{
            font-size: 30px;
        }
        .fixed-background p:nth-child(2){
            font-size: 16px;
            margin-top:50px;
        }
        .top-img img{
            position: relative;
            z-index: -1;
            transform: translate(-20px);
            top: 30px;
        }
        .about-content{
            left:0;
        }
        .fixed-background p{
            font-size: 30px;
        }
        .fixed-background p:nth-child(2){
            font-size: 20px;
        }
        .bottom-images img{
            height: 330px;
            width:250px;
            margin:5px;
        }
        .bottom-images h1{
            margin-bottom:10px;
            font-size:45px;
        }
         .bottom-text{
            position: relative;
            font-size: 18px;
            width: 300px;
            color:rgb(82, 81, 81);
            margin: auto;
            border-bottom: 17px dotted  rgba(110, 221, 197, 0.973);
        }
         .bottom-text img:nth-of-type(1),
        .bottom-text img:nth-of-type(2),
        .bottom-text img:nth-of-type(3){
            left:-4.3%;
            top: -11%;
            width: 80px;
            height: 80px;
        }
        .bottom-text img:nth-of-type(2){
            left:-7.5%;
            top: -12.5%;
            width: 100px;
            height: 100px;
        }
       .bottom-section{
            padding-top:40px;  
        }
         .middle-pictures img{
            height: 72%;
        }
        .bottom-section{
            margin-top:80px;
        }
        .middle-text p{
            text-indent: 20px;
            padding-left: 10px;
        }

}



    /* ----------------------- PAINTINGS SECTION ------------------------ */

    
@media screen and (max-width:2200px){
    .paintings-content{
        position: relative;
        right:5px;
        margin:auto;
        width: 90vw;
        visibility: hidden;
        max-width: 1400px; 
        animation: animatePaintingsContent 0.5s ease forwards 2.5s;
    }
    .contain-paint{
        width:400px;
        height:600px;
         
    }
    .contain-paint img{
        left: 45px;
        bottom: -35px;
    }
    .contain-text{
        width:700px;
        height:350px;
    }
    .contain-text p{
        font-size:20px;
    }
    .contain-text p:nth-child(1){
        font-size: 100px;
    }
    .contain-text p:nth-child(4){
        font-size: 25px;
        font-style: italic;
        margin-top: 30px;
    }
    .color-box-one{
        width: 400px;
        height: 400px;
    }
    .color-box-two{
        width: 400px;
        height: 400px;
    }
    .color-box-three{
        width: 500px;
        height: 100px;
    }
    .color-box-four{
        width: 450px;
        height: 400px;
        border-top:350px solid orangered;
    }
    .color-box-five{
        width: 400px;
        height: 500px;
    }
    .color-box-six{
        width: 400px;
        height: 400px;
    }
    .color-box-seven{
        position: absolute;
        width: 250px;
        height: 250px;
        z-index:1;
        right:-110px;
        top:170px;
        background-color: rgb(17, 117, 96);
    }
    .color-box-eight{
        height: 500px;
        right:500px;
    }
    .color-box-nine{
        position: absolute;
        width: 700px;
        height: 300px;
        z-index:1;
        right:-30px;
        top:180px;
        border:10px solid rgb(177, 88, 172);
        border-radius: 50px;
    }
    .color-box-ten,
    .color-box-twelve,
    .color-box-eleven{
        height: 400px;
    }
    .color-box-sold-one,
    .color-box-sold-two,
    .color-box-sold-three{
        width: 480px;
    }
}



@media screen and (max-width:1450px){
    .paintings-content{
        max-width: 1000px;
    }
    .contain-paint{
        width:350px;
        height:500px;
    }
    .contain-text{
        width:500px;
        height:200px; 
    }
    .contain-text p{
        font-size:20px;
    }
    .contain-text p:nth-child(1){
        font-size: 70px;
    }
    .contain-text p:nth-child(4){
        font-size: 25px;
        font-style: italic;
        margin-top: 10px;
    }
    .color-box-one{
        width: 300px;
        height: 300px;
        right:10px;
        top:180px;
    }
    .color-box-two{
        width: 300px;
        height: 300px;
        right:350px;
        bottom:20px;      
    }
    .color-box-three{
        width: 400px;
        height: 100px;
    }
    .color-box-four{
        width: 350px;
        height: 350px;
        border-top:300px solid orangered;
    }
    .color-box-five{
        width: 300px;
        height: 400px;
        right:140px;
    }
    .color-box-six{
        width: 320px;
        height: 320px;
        border:30px solid rgba(238, 195, 170, 0.349);
        right:270px;
        bottom:80px;
    }
    .color-box-seven{
        width: 200px;
        height: 200px;
        right:-50px;
    }
    .color-box-eight{
        height: 400px;
        right:350px;
    }
    .color-box-nine{
        width: 500px;
        height: 200px;
        right:-20px;
        top:220px;
    }
    .color-box-ten,
    .color-box-twelve,
    .color-box-eleven{
        width: 300px;
        height: 300px;
    }
    .color-box-sold-one,
    .color-box-sold-two,
    .color-box-sold-three{
        width: 340px;
    }
}



@media screen and (max-width:1100px){
    .contain-paint{
        background-color:transparent;     /* rgb(32, 32, 36) */
        box-shadow: -8px -8px 33px 1px rgba(148, 58, 58, 0.897);
        z-index: 1000;
    }
    .painting-one,
    .painting-two,
    .painting-three,
    .painting-four,
    .painting-five,
    .painting-six,
    .painting-seven,
    .painting-eight,
    .painting-nine,
    .painting-ten,
    .painting-eleven,
    .painting-twelve,
    .painting-sold-one,
    .painting-sold-two,
    .painting-sold-three
    {
        position: relative;
        width:100%;   
        padding-top:100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:initial;
        margin-bottom:180px;
    }
    .contain-text{
        transform: translateY(100px);
    }
    .color-box-seven{
        width: 200px;
        height: 200px;
        right:20px;
        z-index: 1;
    }
    .bottom-images img{
        height: 350px;
        width:280px;
        margin:5px;
        margin-bottom:30px;
    }
}



@media screen and (max-width:800px){
    .progress-top-bar{
        display: none;
    }
    .contain-paint{
        width:300px;
        height:400px;
    }
    .contain-text{
        height:40%; 
        background-color: transparent;
        position: absolute;
        top:410px;
    }
    .contain-text p{
        color:rgba(222, 184, 135, 0.219);
        text-align: center;
        font-size:16px;
        z-index:1;
        margin-bottom: 3px;
    }
    .contain-text p:nth-child(1){
        font-size:30px;
        font-style: italic;
        padding-bottom:10px;
    }
    .contain-text p:nth-child(4){       
        font-style: italic;
        font-size:16px;
        margin-top:0;
    }
    .color-box-sold-one,
    .color-box-sold-two,
    .color-box-sold-three{
        background-color: transparent;
    }
    .contain-ico-paintings{
        position: fixed;
        left:35px;
    }
    .contain-ico-paintings img{
        width:90%;
        height:27px;
        margin-top:4px;
    }
    .progress-top-bar{
        right:95px;
        transform: translate(80px);
        width:2px;
    }
    .painting-four .contain-text{
        backdrop-filter: blur(0);
    }
    .back-button,
    .go-to-top{
        top:10px;
        left:1px;
        width: 60px;
        height:50px;
        font-size:16px;
        border:initial;
        opacity: 1;
        text-align: center;
        z-index: 10;
        letter-spacing: 2px;
    }
    .go-to-top{
        opacity: 0;
        z-index: 1;
    }
    .main-center-message-text p {
        font-size:30px;
        letter-spacing:0;
    }
    .painting-five .contain-text{
        backdrop-filter: blur(0);
    }
    .painting-four .contain-text{
        backdrop-filter: blur(0);
    }
    .painting-nine .contain-text{
        backdrop-filter: blur(0);
    }
    .contain-images{
        margin-bottom: 30px;;
    }
}

@media screen and (max-width:700px){
    .customers{
        font-size:35px;
        width:200px;
        bottom:85px;
        left:25px;
    }
    .customers p:before{
        font-size:18px;
        right:0px;
        top:50px;
        letter-spacing: 5px;
    }
}

@media screen and (max-width:600px){
    .contain-text p{
        color:rgba(222, 184, 135, 0.719);
        text-align: center;
        font-size:35px;
        z-index:1;
    }
    .contain-ico-paintings{
        left:15px;
    }
    .contain-paint img{
        position: absolute;
        left: 15px;
        bottom: -15px;
        width: 100%;
        height: 100%;
    }
    .contain-paint{
        border-radius:initial;
        width:250px;
        height:400px;
    }
    .contain-text{
        height:200px;
        backdrop-filter: blur(0);
        width: 270px;
    }
    .contain-text p{
        margin:1px;
        padding:1px;
        font-size:17px;
        font-style: italic;
    }
    .contain-text p:nth-child(1){
        font-size: 35px;   
        font-style:normal;
    }
    .contain-text p:nth-child(3){
        margin-bottom:0;
    }
    .contain-text p:nth-child(4){
        font-size: 17px;
    }
    .color-box-one{
        width: 270px;
        height: 270px;
        right:10px;
        top:180px;
    }
    .color-box-two{
        width: 300px;
        height: 300px;
        right:230px;
        bottom:20px;     
        transform: rotate(-20deg); 
    }
    .color-box-three{
        width: 400px;
        height: 100px;
    }
    .color-box-four{
        width: 320px;
        height: 320px;
        border-top:300px solid orangered;
    }
    .color-box-five{
        width: 200px;
        height: 300px;
        right:140px;
    }
    .color-box-six{
        width: 320px;
        height: 320px;
        border:30px solid rgba(238, 195, 170, 0.349);
        right:270px;
        bottom:80px;
    }
    .color-box-seven{
        width: 200px;
        height: 200px;
        right:100px;
        z-index: 1;
        transform: rotate(20deg);
    }
    .color-box-eight{
        height: 400px;
        right:350px;
        right:170px;
        top:70px;
        
    }
    .color-box-nine{
        width: 200px;
        height: 400px;
        left:30px;
        top:130px;
        border:3px solid rgb(177, 88, 172);
        border-radius: initial;
    }
    .color-box-ten,
    .color-box-twelve,
    .color-box-eleven{
        width: 300px;
        height: 300px;
    }
    .color-box-sold-one,
    .color-box-sold-two,
    .color-box-sold-three{
        width: 340px;
    }
    .color-box-eleven{
        width: 200px;
        left:120px;
        background-color: rgba(150, 38, 90, 0.719);
        border-radius: initial;
        transform: rotate(20deg);
    }
    .color-box-twelve{
        background-color: rgba(38, 45, 109, 0.719);
        top:300px;
    }
}

@media screen and (max-width: 500px){
    .close-customers-button{
        position: absolute;
        width:30px;
        height:30px;
        left:10px;
        top:10px;
        transition: 0.5s;
    }
        .color-box-one{
            width: 250px;
            height: 250px;
            right:30px;
            top:180px;
        }
        .color-box-two{
            width: 300px;
            height: 300px;
            right:230px;
            bottom:20px;     
            transform: rotate(-20deg); 
        }
        .color-box-three{
            width: 400px;
            height: 100px;
            right:10px;
        }
        .color-box-four{
            width: 320px;
            height: 320px;
            border-top:300px solid orangered;
        }
        .color-box-five{
            width: 200px;
            height: 300px;
            right:140px;
        }
        .color-box-six{
            width: 320px;
            height: 320px;
            border:30px solid rgba(238, 195, 170, 0.349);
            right:270px;
            bottom:80px;
        }
        .color-box-seven{
            width: 200px;
            height: 200px;
            right:100px;
            z-index: 1;
            transform: rotate(20deg);
        }
        .color-box-eight{
            height: 400px;
            right:350px;
            right:192px;
            top:70px;
           
        }
        .color-box-ten,
        .color-box-twelve,
        .color-box-eleven{
            width: 300px;
            height: 300px;
        }
        .color-box-sold-one,
        .color-box-sold-two,
        .color-box-sold-three{
            width: 340px;
        }
        .color-box-eleven{
            width: 160px;
            left:40px;
            right: initial;
            background-color: rgba(150, 38, 90, 0.719);
            border-radius: initial;
            transform: rotate(60deg);
        }
        .color-box-twelve{
            background-color: rgba(38, 45, 109, 0.719);
            top:300px;
            right:150px;
            width: 130px;
            height: 330px;
        }
        .middle-pictures img{
            height: 90%;
        }
        .middle-pictures{
            width:300px;
            height:150px;
        }
        .customers{
            font-size:26px;
            left:2px;
            bottom:60px;
        }
        .customers p:before{
            top:35px;
            font-size:20px;
            letter-spacing: 0;
            left:80px;
            width:150px;
        }
}



@media screen and (max-width:420px){
    .customers{
        font-size:30px;
        width:30px;
        left:5px;
        letter-spacing: 2px;
        bottom:60px;
    }
    .customers p:before{
        font-size:18px;
        left:30px;
        top:35px;
    }
}



@media screen and (max-width:1170px){
    .top-img img{
        display: none;
    }
    .top-section .top-text{
    
        width: 100%; 
    }
}

@media screen and (max-height:620px){
    .contain-ico-paintings img{
        width:85%;
        height:24px;
        margin-top:2px;
    }
    .contain-ico-paintings {
        left:6px;
    }
}