:root {
    --c-0: #1b1a1a;
    --c-1: #cdff2b;
    --c-2: #cf045f;
    --c-3: #96ffc7;
}

@font-face {
    font-family: h;
    src: url(/graphics/fonts/GhastlyPixe.ttf);
}

@font-face {
    font-family: b;
    src: url(/graphics/fonts/VCR_OSD_MONO_1.001.ttf);
}

body {
    background: var(--c-0);
    color: var(--c-0);
    padding: 3em;
    overflow: hidden;
    font-family: b;
    font-size: 85%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: h;
    letter-spacing: 5px;
}

a {
    color: var(--c-1);
    text-decoration: none;
}

a:hover {
    color: var(--c-2);
}

a:active {
    opacity: 70%;
}

a:visited {
    opacity: 50%;
}

.frills {
    border-style: solid;
    border-image: url("/graphics/small/border.png") 2 fill round;
    padding: 10px;
}

.flex {
    display: flex;
}

main,
aside {
    border: solid 2px var(--c-0);
    border-radius: 0.5em;
    margin: 5px;
    background: white;
    height: 550px;
    padding: 10px;
}

main {
    width: 80%;
    overflow-y: scroll;
}

aside {
    width: 20%;
}

aside ul {
    list-style-type: none;
}

aside ul li,
button {
    background: var(--c-0);
    padding: 10px;
    border-radius: 0.5em;
    margin: 5px;
    width: 120px;
    text-align: center;
    font-size: small;
    font-family: b;
}

#doll img {
    max-width: 210px;
    height: 70%;
    transform: translate(25px, -15px);
    animation: jump 0.5s infinite ease-in-out;
    animation-play-state: running;
}

#doll {
    width: 210px;
    /*animation: r 2s infinite ease-in-out;*/
}


/*#onemore {
    animation: mov 10s infinite linear;
}*/

@keyframes jump {
    0%,
    50%,
    100% {
        transform: rotate(0deg);
    }
    25% {
        transform: translateY(50px) rotateX(-15deg);
    }
    75% {
        transform: translateY(-10px) rotateY(20deg);
    }
}

@keyframes mov {
    0%,
    100% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(1200px);
    }
}

@keyframes r {
    0% {
        transform: scaleX(-1);
    }
    20% {
        transform: scaleX(1);
    }
    40% {
        transform: scaleX(-1);
    }
    60% {
        transform: scaleX(1);
    }
    80% {
        transform: scaleX(-1);
    }
    100% {
        transform: scaleX(1);
    }
}