api.violets-purgatory.dev/static/style.css

79 lines
1.3 KiB
CSS
Raw Normal View History

2024-02-08 12:45:32 -06:00
@font-face {
font-display: swap;
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
src: url('./fonts/rubik-v28-latin-regular.woff2') format('woff2');
}
* {
font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
padding: 0;
font-weight: 200;
text-align: center;
color: white;
}
body {
background-color: black;
overflow-x: hidden;
}
main {
opacity: 1;
animation: fadeDelay 3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
2024-02-08 16:03:40 -06:00
body>h1 {
2024-02-08 12:45:32 -06:00
animation: mainText 3s cubic-bezier(0.075, 0.82, 0.165, 1);
margin: auto;
max-width: 75%;
}
2024-02-08 16:03:40 -06:00
.star {
position: fixed;
z-index: -2;
visibility: hidden;
font-size: 0.35rem;
width: 40px;
height: 40px;
background: radial-gradient(white, rgb(255, 255, 255, 0.5) 10%, transparent 50%);
}
2024-02-08 12:45:32 -06:00
@keyframes mainText {
0% {
transform: translateY(50vh) scale(1.5);
opacity: 0;
2024-02-08 16:03:40 -06:00
height: 0px;
2024-02-08 12:45:32 -06:00
}
2024-02-08 16:03:40 -06:00
2024-02-08 12:45:32 -06:00
50% {
opacity: 1;
2024-02-08 16:03:40 -06:00
height: 0px;
2024-02-08 12:45:32 -06:00
transform: translateY(50vh) scale(1);
}
2024-02-08 16:03:40 -06:00
2024-02-08 12:45:32 -06:00
100% {
transform: translateY(0) scale(1);
}
}
@keyframes fadeDelay {
0% {
opacity: 0;
}
2024-02-08 16:03:40 -06:00
2024-02-08 12:45:32 -06:00
33% {
opacity: 0;
}
2024-02-08 16:03:40 -06:00
2024-02-08 12:45:32 -06:00
66% {
opacity: 0;
transform: translateY(25vh)
}
2024-02-08 16:03:40 -06:00
2024-02-08 12:45:32 -06:00
100% {
opacity: 1;
transform: none;
}
}