html {
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
-webkit-tap-highlight-color: transparent;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 50rem;
min-height: 100vh;
margin: auto;
background: linear-gradient(150deg,#411,#123);
background-color: #000;
text-align: center;
}
* {
color: #000;
user-select: none;
text-decoration: none;
outline: 1px solid transparent;
font-weight: 700;
font-family: "font", sans-serif;
transition: 1s, fill .25s;
}
::selection {
color: #e00;
background: transparent;
text-shadow: .4px .4px .2px #222;
}
main {
padding: 1rem 1.5rem;
animation: fadeUp 1s;
}
header, footer, input,
.center, .button, .search {
text-align: center;
}
.profile {
width: 8rem;
height: 8rem;
margin: 1.25rem auto 0;
border-radius: 50%;
}
.box, .menu, .search {
background: rgba(250,250,250,1);
background-color: #fff;
border: .1rem solid rgba(250,250,250,.5);
border-radius: .5rem;
box-sizing: border-box;
}
.box, .search {
width: 100%;
padding: 1rem 0;
line-height: 1.25;
font-size: 1.2rem;
}
.menu {
margin: 0 0 1rem;
}
.menu, .menu a {
display: flex;
width: 100%;
padding: .35rem 0 .5rem;
font-size: 1.5rem;
}
.menu .left, .menu .right {
width: 1.5rem;
padding: 0 1rem;
fill: #000;
}
.menu .left {
margin-right: auto;
}
.menu .right {
margin-left: auto;
}
.search {
width: 85%;
margin: 1rem auto .5rem;
padding: .85rem 0 1rem;
color: #fff;
background: linear-gradient(150deg,#411,#123);
background-color: #000;
}
.source, .source a {
margin: -1.25rem .5rem .25rem;
}
.source .icon {
width: 3rem;
fill: #fff;
}
.copyright, .copyright a {
max-height: 100%;
margin: 0 auto 1.25rem;
color: #fff;
font-size: .8rem;
}
.menu a:hover, .source .icon:hover,
.copyright:hover, .copyright a:hover {
fill: #e00;
color: #e00;
text-shadow: .4px .4px .2px #222;
}
@font-face {
font-display: swap;
font-family: "font";
src: url("/font.woff2");
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translate3d(0,.5rem,0); }
to { opacity: 1; transform: translate3d(0,0,0); }
}
.motion li {
display: block;
position: fixed;
top: 0%;
z-index: -1;
width: .1rem;
background: rgba(250,250,250,.75);
animation: animate 10s linear infinite;
}
.motion li:nth-child(1)
{ left: 0%; height: 8rem; animation-duration: 20s; }
.motion li:nth-child(2)
{ left: 15%; height: 4rem; animation-duration: 12s; }
.motion li:nth-child(3)
{ left: 30%; height: 6rem; animation-duration: 16s; }
.motion li:nth-child(4)
{ left: 45%; height: 2rem; animation-duration: 8s; }
.motion li:nth-child(5)
{ right: 0%; height: 2rem; animation-duration: 6s; }
.motion li:nth-child(6)
{ right: 15%; height: 8rem; animation-duration: 18s; }
.motion li:nth-child(7)
{ right: 30%; height: 4rem; animation-duration: 10s; }
.motion li:nth-child(8)
{ right: 45%; height: 6rem; animation-duration: 14s; }
@keyframes animate {
0% { transform: rotate(150deg) translateY(0);
opacity: .5; border-radius: 50%; }
100% { transform: rotate(150deg) translateY(-100rem);
opacity: 0; border-radius: 50%; }
}