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

body {
    font-family: 'Atkinson Hyperlegible';
    padding: 1%;
    height: 100vh;
    font-size: 18px;
    max-width: 40em;
    margin: 1%, 1%, 1%, 1%;
    background: linear-gradient(234deg, #ffecf2, #ffd9e5);
    -webkit-animation: AnimationName 5s ease infinite;
    -moz-animation: AnimationName 5s ease infinite;
    -o-animation: AnimationName 5s ease infinite;
    animation: AnimationName 5s ease infinite;
}

@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(234deg, #28282B, #353935);
        -webkit-animation: AnimationName 5s ease infinite;
        -moz-animation: AnimationName 5s ease infinite;
        -o-animation: AnimationName 5s ease infinite;
        animation: AnimationName 5s ease infinite;
        color: white;
    }
}

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