@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
 @font-face {
     font-family: 'Psycho Poetry';
     font-style: normal;
     font-weight: 400;
     font-stretch: normal;
     src: url("PsychoPoetry.ttf") format("truetype");
}
 body {
     min-height: 100vh;
     margin: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background-color: #171a1c;
}
 .root {
     color: #fff;
     font-family: "Open Sans", sans-serif;
     transform: rotateZ(-10deg);
}
 h1::before {
     content: "Top text";
     font-size: 2em;
     text-decoration: underline;
     text-decoration-color: #f53b57;
     text-decoration-style: wavy;
}
 h1:hover::before {
     align-self: center;
     content: "i don't know what to say";
     font-family: "Psycho Poetry";
     text-decoration: none;
}
 .buttons {
     display: flex;
     justify-content: center;
     gap: 10px;
}
 .buttons a {
     height: 48px;
     width: 48px;
     color: white;
     transition: height 0.5s ease-in, width 0.5s ease-in;
}
 .buttons a:hover {
     filter: brightness(0) saturate(100%) invert(34%) sepia(97%) saturate(2511%) hue-rotate(330deg) brightness(98%) contrast(97%);
}
 .buttons a:focus-visible {
     outline: 3px dashed #f53b57;
     outline-offset: 5px;
     color: white;
}