* {
  box-sizing: border-box;
}

html {
  background-color:red;
 
}


h1 {
  font-size: 50px;
   color: white;
  font-family: papyrus;
  text-shadow: 0px 0px 10px black;
  margin-top: -10px;
  margin-bottom: -10px;
}


#collapsible {
  background-color:black; 
  color: white; 
  font-family: comic sans ms;
  cursor: pointer;
  padding: 18px;
  width: 350px;
  border: 5px outset black;
  text-align: left;
  outline: none;
  font-size: 20px;
}

.active, #collapsible:hover {
  background-color: #555;
}

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

.mark {
  border: 10px outset black;
-webkit-animation: pop 1s ease-in-out infinite alternate;
 animation: pop 1s ease-in-out infinite alternate;
 -moz-animation: pop 1s ease-in-out infinite alternate;
}



@keyframes pop {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}
}