79 lines
1.3 KiB
CSS
79 lines
1.3 KiB
CSS
@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);
|
|
}
|
|
|
|
body>h1 {
|
|
animation: mainText 3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
margin: auto;
|
|
max-width: 75%;
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
|
|
@keyframes mainText {
|
|
0% {
|
|
transform: translateY(50vh) scale(1.5);
|
|
opacity: 0;
|
|
height: 0px;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
height: 0px;
|
|
transform: translateY(50vh) scale(1);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeDelay {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
33% {
|
|
opacity: 0;
|
|
}
|
|
|
|
66% {
|
|
opacity: 0;
|
|
transform: translateY(25vh)
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
} |