@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&family=Kaisei+Decol&family=Poller+One&family=Rye&display=swap');

*,::after,::before{box-sizing:border-box}
*{margin: 0; padding: 0;}
ol,ul{list-style:none}
img{max-width:100%}
table{border-collapse:collapse}
textarea{white-space:revert}

body{
color: #fff;
font-size: 0.9em;
font-family: 'Kaisei Decol';
line-height: 1.5;
background-color: #6e1799;
background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, #7D1AAE 20px, #7D1AAE 45px );
}

a{
text-decoration: none;
color: #6e1799;
}
a:hover{
color: #c78ae6;
}

header{
font-size:1.1em;
text-align: right ;
margin: 50px auto 50px;
}

header p{
font-family: 'Hachi Maru Pop', cursive;
color: #fff;
margin:0;
line-height: 1.5;
}

header a{
font-family: 'Poller One', cursive;
text-decoration: none;
color: #e5a323;
padding: 0 10px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgb(229, 163, 35
) 50%);
background-position: 0 0;
background-size: 200% auto;
transition: .3s;
}
header a:hover{
background-position: -100% 0;
color: #6e1799;
}

.wrp{
width: 90%;
max-width:600px;
margin: 10px auto;
}

h1 {
font-family: 'Rye', cursive;
font-size: 1.8em;
color: #e5a323;
text-shadow: -4px -4px 3px #666,  4px 4px 3px #333;
}

h2 {
font-family: 'Poller One', 'Hachi Maru Pop', cursive;
font-size: 1.2em;
color: #e5a323;
filter: drop-shadow(4px 4px 3px #333);
}
h2 span{
background: url(icon.png) no-repeat left center/contain;
padding:8px 5px 8px 40px ;
height:30px;
color: #000;
filter: invert(72%) sepia(26%) saturate(6428%) hue-rotate(1deg) brightness(105%) contrast(102%);
}

section{
background-color: #e5a323;
border: 2px dashed #fff;
border-radius: 8px;
box-shadow: 0 0 0 4px #e5a323;
margin: 1em 0 3em 0;
padding: 1.5em;
color: #ececec;
}

p span{
background: #c78ae6;
color: #333;
font-weight: bold;
margin: 2px 2px 2px -10px;
padding: 2px;
}

p{
margin: 1em;
}

footer{
background-color: #e5a323;
border: 2px dashed #fff;
border-radius: 8px;
box-shadow: 0 0 0 4px #e5a323;
margin: 1em 0 3em 0;
padding: 1.5em;
text-align: center ;
margin: 50px auto 20px;
}