CSS
* {
margin: 0;
padding: 0;
border: none;
outline: none;
color: #000;
}
.wrapper {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
background: rgb(250, 105, 105);
font-size: 200px;
}
.main {
width: inherit;
height: inherit;
font-family: 'Montserrat', sans-serif;
}
h1 {
width: 80%;
margin: 1em auto 0 auto;
color: rgb(255, 114, 114);
font-size: 1em;
line-height: 1em;
text-align: center;
position: relative;
}
.shadow-effect {
text-shadow: 0px 0px 3px rgba(235, 90, 90, 0.26),
0px 3px 3px rgba(205, 60, 60, 0.25),
2px 6px 3px rgba(205, 60, 60, 0.24),
4px 9px 3px rgba(205, 60, 60, 0.23),
6px 12px 3px rgba(205, 60, 60, 0.22),
8px 15px 3px rgba(205, 60, 60, 0.21),
10px 18px 3px rgba(205, 60, 60, 0.2),
12px 21px 3px rgba(205, 60, 60, 0.19),
14px 24px 3px rgba(205, 60, 60, 0.18),
16px 27px 3px rgba(205, 60, 60, 0.17),
18px 30px 3px rgba(205, 60, 60, 0.16),
20px 33px 3px rgba(205, 60, 60, 0.15),
22px 36px 3px rgba(205, 60, 60, 0.14),
24px 39px 3px rgba(205, 60, 60, 0.13),
26px 42px 3px rgba(205, 60, 60, 0.12),
28px 45px 3px rgba(205, 60, 60, 0.11),
30px 48px 3px rgba(205, 60, 60, 0.1),
32px 51px 3px rgba(205, 60, 60, 0.09),
34px 54px 3px rgba(205, 60, 60, 0.08),
36px 57px 3px rgba(205, 60, 60, 0.06),
38px 60px 3px rgba(205, 60, 60, 0.05),
40px 63px 3px rgba(205, 60, 60, 0.04),
42px 66px 3px rgba(205, 60, 60, 0.03),
44px 69px 3px rgba(205, 60, 60, 0.02),
46px 72px 3px rgba(205, 60, 60, 0.01);
}
.tween-looper {
backface-visibility: hidden;
animation: frame 6s linear infinite;
}
@keyframes frame {
0% { transform: translateY(0px) }
25% { transform: translateY(18px) }
50% { transform: translateY(0px) }
75% { transform: translateY(-18px) }
100% { transform: translateY(0px) }
}
@media screen and (max-width:480px) {
.wrapper {
font-size: 100px;
}
}
