SCSS
$red: #f3576c;
$purple: #3e2e6a;
$blue: #130b52;
$bg: #fbe6d3;
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
background: $bg;
font-family: 'Oswald', sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
font-size: 135px;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
position: absolute;
font-weight: 900;
}
a {
font-size: 50px;
text-decoration: none;
color: $purple;
animation-duration: 3s;
animation-delay: 10s;
animation-iteration-count: infinite;
margin-bottom: 100px;
cursor: pointer;
}
.wrapper {
width: 100%;
margin: 0 auto;
height: 100%;
h1 {
color: $bg;
text-transform: uppercase;
width: 100%;
text-align: center;
text-shadow: -1px -1px 0 $purple, 1px -1px 0 $purple, -1px 1px 0 $purple, 1px 1px 0 $purple;
&:after {
content: attr(data-heading);
position: absolute;
left: 0;
top: 0;
z-index: 2;
overflow: hidden;
color: $red;
transform: translate(0.4vw, 0.3vh);
mix-blend-mode: darken;
text-align: center;
width: 100%;
text-shadow: 1px 0px 0px $purple, 0px 1px 0px $blue, 2px 1px 0px $purple, 1px 2px 0px $blue, 3px 2px 0px $purple, 2px 3px 0px $blue, 4px 3px 0px $purple, 3px 4px 0px $blue, 5px 4px 0px $purple, 4px 5px 0px $blue, 6px 5px 0px $purple, 5px 6px 0px $blue, 7px 6px 0px $purple;
}
}
}
