body{
background-image: url("https://i.imgur.com/1sDaZcG.png");
}

header{
text-align: center;
display: block;
}

h1{
font-family:Arial, Helvetica, sans-serif;
font-weight: bold;
color: #80dd98;
background-color: #950536;

text-align: center;
font-size: 350%;
margin: 0%; 
display: inline-block;
font-family: ;
padding: 7px;
border-radius: 10px;
border: 6px #ffcc01;
border-style:double;
}

h2{
color: #80dd98;
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
padding: 10px 2px;  
}

h3{
color: #6ecb87;
margin: 0%; 
display: block;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
padding: 10px 2px;

}

h4{
color: #ccffe2;
margin: 1%; 
display: block;
font-family: Arial, Helvetica, sans-serif;
font-weight:normal;
padding: 10px 25px;
padding: 10px;
border-radius: 10px;
display: inline-block;
font-size: 15px;
border: 6px #ffcc01;
border-style:double;
background-color:#950536;
}

a{
font-family: Arial, Helvetica, sans-serif;
font-size: 21px;
text-align: center;
border-radius: 5px;
display: block;
border: black;
}

button{
font-family: Arial, Helvetica, sans-serif;
font-size: 21px;
text-align: center;
border-radius: 15px;
background-color: #f0f0f0;
padding: 2px 15px;
}



div{
font-size: 23px;
font-family: Arial, Helvetica, sans-serif;
display: block;
border-radius: 15px;
margin: 1%;
padding: 0%;
border: 1px solid black;
background-color:#efe46b;
}

article{
display: inline-table;
padding: 10px 20px;
margin: 1%;	
}

p{
display: block;
}

input{
font-size: 18px;
background-color: #ffff;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
display: inline-block;
border-radius: 15px;
padding: 10px 15px;
}

section{
font-size: 25px;
color: #4ba967;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
display: block;
border-radius: 15px;
margin: 1%;
padding: 1%;
border: 6px #ffcc01;
border-style:double;
background-color:#950536;

}

footer{
font-size: 30px;
background-color: #ceaf19;
color: #6ecb87;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
display: block;
border-radius: 15px;
margin: 1%;
padding: 1%;
text-align: center;
border: 6px #ffcc01;
border-style:double;
background-color:#950536;

}

button:hover, button:active {
background-color: gray;
color: white;
text-align: center;

}

a:link, a:visited {
background-color: ghostwhite;
color: black;
padding: 2px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 15px;
border: 2px solid black;  
}

a:hover, a:active {
background-color: gray;
color: white;
}

.collapsible {
background-color: #950536;
color: #ccffe2;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
outline: none;
font-size: 20px;
text-align: center;
border: 6px #ffcc01;
border-style:double;

}

.active, .collapsible:hover {
background-color: #046322;
font-size: 25px;
text-align: center;

}
.collapsible {
background-color: #950536;
color: #ccffe2;
cursor: pointer;
padding: 18px;
border: none;
text-align: center;
outline: none;
font-size: 25px;
border: 6px #ffcc01;
border-style:double;
}

.active, .collapsible:hover {
background-color: #046322;
font-size: 26px;
}

.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2212";
}

.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}

h3:not(.normal){
color: #6ecb87;
}