Moibeal CSS

body {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: 0;
margin: 0;
padding: 0;
background-color: #F4F3FB;
background-image: url("https://www.transparenttextures.com/patterns/gray-floral.png");
background-size: 10%;
background-position: center;
background-repeat: repeat;
z-index: 0;
}

.picture {
background-image: url(https://pbs.twimg.com/media/EGWTdxFVAAANdQY.jpg);
background-size: 100%;
background-repeat: no-repeat;
position: absolute;
border: .5vh solid #0E0D1D;
border-bottom: .5vh solid #0E0D1D;
top: 17.7%;
left: 29.2%;
width: 90vh;
height: 61vh;
z-index: 2;
}


.p {
margin-left: 1vh;
text-indent: 10%;
}

.leftbox {
position: absolute;
background-color: #EB9EC0;
background-image: url("https://i.imgur.com/v1fwEbg.png");
background-size: 120%;
font-family: 'Satisfy', cursive;
font-size: 4vh;
color: #262A8D;
width: 50vh;
height: 70vh;
left: 10vh;
top: 14vh;
z-index: 2;
overflow-y: scroll;
-webkit-box-shadow: 0px 0px 1vh 1vh rgba(0,0,0,0.38);
box-shadow: 0px 0px 1vh 1vh rgba(0,0,0,0.38);
}

.rightbox {
position: absolute;
background-color: #EB9EC0;
background-image: url("https://i.imgur.com/YCCOLf2.png");
background-size: 120%;
font-family: 'Satisfy', cursive;
font-size: 4vh;
color: #262A8D;
width: 50vh;
height: 70vh;
right: 10vh;
top: 14vh;
z-index: 2;
overflow-y: scroll;
-webkit-box-shadow: 0px 0px 1vh 1vh rgba(0,0,0,0.38);
box-shadow: 0px 0px 1vh 1vh rgba(0,0,0,0.38);
}

.topbox {
position: absolute;
background-color: #708CBC;
background-image: url("https://www.transparenttextures.com/patterns/gray-floral.png");
background-size: 20%;
font-family: 'Satisfy', cursive;
font-size: 4vh;
color: #FDFBFE;
width: 90vh;
height: 14.5vh;
left: 29.4%;
top: 1.5vh;
z-index: 2;
overflow-y: scroll;
-webkit-box-shadow: 0px 0px 1vh 1vh rgba(0,0,0,0.38);
box-shadow: 0px 0px 1vh 1vh rgba(0,0,0,0.38);
}

.botbox {
position: absolute;
background-color: #708CBC;
background-image: url("https://www.transparenttextures.com/patterns/gray-floral.png");
background-size: 20%;
font-family: 'Satisfy', cursive;
font-size: 4vh;
color: #FDFBFE;
width: 90vh;
height: 14.5vh;
left: 29.4%;
bottom: 3vh;
z-index: 2;
overflow-y: scroll;
-webkit-box-shadow: 0px 0px 1vh 1vh rgba(0,0,0,0.38);
box-shadow: 0px 0px 1vh 1vh rgba(0,0,0,0.38);
}

.strip {
position: absolute;
background-color: #708CBC;
background-image: url("https://www.transparenttextures.com/patterns/gray-floral.png");
background-size: 15%;
width: 100%;
height: 40.6vh;
left: 0vh;
top: 28.75vh;
z-index: 1;
}

.triangletopright {
position: fixed;
width: 0;
height: 0;
right: 27.6%;
top: 17.4%;
border-left: 5vh solid transparent;
border-right: 5vh solid transparent;
border-top: 5vh solid #0E0D1D;
transform: rotate(225deg);
z-index: 3;
}

.triangletopleft {
position: absolute;
width: 0;
height: 0;
left: 27.92%;
top: 17.3%;
border-left: 5vh solid transparent;
border-right: 5vh solid transparent;
border-top: 5vh solid #0E0D1D;
transform: rotate(135deg);
z-index: 3;
}

.trianglebotleft {
position: absolute;
width: 0;
height: 0;
left: 27.9%;
top: 75.4%;
border-left: 5vh solid transparent;
border-right: 5vh solid transparent;
border-top: 5vh solid #0E0D1D;
transform: rotate(45deg);
z-index: 3;
}

.trianglebotright {
position: fixed;
width: 0;
height: 0;
right: 27.6%;
top: 75.4%;
border-left: 5vh solid transparent;
border-right: 5vh solid transparent;
border-top: 5vh solid #0E0D1D;
transform: rotate(315deg);
z-index: 3;
}

.botrightdiagonalline {
position: fixed;
width: 160vh;
height: 25vh;
top: 35vh;
left: -22vh;
z-index: -1;
background-color: #E778AD;
background-image: url("https://www.transparenttextures.com/patterns/squares.png");
background-size: 2.4%;
transform: rotate(315deg);
}

.botleftdiagonalline {
position: fixed;
width: 160vh;
height: 25vh;
top: 35vh;
right: -22vh;
z-index: -1;
background-color: #E778AD;
background-image: url("https://www.transparenttextures.com/patterns/squares.png");
background-size: 2.4%;
transform: rotate(45deg);
}

.topleftdiagonalline {
position: fixed;
width: 160vh;
height: 25vh;
top: 35vh;
left: -25vh;
z-index: 0;
background-color: #E778AD;
background-image: url("https://www.transparenttextures.com/patterns/squares.png");
background-size: 2.4%;
transform: rotate(45deg);
}

.toprightdiagonalline {
position: fixed;
width: 160vh;
height: 25vh;
top: 35vh;
right: -25vh;
z-index: -1;
background-color: #E778AD;
background-image: url("https://www.transparenttextures.com/patterns/squares.png");
background-size: 2.4%;
transform: rotate(135deg);
}

.nametexttop {
    position: absolute;
    left: 14.5vw;
    top: 4vh;
    background: #000000;
    width: 70vw;
    height: 7vw;
    font-family: 'Satisfy', cursive;
    font-size: 8vh;
    background: url(https://media2.giphy.com/media/nNQx8jrIvfXoc/source.gif) -110px -260px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display: block;
    text-align: center;
    letter-spacing: .2vw;
    -webkit-transition: opacity 2s linear;
    -moz-transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-10deg, 0deg);
    -o-transform: skew(-10deg, 0deg);
    -ms-transform: skew(-10deg, 0deg);
    transform: skew(-10deg, 0deg);
    z-index: 4;
}

.nametextbottom {
    position: absolute;
    left: 15vw;
    bottom: 3vh;
    background: #000000;
    width: 70vw;
    height: 5vw;
    font-family: 'Satisfy', cursive;
    font-size: 8vh;
    background: url(https://media2.giphy.com/media/nNQx8jrIvfXoc/source.gif) -110px -260px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display: block;
    text-align: center;
    letter-spacing: .2vw;
    -webkit-transition: opacity 2s linear;
    -moz-transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-10deg, 0deg);
    -o-transform: skew(-10deg, 0deg);
    -ms-transform: skew(-10deg, 0deg);
    transform: skew(-10deg, 0deg);
    z-index: 4;
}


::-webkit-scrollbar-track {
	border-radius: 1vw;
}

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

::-webkit-scrollbar-thumb {
	border-radius: 1vw;
}