/* scroll bar */


::-webkit-scrollbar{
    width: 2vw;
}

::-webkit-scrollbar-thumb{
    background: linear-gradient(90deg, #CF000B 0%, #4632E3 100%);
}

::-webkit-scrollbar-track{
    background: linear-gradient(90deg, #EE81FF 2%, #CA1228 100%);
}

html{
    background: linear-gradient(90deg, #EE81FF 2%, #CA1228 100%);
}

/* container block 1 */

.block1{
    display: flex;
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
}

.imageone{
    width: 20%;
    height: 100vh;
    background-size: cover;
    background: linear-gradient(180deg, #C1965F 0%, #694223 100%);
    cursor:url(images/cursor1.png), auto;
    top: 0;
    left: 0;
}

.imageone:hover{
    background-image:url(images/1.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.imagetwo{
    width: 50%;
    height: 100vh;
    background: linear-gradient(180deg, #360206 0%, #C75B51 100%);
    background-size: cover;
    cursor:url(images/cursor1.png), auto;
}

.imagetwo:hover{
    background-image: url(images/2.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.imagethree{
    width: 31%;
    height: 100vh;
    background: linear-gradient(180deg, #700103 0%, #C76C40 100%);
    background-size: cover;
    cursor:url(images/cursor1.png), auto;
}

.imagethree:hover{
    background-image: url(images/replace.png);
    background-size: cover;
    position: absolute;
    left: 69%;
    background-repeat: no-repeat;
}


/* container block 2 */

.block2{
    display: flex;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 100vh;
    left: 0;
}
.imagefour{
    width: 50%;
    height: 60%;
    background: linear-gradient(180deg, #6992B1 0%, #C4A187 100%);
    cursor:url(images/cursor2.png), auto;
    
}


.imagefour:hover{
    background-image: url(images/4.png);
    background-size: cover;
    background-repeat: no-repeat;
}


.imagefive{
    width: 50%;
    height: 100vh;
    background: linear-gradient(180deg, #F6CBD7 0%, #F7DF53 100%);
    cursor:url(images/cursor2.png), auto;
}


.imagefive:hover{
    background-image: url(images/5.png);
    background-size: cover;
    background-repeat: no-repeat;
}


.imagesix{
    width: 25%;
    height: 40%;
    background: linear-gradient(90deg, #CF68BF 0%, #FAC3A4 100%);
    position: absolute;
    top:60%;
    left:0;
    cursor:url(images/cursor2.png), auto;
}


.imagesix:hover{
    background-image: url(images/6.png);
    background-size: cover;
    background-repeat: no-repeat;
}


.imageseven{
    width: 25%;
    height: 40%;
    background: linear-gradient(270deg, #6992B1 0% 0%, #9EA7A3 87.42%);
    position: absolute;
    top:60%;
    left:25%;
    cursor:url(images/cursor2.png), auto;
}

.imageseven:hover{
    background-image: url(images/7.png);
    background-size: cover;
    background-repeat: no-repeat;
} 

/* Block 3 */
.block3{
    display: flex;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 200vh;
    left: 0;
}

.imageeight{
    background: linear-gradient(90deg, #CF000B 0%, #4632E3 100%);
    width: 45%;
    height: 50%;
    position: absolute;
    left: 0;
    cursor:url(images/cursor3.png), auto;
}

.imageeight:hover{
    background-image: url(images/8.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.imagenine{
    background: linear-gradient(90deg, #1222FF -5.56%, #C3051E 100%);
    width: 45%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    cursor:url(images/cursor3.png), auto;
}

.imagenine:hover{
    background-image: url(images/9.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.imageten{
    background:linear-gradient(90deg, #F5D46D 0%, #BB1A25 100%);
    width: 30%;
    height: 40%;
    position: absolute;
    top: 0;
    left: 45%;
    cursor:url(images/cursor3.png), auto;
}

.imageten:hover{
    background-image: url(images/10.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.imageeleven{
    width: 30%;
    height: 40%;
    background: linear-gradient(90deg, #F77DB5 0%, #0475BC 100%);
    position: absolute;
    top: 0;
    left: 70%;
    cursor:url(images/cursor3.png), auto;
}

.imageeleven:hover{
    background-image: url(images/11.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.imagetwelve{
    width: 55%;
    height: 60%;
    background: linear-gradient(90deg, #EE81FF 2%, #CA1228 100%);
    position: absolute;
    top: 40%;
    left: 45%;
    cursor:url(images/cursor3.png), auto;
}

.imagetwelve:hover{
    background-image: url(images/12.png);
    background-size: cover;
    background-repeat: no-repeat;
}

/* block 4 */

.block4{
    display: flex;
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 300vh;
    left: 0;
}


.imagethirteen{
    width: 40%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0px;
    background: linear-gradient(180deg, #EA382E 0%, #E9C070 100%);
    cursor:url(images/cursor4.png), auto;
}
.imagethirteen:hover{
    background-image: url(images/13.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.imagefourteen{
    width: 60%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 40%;
    background:  linear-gradient(90deg, #EB3D31 7.56%, #EABC6E 99.91%);
    cursor:url(images/cursor4.png), auto;
}

.imagefourteen:hover{
    background-image: url(images/14.png);
    background-size: cover;
    background-repeat: no-repeat;
} 


/* footer */

.footer{
    top: 400vh;
    left: 0;
    position: relative;
    margin-left: .5em;
    margin-right: .5em;
    margin-top: 2em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 30px;
    width: 95vw;
}

.svg{
    height: 22px;
    width: auto;
}



/* Media Querie iphone */

@media (max-width:940px){
.imagefour{
    background-image: url(images/4.png);
    background-size: cover;

}

.imageeleven{
    background-size: cover;
    background-image: url(images/11.png);
}

.imagenine{
    background-image: url(images/9.png);    background-size: cover;

}


.imagefourteen{
    background-image:url(images/14.png);
    background-size: cover;
}

}