98 lines
1.6 KiB
CSS
98 lines
1.6 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: 400;
|
|
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);
|
|
width: 90%;
|
|
max-width: 1000px;
|
|
margin: auto;
|
|
}
|
|
|
|
body>h1 {
|
|
animation: mainText 3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
margin: auto;
|
|
max-width: 75%;
|
|
/* outline: 1px white solid; */
|
|
}
|
|
|
|
hr {
|
|
border: 2px rgba(100, 0, 150, 0.5) solid;
|
|
margin: 20px;
|
|
}
|
|
|
|
.rainDrop {
|
|
position: fixed;
|
|
z-index: -2;
|
|
visibility: hidden;
|
|
width: 4px;
|
|
height: 120px;
|
|
background: rgba(0, 0, 150, 0.5);
|
|
}
|
|
|
|
.mainTitle {
|
|
font-size: 2.75rem;
|
|
color: rgb(215, 80, 255);
|
|
display: block;
|
|
}
|
|
|
|
.note {
|
|
color: gray;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@keyframes mainText {
|
|
0% {
|
|
transform: translateY(calc(50vh - 2rem)) scale(1.5);
|
|
opacity: 0;
|
|
height: 4rem;
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
height: 4rem;
|
|
transform: translateY(calc(50vh - 2rem)) 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;
|
|
}
|
|
} |