97 lines
2 KiB
CSS
97 lines
2 KiB
CSS
@import url('./AtkinsonHyperlegible-Regular.woff2');
|
|
|
|
.atkinson-hyperlegible-regular {
|
|
font-family: "Atkinson Hyperlegible", serif;
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
.atkinson-hyperlegible-bold {
|
|
font-family: "Atkinson Hyperlegible", serif;
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
}
|
|
|
|
@keyframes AnimationName {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|
|
|
|
body {
|
|
font-family: 'Atkinson Hyperlegible';
|
|
padding: 2em;
|
|
height: 100vh;
|
|
font-size: 18px;
|
|
max-width: 40em;
|
|
margin: auto;
|
|
}
|
|
|
|
html {
|
|
min-height: 100%;
|
|
background: linear-gradient(130deg, #ffecf2, #ffd9e5) no-repeat;
|
|
background-size: 200% 200%;
|
|
animation: AnimationName 30s ease infinite;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
color: white;
|
|
}
|
|
html {
|
|
min-height: 100%;
|
|
background: linear-gradient(130deg, #28282B, #353935) no-repeat;
|
|
background-size: 200% 200%;
|
|
animation: AnimationName 30s ease infinite;
|
|
}
|
|
a:visited {
|
|
color: #7174ab
|
|
}
|
|
a {
|
|
color: #9296dc
|
|
}
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 2px solid #ccc;
|
|
/* margin: 20px 0;*/
|
|
padding: 10px;
|
|
}
|
|
|
|
div#banner {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: #e2ff25;
|
|
width: 100%;
|
|
}
|
|
div#banner-content {
|
|
width: 800px;
|
|
margin: 0 auto;
|
|
padding: 10px;
|
|
color: #000
|
|
}
|
|
|
|
@-webkit-keyframes AnimationName {
|
|
0%{background-position:0% 50%}
|
|
50%{background-position:100% 50%}
|
|
100%{background-position:0% 50%}
|
|
}
|
|
|
|
@-moz-keyframes AnimationName {
|
|
0%{background-position:0% 50%}
|
|
50%{background-position:100% 50%}
|
|
100%{background-position:0% 50%}
|
|
}
|
|
|
|
@-o-keyframes AnimationName {
|
|
0%{background-position:0% 50%}
|
|
50%{background-position:100% 50%}
|
|
100%{background-position:0% 50%}
|
|
}
|
|
|
|
@keyframes AnimationName {
|
|
0%{background-position:0% 50%}
|
|
50%{background-position:100% 50%}
|
|
100%{background-position:0% 50%}
|
|
}
|