html{
    background-image: linear-gradient(to right, #8EC5FC , #F987FB);
    background-repeat: no-repeat; 
}

.background{
    background-image: url(images/18.png), url(images/17.png), url(images/16.png), url(images/15.png), url(images/14.png), url(images/13.png), url(images/5.png);
    background-position: left bottom, right bottom, right top, left top, center top, center left, center bottom;
    background-repeat: no-repeat; 
    background-size: 400px, 300px, 200px, 600px, 1300px, 80px, 750px; 
}

.container {
    width: 1024px;
    min-height: 300px;
    margin-left: auto;
    margin-right: auto;
}

h1{
    font-family: 'Pacifico', cursive;
    font-size: 3.5rem;
    margin-bottom: 40px; 
    text-align: center; 
}

h2, p{
    
    font-family: 'Sulphur Point', sans-serif;
    text-align: center; 
    font-weight: bold; 
    margin-bottom: 20px; 
}

h2{
    font-size: 1.5rem;
}

p{
    font-size: 1.2rem;
}

a{
    text-decoration: none;
    color: purple; 
}

main{
    height:100vh;
    display: flex;
    align-items: center;
15}

.herobox1{
}

.herobox2{
    
}

.herobox3{
    margin-left: 15px; 
}

.img{
    z-index:99; 
}

.img-right{
    height: 420px
}

.img-left{
    height: 320px;
}

.img-reverse{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.img-flip{
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

.img-rotate{
    transform: rotate(180deg);
}

/****** DESKTOP 

@media screen and (max-height: 580px) {

    .herobox1{
        display: none;
    }
    .herobox2{
        margin:auto;
    }
    .herobox3{
        display: none; 
    }
    
    .background{
        background-image: url(images/18.png), url(images/17.png), url(images/16.png), url(images/15.png), url(images/14.png), url(images/13.png), url(images/5.png);
        background-position: left bottom, right bottom, right top, left top, center top, center left, center bottom;
        background-repeat: no-repeat; 
        background-size: 300px, 180px, 120px, 550px, 1100px, 50px, 550px; 
    }
}
********/

/****** My Laptop*****/

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


    .herobox1{
        margin-left: 130px; 
        margin-bottom: 65px; 
    }

    .herobox2{
        margin-left: 10px; 
    }
    .herobox3{
        margin-top: 150px; 
        margin-left: 0px; 
    }

    .background{
        background-image: url(images/18.png), url(images/17.png), url(images/16.png), url(images/15.png), url(images/14.png), url(images/13.png), url(images/5.png);
        background-position: left bottom, right bottom, right top, left top, center top, center left, center bottom;
        background-repeat: no-repeat; 
        background-size: 300px, 200px, 150px, 500px, 1000px, 50px, 550px; 
    }

    .img-left{
        height: 250px; 
    }

    .img-right{
        height: 320px; 
    }

}

/*****IPAD PRO OR SMALL LAPTOPS OR TABLETS******/
@media screen and (max-width: 1024px) {
    .container{
        width: 500px;  
    }

    .herobox1{
        display:none; 
    }

    .herobox2{
        margin:auto;  
    }
    .herobox3{
        display:none;  
    }

    .background{
        background-image: url(images/18.png), url(images/17.png), url(images/16.png), url(images/15.png), url(images/13.png), url(images/5.png);
        background-position: left bottom, right bottom, right top, left top, center left, center bottom;
        background-repeat: no-repeat; 
        background-size: 300px, 200px, 150px, 500px, 50px, 480px; 
    }
    
}

/*******REGULAR TABLETS******/
@media screen and (max-width: 770px) {
    .background{
        background-image: url(images/18.png), url(images/17.png), url(images/16.png), url(images/15.png), url(images/13.png);
        background-position: left bottom, right bottom, right top, left top, center left;
        background-repeat: no-repeat; 
        background-size: 300px, 200px, 150px, 500px, 50px; 
    }
}

/****** Pixal XL ********/
@media screen and (max-width: 510px) {

    .container{
        width: 360px; 
    }
    h1{
        font-size: 3rem; 
    }

    h2{
        font-size: 1.2rem;
    }

    p{
        font-size: 1rem; 
    }
    .herobox2{
        margin-left: 20px;  
        padding-bottom: 120px; 
    }

    .background{
        background-image: url(images/18.png), url(images/16.png); 
        background-position: left bottom, right top; 
        background-repeat: no-repeat; 
        background-size: 320px, 200px; 
    }

}

/******* IPHONE X **********/
@media screen and (max-width:370px) {
.background{
    background-image: url(images/18.png), url(images/16.png); 
    background-position: left bottom, right top; 
    background-repeat: no-repeat; 
    background-size: 300px, 200px; 
    }
}