@charset "UTF-8";
@import url("https://fonts.bunny.net/css?family=fredericka-the-great:400");
:root {
  --bg: DarkSlateGray;
  --fg: GainsBoro;
  --aside: Turquoise;
  --ff-title: 'Fredericka the Great', display; }

* {
  margin: 0;
  padding: 0; }

html {
  width: 100%;
  height: 100%;
  color: var(--fg);
  background-color: var(--bg); }

a[href] {
  text-decoration: none;
  color: var(--fg); }

a[href]:hover {
  color: LightYellow;
  transform: scale(1.02); }

body {
  font-family: var(--ff-title);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }
  body a[href]:hover {
    color: var(--fg); }
  body h1 {
    color: var(--fg);
    position: relative;
    font-weight: normal;
    font-size: 12vmax;
    padding: 30px; }
  body h1::before, body h1::after {
    padding: 30px;
    color: var(--fg);
    content: "Le’";
    position: absolute;
    font-weight: normal;
    width: 100%;
    height: 100%;
    background: var(--bg);
    overflow: hidden;
    top: 0; }
  body h1::before {
    left: 2px;
    text-shadow: -1px 0 red;
    animation-name: glitch-animation-1;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: reverse-alternate; }
  body h1::after {
    left: -2px;
    text-shadow: -1px 0 blue;
    animation-name: glitch-animation-2;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: reverse-alternate; }

@keyframes glitch-animation-1 {
  0% {
    clip: rect(282px, 400px, 140px, 60px); }
  5% {
    clip: rect(142px, 400px, 35px, 60px); }
  10% {
    clip: rect(209px, 400px, 237px, 60px); }
  15% {
    clip: rect(186px, 400px, 73px, 60px); }
  20% {
    clip: rect(280px, 400px, 23px, 60px); }
  25% {
    clip: rect(289px, 400px, 105px, 60px); }
  30% {
    clip: rect(209px, 400px, 129px, 60px); }
  35% {
    clip: rect(125px, 400px, 165px, 60px); }
  40% {
    clip: rect(166px, 400px, 96px, 60px); }
  45% {
    clip: rect(243px, 400px, 257px, 60px); }
  50% {
    clip: rect(300px, 400px, 48px, 60px); }
  55% {
    clip: rect(7px, 400px, 257px, 60px); }
  60% {
    clip: rect(245px, 400px, 268px, 60px); }
  65% {
    clip: rect(130px, 400px, 69px, 60px); }
  70% {
    clip: rect(41px, 400px, 273px, 60px); }
  75% {
    clip: rect(9px, 400px, 57px, 60px); }
  80% {
    clip: rect(74px, 400px, 5px, 60px); }
  85% {
    clip: rect(168px, 400px, 52px, 60px); }
  90% {
    clip: rect(284px, 400px, 37px, 60px); }
  95% {
    clip: rect(114px, 400px, 289px, 60px); }
  100% {
    clip: rect(272px, 400px, 295px, 60px); } }

@keyframes glitch-animation-2 {
  0% {
    clip: rect(154px, 400px, 122px, 60px); }
  5% {
    clip: rect(242px, 400px, 245px, 60px); }
  10% {
    clip: rect(19px, 400px, 114px, 60px); }
  15% {
    clip: rect(134px, 400px, 144px, 60px); }
  20% {
    clip: rect(31px, 400px, 25px, 60px); }
  25% {
    clip: rect(194px, 400px, 56px, 60px); }
  30% {
    clip: rect(65px, 400px, 246px, 60px); }
  35% {
    clip: rect(90px, 400px, 206px, 60px); }
  40% {
    clip: rect(172px, 400px, 296px, 60px); }
  45% {
    clip: rect(48px, 400px, 160px, 60px); }
  50% {
    clip: rect(290px, 400px, 256px, 60px); }
  55% {
    clip: rect(89px, 400px, 238px, 60px); }
  60% {
    clip: rect(94px, 400px, 113px, 60px); }
  65% {
    clip: rect(295px, 400px, 266px, 60px); }
  70% {
    clip: rect(233px, 400px, 218px, 60px); }
  75% {
    clip: rect(160px, 400px, 233px, 60px); }
  80% {
    clip: rect(244px, 400px, 30px, 60px); }
  85% {
    clip: rect(61px, 400px, 135px, 60px); }
  90% {
    clip: rect(8px, 400px, 195px, 60px); }
  95% {
    clip: rect(172px, 400px, 64px, 60px); }
  100% {
    clip: rect(158px, 400px, 173px, 60px); } }