@font-face {
    font-family: 'Typewriter';
    src: url("XTypewriter-Regular.woff");
}

body {padding:0;
background-color:#9198e5;
margin:0;
font-family:Arial, Helvetica, sans-serif}

* {box-sizing:border-box;}

.containerbox {position:relative;
margin-left:20%;
margin-right:20%;
width:60%;
overflow:visible;
height:4000px;}

.tape-section {
  position: absolute;
  width: 100%;
}

.top-tape {
position:absolute;
  height: 4vmin;
  margin-top: -35px;
margin-left:-10px;
  width: 80%;
  background-color: var(--tape-gray);
  border-right: 1px dotted var(--tape-edge-gray);
  border-left: 1px dotted var(--tape-edge-gray);
  opacity: 0.5;
}

.tape-section:first-of-type {
  top: 0;
}

.tape-section:last-of-type {
  bottom: 0;
}

:root {
  --pink: #ecb2ba;
  --pink-dark: #c6939a;
  --tape-gray: #dbd8be;
  --tape-edge-gray: #b7b49d;
  --transparent: rgba(255, 255, 255, 0);
}

.tape-section::before,
.tape-section::after {
  content: "";
  width: 10vmin;
  height: 4vmin;
  position: absolute;
  background-color: var(--tape-gray);
  opacity: 0.5;
  border-right: 1px dotted var(--tape-edge-gray);
  border-left: 1px dotted var(--tape-edge-gray);
}

.tape-section:last-of-type::after {
  transform: rotate(-45deg);
  right: -2vmin;
  top: -3vmin;
}

.tape-section:first-of-type::before {
  transform: rotate(-45deg);
  left: -6vmin;
}

.tape-section:first-of-type::after {
  transform: rotate(45deg);
  right: -3vmin;
  top: 0;
}

.tape-section:last-of-type::before {
  transform: rotate(45deg);
  left: -4vmin;
  bottom: 0;
}


.quiz {position:absolute;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
top:40px;
left:100px;
rotate:-3deg;
 background-color: white;
 background: repeating-linear-gradient(white, white 25px, #9198e5 26px, #9198e5 27px);
 background-position-y: 49px;
 height: 700px;
 width: 470px;
 line-height: 1.3;
padding-top:20px;
padding-left:10px;
padding-right:10px;
font-family: "Permanent Marker", cursive;
font-size:15pt;
}

.mambo {position:absolute;
background-color:rgb(223, 90, 90);
box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 6px;
font-family: "Rubik Mono One", monospace;
left:600px;
width:400px;
padding:10px;
top:330px;
rotate:1deg;}

.proclaimers {position:absolute;
background-color:blanchedalmond;
font-family: "Dancing Script", cursive;
font-size:18pt;
rotate:-3deg;
padding:15px;
width:300px;
top:570px;
left:620px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 8px;}

.mika {position:absolute;
background-color:pink;
  font-family: "Pacifico", cursive;
font-size:16pt;
padding:15px;
width:300px;
top:770px;
left:250px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 8px;}

.brunoandludo {position:absolute;
background-color: white;
width:40%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 2px 8px;
top:960px;
width:500px;
left:650px;
padding:20px;
rotate:4deg;
  font-family: "Rock Salt", cursive;
line-height:1.4;
}

.brunoandludo ul {margin-left:-20px;}
.brunoandludo ol {margin-left:-20px;}
.brunoandludo:after {
  content: "";
  position: absolute;
  top: 100%;
  height: 20px;
  width: 100%;
  left: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23618/rip.svg) bottom;
  background-size: 100%;
}

.fastcarI {background-color:antiquewhite ;
width:600px;;
font-family:'Typewriter', monospace;
color:  #352a2d;
position:absolute;
top:1200px;
left:-50px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 4px 8px;
padding:20px;
font-size:16pt;}

.eltangoderoxanne {position:absolute;
top:1700px;
background-color:black;
color:white;
padding:20px;
left:390px;
font-family: "Rubik Mono One", monospace;
box-shadow: rgba(0, 0, 0, 0.24) 0px 4px 8px;
rotate:-3deg;
width:460px;
border-radius:13px;
text-decoration: underline double;
}

.fastcaryou {background-color:antiquewhite ;
width:600px;;
font-family:'Typewriter', monospace;
color:  #352a2d;
position:absolute;
top:1900px;
left:350px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 4px 8px;
padding:20px;
font-size:16pt;}

.miley {position:absolute;
line-height:1.1;
font-family: "Permanent Marker", cursive;
top:2100px;
left:-100px;
background-color:#ff9729;
box-shadow: rgba(0, 0, 0, 0.24) 1px 4px 8px;
width:450px;
padding:20px;
font-size:18pt;
rotate:-3deg;}

.roxanne {position:absolute;
top:2400px;
left:400px;
width:400px;
background-color:#c6939a;
padding:15px;
  font-family: "Rock Salt", cursive;
line-height:1.3;
font-size:13pt;
box-shadow: rgba(0, 0, 0, 0.24) 1px 4px 8px;}

.somebody {position:absolute;
top:2550px;
left:640px;
background-color:rgb(223, 90, 90);
font-family: "Dancing Script", cursive;
width:400px;
padding:20px;
font-size:18pt;}

.brightside2 {position:absolute;
top:2550px;
background-color:white;
padding:10px;
rotate:2deg;
width:270px;font-family:'Typewriter', monospace;
box-shadow: rgba(0, 0, 0, 0.24) 1px 24px 18px;
}

.brightside3 {position:absolute;background-color:white;
top:2650px;
left:200px;
padding:10px;font-family:'Typewriter', monospace;
width:270px;
rotate:-3deg;
box-shadow: rgba(0, 0, 0, 0.23) 0px -10px 18px;}

.brightside4 {position:absolute;background-color:white;font-family:'Typewriter', monospace;
top:2735px;
width:270px;
box-shadow: rgba(0, 0, 0, 0.24) 4px -10px 25px;
padding:10px;
rotate:10deg;}

.brightside2:after {
  content: "";
  position: absolute;
  top: 100%;
  height: 20px;
  width: 100%;
  left: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23618/rip.svg) bottom;
  background-size: 100%;
}

.brightside3:before {
  content: "";
  position: absolute;
  top: -15%;
  height: 20px;
  width: 100%;
  left: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23618/rip.svg) bottom;
  background-size: 100%;
rotate:180deg;

}

.brightside3:after {
  content: "";
  position: absolute;
  top: 100%;
  height: 20px;
  width: 100%;
  left: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23618/rip.svg) bottom;
  background-size: 290%;
}

.brightside4:before {
  content: "";
  position: absolute;
  top: -15%;
rotate:180deg;
  height: 20px;
  width: 100%;
  left: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23618/rip.svg) bottom;
  background-size: 290%;
}

.brightside4:after {
  content: "";
  position: absolute;
  top: 100%;
  height: 20px;
  width: 100%;
  left: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23618/rip.svg) bottom;
  background-size: 220%;
}

.heartbreaker {
position:absolute;
background-color:pink;
  font-family: "Pacifico", cursive;
font-size:16pt;
top:2900px;
padding:15px;
width:450px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 0px 8px;
line-height:1.4;
rotate:-3deg;}

.rules {position:absolute;
background-color: white;
 background: repeating-linear-gradient(white, white 25px, #9198e5 26px, #9198e5 27px);
font-family: "Dancing Script", cursive;
font-size:19pt;
top:2980px;
left:600px;;
padding:15px;
width:450px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 0px 8px;
line-height:1.3;
rotate:5deg;}

.train {position:absolute;font-family: "Rubik Mono One", monospace;
width:550px;
background-color:#352a2d;
left:200px;
color:white;
top:3400px;
padding:20px;
box-shadow: rgba(0, 0, 0, 0.44) 0px 0px 10px;}

li:nth-child(1),li:nth-child(2),li:nth-child(3),li:nth-child(4),li:nth-child(5),li:nth-child(6),li:nth-child(7) {cursor:pointer;}