@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%}
}