.wrapperleft {
position:static;
width:48.5%;
float: left;
margin-left: .5%;
margin-right: auto;
display:block;
}

.wrapperleft p {
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
text-align: center;
color: black;
font-size: 260%;
}


.collapsibleleft {
width:100%;
position: relative;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
border: 6px double black;
border-radius: 30px;
outline: none;
font-size: 260%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
margin-bottom: 10px;
box-shadow: 1px 1px 2px black, 0 0 20px white, 1px 1px 35px red;
display: flex;
justify-content: center;
align-items: center;
}

.collapsibleleft:hover{
transform:translateY(4px);
filter:hue-rotate(90deg);
}


.activeleft{
position: relative;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
width: 100%;
border: 6px double black;
border-bottom: 0;
border-radius: 30px 30px 0 0;
outline: none;
font-size: 260%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
margin-bottom: 0px;
box-shadow: none;
}

.activeleft:hover{
filter:hue-rotate(90deg);
transform:translateY(4px);
}

.activeleft:hover + .contentleft {
transform:translateY(4px);
}

.contentleft {
display: none;
position: relative;
margin-bottom: 10px;
padding-top: 3%;
padding-bottom: 3%;
width: 100%;
height: fit-content;
border: 6px double black;
border-radius: 0 0 30px 30px;
border-top: 0;
background-color: rgba(217,217,217,.6);
text-align: center;
font-size: 180%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
font-weight:lighter; 
color: black;
float:left;
}


.contentleft::after {
content: "";
clear: both;
display: block;
padding: 0px;
}

.wrapperleft iframe {
border: 6px double black;
border-radius: 25px;
position: relative;
width: 90%;
height:450px;
}


.wrapperright {
position:static;
width:48.5%;
float: right;
margin-left: auto;
margin-right: .85%;
display:block;
}

.wrapperright p {
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
text-align: center;
color: black;
font-size: 260%;
}

.collapsibleright {
width:100%;
position: relative;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
border: 6px double black;
border-radius: 30px;
outline: none;
font-size: 260%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px #6699ff;
margin-bottom: 10px;
box-shadow: 1px 1px 2px black, 0 0 20px white, 1px 1px 35px red;
display: flex;
justify-content: center;
align-items: center;
}

.collapsibleright:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px white;
}


.activeright{
position: relative;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
width: 100%;
border: 6px double black;
border-bottom: 0;
border-radius: 30px 30px 0 0;
outline: none;
font-size: 260%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
margin-bottom: 0px;
box-shadow: none;
}

.activeright:hover{
filter:hue-rotate(90deg);
transform:translateY(4px);
}

.activeright:hover + .contentright {
transform:translateY(4px);
}

.contentright {
display: none;
position: relative;
margin-bottom: 10px;
padding-top: 3%;
padding-bottom: 3%;
width: 100%;
height: fit-content;
border: 6px double black;
border-radius: 0 0 30px 30px;
border-top: 0;
background-color: rgba(217,217,217,.6);
text-align: center;
font-size: 180%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
font-weight:lighter; 
color: black;
}

.contentright::after {
content: "";
clear: both;
display: block;
padding: 0px;
}

.wrapperright iframe {
border: 6px double black;
border-radius: 25px;
position: relative;
width: 90%;
height:450px;
}

.collapsible1 {
width: 98%;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding: 1.5%;
border: 6px double black;
border-radius: 30px;
outline: none;
overflow: hidden;
box-sizing: border-box;
margin-bottom: 10px;
box-shadow: 1px 1px 2px black, 0 0 20px white, 1px 1px 35px red;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
font-size: 360%;
display: flex;
justify-content: center;
align-items: center;
height: 180px;
}

.collapsible1:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px red;
}


.active1{
position: relative;
background-color: rgba(217,217,217,.6);
cursor: pointer;
padding: 1.5%;
width: 98%;
border: 6px double black;
border-bottom: 0;
border-radius: 30px 30px 0 0;
outline: none;
margin-left: auto;
margin-right: auto;
overflow: hidden;
margin-bottom: 0px;
box-shadow: none;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
text-align: center;
font-size: 360%;
box-sizing: border-box;
}

.active1:hover{
filter:hue-rotate(90deg);
transform:translateY(4px);
}

.active1:hover + .content1 {
transform:translateY(4px);
}

.content1 {
display: none;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding: 1.5%;
width: 98%;
height: fit-content;
border: 6px double black;
border-radius: 0 0 30px 30px;
border-top: 0;
background-color: rgba(217,217,217,.6);
overflow: hidden;
box-sizing: border-box;
}

.content1 .p1 {
font-size: 180%;
text-shadow: 2px 2px 5px #6699ff;
margin: 0.5px;
margin-top: 70px;
margin-bottom: 70px;
}

.content1 .p2 {
font-size: 100%;
color: white;
text-shadow: 2px 2px 5px #6699ff;
}

.content1 .p3 {
font-size: 280%;
text-shadow: 2px 2px 5px #6699ff;
margin-bottom: 8px;
}

.content1 .p4 {
font-size: 100%;
text-shadow: 2px 2px 5px #6699ff;
margin-bottom: 8px;
}

.content1::after {
content: "";
clear: both;
display: block;
padding: 0px;
}

.wrapperleft1 {
position:static;
width:48.4%;
float: left;
margin-left: .5%;
margin-right: auto;
display:block;
font-family:Grunge Overlords new Regular;
text-align: center;
text-shadow: 2px 2px 5px red;
font-size: 260%;
}

.wrapperright1 {
position:static;
width:48.4%;
float: right;
margin-left: auto;
margin-right: .5%;
display:block;
font-family:Grunge Overlords new Regular;
text-align: center;
text-shadow: 2px 2px 5px red;
font-size: 260%;
}

.wrapperright1 iframe {
border: 6px double black;
border-radius: 25px;
position: relative;
width: 100%;
height:450px;
float: none;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}

.wrapperleft1 iframe {
border: 6px double black;
border-radius: 25px;
position: relative;
width: 100%;
height:450px;
float:none;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}

.contentleft1 iframe {
float:none;
width: 90%;
}

.contentright1 iframe {
float:none;
width: 90%;
}

.collapsibleleft1 {
width:100%;
position: relative;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
border: 6px double black;
border-radius: 30px;
outline: none;
font-size: 100%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
box-shadow: 1px 1px 2px black, 0 0 20px white, 1px 1px 35px red;
float:none;
margin-left:auto;
margin-right: auto;
}

.collapsibleleft1:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px red;
}


.activeleft1{
position: relative;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
width: 100%;
border: 6px double black;
border-bottom: 0;
border-radius: 30px 30px 0 0;
outline: none;
font-size: 100%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
margin-bottom: 0px;
box-shadow: none;
float:none;
margin-left:auto;
margin-right: auto;
}

.activeleft1:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px red;
}

.activeleft1:hover + .contentleft1 {
transform:translateY(4px);
}

.contentleft1 {
display: none;
position: relative;
margin-bottom: 10px;
width: 100%;
height: fit-content;
border: 6px double black;
border-radius: 0 0 30px 30px;
border-top: 0;
background-color: rgba(217,217,217,.6);
text-align: center;
font-size: 180%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
font-weight:lighter; 
color: black;
float:none;
margin-left:auto;
margin-right: auto;
}

.collapsibleright1 {
width:100%;
position: relative;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
border: 6px double black;
border-radius: 30px;
outline: none;
font-size: 100%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
margin-bottom: 10px;
box-shadow: 1px 1px 2px black, 0 0 20px white, 1px 1px 35px red;
float:none;
margin-left:auto;
margin-right: auto;
display: flex;
justify-content: center;
align-items: center;
}

.collapsibleright1:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px red;
}


.activeright1{
position: relative;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding-top: 4%;
padding-bottom: 3%;
width: 100%;
border: 6px double black;
border-bottom: 0;
border-radius: 30px 30px 0 0;
outline: none;
font-size: 100%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
margin-bottom: 0px;
box-shadow: none;
float:none;
margin-left:auto;
margin-right: auto;
}

.activeright1:hover{
transform:translateY(4px);
text-shadow: 2px 2px 5px red;
}

.activeright1:hover + .contentright1 {
transform:translateY(4px);
}

.contentright1 {
display: none;
position: relative;
margin-bottom: 10px;
width: 100%;
height: fit-content;
border: 6px double black;
border-radius: 0 0 30px 30px;
border-top: 0;
background-color: rgba(217,217,217,.6);
text-align: center;
font-size: 180%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
font-weight:lighter; 
color: black;
float:none;
margin-left:auto;
margin-right: auto;
}

.collapsible {
width: 98%;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding: 1.5%;
box-sizing: border-box;
border: 6px double black;
border-radius: 30px;
outline: none;
font-size: 360%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
box-shadow: 1px 1px 2px black, 0 0 20px white, 1px 1px 35px red;
display: flex;
justify-content: center;
align-items: center;
height: 180px;
}

.collapsible:hover{
transform:translateY(4px);
filter:hue-rotate(90deg);
}


.active{
position: relative;
background-color: rgba(217,217,217,.6);
color: black;
cursor: pointer;
padding: 1.5%;
width: 98%;
box-sizing: border-box;
border: 6px double black;
border-bottom: 0;
border-radius: 30px 30px 0 0;
outline: none;
font-size: 360%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
margin-bottom: 0px;
box-shadow: none;
}

.active:hover{
filter:hue-rotate(90deg);
transform:translateY(4px);
}

.active:hover + .content {
transform:translateY(4px);
}

.content {
display: none;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding: 1.5%;
width: 98%;
box-sizing: border-box;
height: fit-content;
border: 6px double black;
border-radius: 0 0 30px 30px;
border-top: 0;
background-color: rgba(217,217,217,.6);
text-align: center;
font-size: 180%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
font-weight:lighter; 
color: black;
}

.content .p1 {
font-size: 180%;
text-shadow: 2px 2px 5px red;
margin-top: 70px;
margin-bottom: 70px;
}

.content .p2 {
font-size: 150%;
color: white;
text-shadow: 2px 2px 5px red;
}

.content .p3 {
font-size: 280%;
text-shadow: 2px 2px 5px red;
margin-bottom: 8px;
}

.content .p4 {
font-size: 100%;
text-shadow: 2px 2px 5px red;
margin-bottom: 8px;
}

.content::after {
content: "";
clear: both;
display: block;
padding: 0px;
}

.collapsiblesmall {
width: 100%;
position: relative;
margin-left: auto;
margin-right: auto;
background-color: rgba(77,77,77,.8);
color: white;
cursor: pointer;
padding: .8%;
box-sizing: border-box;
border: 6px double black;
border-radius: 15px;
outline: none;
font-size: 100%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
text-align: center;
margin-bottom: 10px;
padding-bottom: .45%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
height: 80px;
}

.collapsiblesmall:hover{
transform:translateY(4px);
filter:hue-rotate(90deg);
}


.activesmall{
position: relative;
background-color: rgba(77,77,77,.8);
color: white;
cursor: pointer;
padding: .8%;
width: 100%;
box-sizing: border-box;
border: 6px double black;
border-bottom: 0;
border-radius: 15px 15px 0 0;
outline: none;
font-size: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
font-family:Grunge Overlords new Regular;
text-shadow: 2px 2px 5px red;
margin-bottom: 0px;
box-shadow: none;
padding-bottom: .45%;
}

.activesmall:hover{
filter:hue-rotate(90deg);
transform:translateY(4px);
}

.activesmall:hover + .contentsmall {
transform:translateY(4px);
}

.contentsmall {
display: none;
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
padding: 1%;
box-sizing: border-box;
width: 100%;
height: fit-content;
border: 6px double black;
border-radius: 0 0 15px 15px;
border-top: 0;
background-color: rgba(77,77,77,.8);
text-align: center;
font-size: 100%;
overflow: hidden;
font-family:Grunge Overlords new Regular;
font-weight:lighter; 
color: white;
}

.contentsmall .p1 {
font-size: 180%;
text-shadow: 2px 2px 5px red;
margin: 0.5px;
margin-top: 70px;
margin-bottom: 70px;
}

.contentsmall .p2 {
font-size: 100%;
color: white;
text-shadow: 2px 2px 5px red;
}

.contentsmall .p3 {
font-size: 280%;
text-shadow: 2px 2px 5px red;
margin-bottom: 8px;
}

.contentsmall::after {
content: "";
clear: both;
display: block;
padding: 0px;
}

.contentsmall iframe {
border: 6px double black;
border-radius: 25px;
position: relative;
width: 45%;
height:450px;
float:left;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}