*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* cursor: url(images/cloud_cursor.png),auto; */
}
body{
    background-image: url("images/background-01.jpg");
    background-size: 100%;
    background-repeat: repeat-y;
    font-family: "TW Cen MT", "Karla", "Helvetica", sans-serif;
}

/*background images */
.cleft{
    height:30%;
    width: auto;
    position:absolute; 
    top: 165px;
    left:-110px;
    opacity: 0.8;
    z-index:-1;
    transition: .5s;
}
.cleft:hover{
    left:-125px;
    height:28%;
}
.cright{
    height:45%;
    width:auto;
    position: absolute;
    bottom:0;
    right:0;
    opacity: 0.8;
    z-index:-1;
    transition: .5s;
}
.cright:hover{
    height:40%;
}
.ctop{
    height:180px;
    width:auto;
    position:absolute;
    top:-90px;
    right: 0;
    opacity: 0.8;
    transition: .5s;
}
.ctop:hover{
    height:160px;
}
/*content*/
.wrapper{
    width:90%;
    padding:2rem;
    margin: 0 auto;
    z-index:0;
}
.maintext{
    color:mediumaquamarine;
    width:90%;
    font-weight: bold;
    position:absolute;
    padding-left:10%;
    margin-left:auto;
    margin-right:auto;
    margin-top: 18%;
    text-align:left;
    z-index: 1;
}
#maintext2{
    color:black;
    transition: .5s;
}
#maintext2:hover{
    padding-left:9.6%;
    margin-top: 17.6%;
}
.hello{
    font-size:5vw;
}
.line2{
    font-size: 2vw;
    margin:3px;
}

@media only screen and (max-width: 1080px) {
.maintext{
    left:10%;
    margin-top: 35%;
}
.hello{
    font-size:5em;
}
.line2{
    font-size: 1.5em;
}
.cleft{
    height:20%;
}
.cleft:hover{
    height: 18%;
}
.cright{
    height:25%;
}
.cright:hover{
    height: 20%;
}
}