120 lines
2.1 KiB
CSS
120 lines
2.1 KiB
CSS
html, body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: #fff;
|
|
background-color: #222222;
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
background-image: url("../img/gradient.webp"); }
|
|
|
|
a[href] {
|
|
color: transparent; }
|
|
|
|
.center {
|
|
display: flex;
|
|
overflow: hidden;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh; }
|
|
|
|
.box {
|
|
background-color: #0b0b0b80;
|
|
aspect-ratio: 1 / 1;
|
|
padding: 20px;
|
|
border-radius: 15%;
|
|
border: 3px solid #fff;
|
|
box-shadow: 0 0 15px rgba(255, 255, 255, 0.75);
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.box-404 {
|
|
background-color: #0b0b0b80;
|
|
aspect-ratio: 1 / 1;
|
|
padding: 20px;
|
|
border-radius: 15%;
|
|
border: 3px solid #fff;
|
|
box-shadow: 0 0 15px rgba(255, 255, 255, 0.75);
|
|
text-align: center;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center; }
|
|
|
|
.logo {
|
|
width: 65%;
|
|
align-self: center; }
|
|
|
|
.header {
|
|
font-size: 4vh;
|
|
margin-top: auto; }
|
|
|
|
.header-404 {
|
|
font-size: 6vh; }
|
|
|
|
.unselectable {
|
|
-webkit-user-select: none;
|
|
user-select: none; }
|
|
|
|
@media (max-width: 768px) {
|
|
.box {
|
|
width: 70%;
|
|
}
|
|
.box-404 {
|
|
width: 40%;
|
|
}
|
|
}
|
|
@media (min-width: 768px) {
|
|
.box {
|
|
width: 15%;
|
|
}
|
|
.box-404 {
|
|
width: 10%;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0; }
|
|
100% {
|
|
opacity: 1; } }
|
|
|
|
.box {
|
|
animation: fadeIn 2s;
|
|
animation-fill-mode: forwards; }
|
|
|
|
.logo, .header {
|
|
opacity: 0;
|
|
animation: fadeIn 1.2s;
|
|
animation-fill-mode: forwards; }
|
|
|
|
.logo {
|
|
animation-delay: 1s; }
|
|
|
|
.header {
|
|
animation-delay: 1.35s; }
|
|
|
|
@keyframes snowfall {
|
|
0% {
|
|
transform: translateY(-10vh); }
|
|
100% {
|
|
transform: translateY(130vh); } }
|
|
|
|
.snowflake {
|
|
background: white;
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
top: -5vh;
|
|
animation: snowfall infinite;
|
|
opacity: 0.1; }
|
|
|
|
@font-face {
|
|
font-family: 'SF-Regular';
|
|
src: url("../fonts/SF-Pro-Display-Regular.woff2") format("woff2");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap; }
|
|
|
|
h1, h2, h3, h4, h5, h6, summary, select, button, p {
|
|
font-family: 'SF-Regular', system-ui; }
|