:root {
--color_base: #191919;
--color_pen:;
--size: 20vmin;
--fog: calc(var(--size) / 1.2);
--scale: 4.8;
}
.p-flex {
display: flex;
}
.p-circle, .fog::after {
border-radius: 50%;
}
body {
height: 100vh;
background-color: var(--color_base);
margin: 0;
overflow: hidden;
}
::-moz-selection {
background-color: transparent;
}
::selection {
background-color: transparent;
}
.halloctober {
width: 100%;
height: 100%;
}
.halloctober__banner {
margin: auto;
padding: 3%;
position: relative;
overflow: hidden;
}
.typo {
color: var(--color_pen);
cursor: default;
font-family: "Pompadur;
font-weight: normal;
letter-spacing: 0.1rem;
margin: auto;
outline: none;
position: relative;
transform: skew(10deg, 2deg);
-webkit-animation: float 2s ease-in-out infinite;
animation: float 2s ease-in-out infinite;
}
.typo:hover + .fog {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.typo::before, .typo::after {
color:#red;
content: "Имя Фамилия";
position: absolute;
top: 0;
left: 0;
z-index: -10;
}
.typo::before {
-webkit-animation: move_upper_shadow 2s ease-in-out infinite;
animation: move_upper_shadow 2s ease-in-out infinite;
opacity: 0;
text-shadow: 6px 0 2px rgba(179, 8, 8, 0.4), 12px 0 2px rgba(26, 35, 126, 0.3);
}
.typo::after {
-webkit-animation: move_bottom_shadow 2s ease-in-out infinite;
animation: move_bottom_shadow 2s ease-in-out infinite;
text-shadow: 2px 4px 2px rgba(179, 8, 8, 0.4), 4px 8px 2px rgba(26, 35, 126, 0.3);
}
@-webkit-keyframes move_upper_shadow {
0%, 90%, 100% {
opacity: 0;
transform: translateX(-2%);
}
30% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes move_upper_shadow {
0%, 90%, 100% {
opacity: 0;
transform: translateX(-2%);
}
30% {
opacity: 1;
transform: translateX(0);
}
}
@-webkit-keyframes move_bottom_shadow {
0%, 90%, 100% {
opacity: 1;
transform: translate(0, 0);
}
30% {
opacity: 0;
transform: translateY(-3.5%);
}
}
@keyframes move_bottom_shadow {
0%, 90%, 100% {
opacity: 1;
transform: translate(0, 0);
}
30% {
opacity: 0;
transform: translateY(-3.5%);
}
}
@-webkit-keyframes float {
50% {
transform: scaleY(1.01) skew(-10deg, -2deg);
}
}
@keyframes float {
50% {
transform: scaleY(1.01) skew(-10deg, -2deg);
}
}
@media (prefers-reduced-motion: reduce) {
.typo {
-webkit-animation: none;
animation: none;
transform: none;
}
.typo::before, .typo::after {
-webkit-animation: none;
animation: none;
}
}
.fog {
--fog_neg: calc(var(--fog) * -1);
width: var(--fog);
height: var(--fog);
background-color: var(--color_base);
position: absolute;
top: var(--fog_neg);
left: var(--fog_neg);
transform: translate3d(0, 0, 0);
transform-origin: 0 50%;
-webkit-animation: move_fog 13s 2s ease-in-out alternate infinite;
animation: move_fog 13s 2s ease-in-out alternate infinite;
}
@-webkit-keyframes move_fog {
50% {
transform: scale(var(--scale));
}
}
@keyframes move_fog {
50% {
transform: scale(var(--scale));
}
}
@media (prefers-reduced-motion: reduce) {
.fog {
-webkit-animation: none;
animation: none;
}
}
.fog::after {
--blur: calc(var(--fog) * 2);
--blur_neghalf: calc(var(--blur) / -2);
--filter: calc(var(--fog) / 30);
width: var(--blur);
height: var(--blur);
content: "";
background-color: var(--color_base);
filter: blur(var(--filter));
margin-top: var(--blur_neghalf);
margin-left: var(--blur_neghalf);
position: absolute;
top: 50%;
left: 50%;
}