h2.myh2{
  margin-top:-35px;
}

header {
  width: 100%;
  display: inline-block;
  flex-direction: column;
  align-items: center;
}
header h3 {
  position: relative;
  width: 80%;
  font-size: 1.5em;
  font-weight: 600;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
header .header-1{
  background-image: repeating-radial-gradient(farthest-side at 5px 5px,#553c9a, #ee4b2b, #553c9a);
}
.buttonbox{
  padding:5px;
}


.comic-button {
display: inline-block;
padding: 10px;
font-size: 24px;
text-align: center;
text-decoration: none;
color: #fff;
background-color: #ff5252;
border: 2px solid #000;
border-radius: 10px;
box-shadow: 5px 5px 0px #000;
transition: all 0.3s ease;
letter-spacing: 2px;
margin-bottom: 20px;
margin-right: 20px;
}

.comic-button:hover {
background-color: #fff;
color: #ff5252;
border: 2px solid #ff5252;
box-shadow: 5px 5px 0px #ff5252;
}

.comic-button:active {
box-shadow: none;
transform: translateY(4px);
}

.comic-button2 {
display: inline-block;
padding: 10px;
font-size: 24px;
text-align: center;
text-decoration: none;
color: #fff;
background-color: darkCyan;
border: 2px solid #000;
border-radius: 10px;
box-shadow: 5px 5px 0px #000;
transition: all 0.3s ease;
letter-spacing: 2px;
margin-bottom: 20px;
margin-right: 20px;
}

.comic-button2:hover {
background-color: #fff;
color: darkCyan;
border: 2px solid darkCyan;
box-shadow: 5px 5px 0px darkCyan;
}

.comic-button2:active {
box-shadow: none;
transform: translateY(4px);
}



.comic-button3 {
display: inline-block;
padding: 10px;
font-size: 24px;
text-align: center;
text-decoration: none;
color: #fff;
background-color: DarkSlateBlue;
border: 2px solid #000;
border-radius: 10px;
box-shadow: 5px 5px 0px #000;
transition: all 0.3s ease;
letter-spacing: 2px;
margin-bottom: 20px;
margin-right: 20px;
}

.comic-button3:hover {
background-color: #fff;
color: DarkSlateBlue;
border: 2px solid DarkSlateBlue;
box-shadow: 5px 5px 0px DarkSlateBlue;
}

.comic-button3:active {
box-shadow: none;
transform: translateY(4px);
}


.comic-button4 {
display: inline-block;
padding: 10px;
font-size: 24px;
text-align: center;
text-decoration: none;
color: #fff;
background-color: DarkOrange;
border: 2px solid #000;
border-radius: 10px;
box-shadow: 5px 5px 0px #000;
transition: all 0.3s ease;
letter-spacing: 2px;
margin-bottom: 20px;
margin-right: 20px;
}

.comic-button4:hover {
background-color: #fff;
color: DarkOrange;
border: 2px solid DarkOrange;
box-shadow: 5px 5px 0px DarkOrange;
}

.comic-button4:active {
box-shadow: none;
transform: translateY(4px);
}


p.myp{
color: black;
margin-bottom: -5px;
letter-spacing: 0.5px;
font-size: 1.1em;
}

ul.myp, li.myp{
  color: black;
  margin-bottom: -5px;
  letter-spacing: 0.5px;
  font-size: 1.1em;
  text-indent: -9px; /* key property */
  margin-left: 20px; /* key property */

}