@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Geo:ital@0;1&display=swap');

:root {
    --brown: #36110a;
    --gold: #ffa33b;
    --white: #fff;
}

body {
    background-color: var(--brown);
    color: var(--gold);
    font-family: 'Do Hyeon';
}

h1 {
    font-family: Geo;
    font-size: 50px;
    position: absolute;
    top: -30px;
}

h1 span {
    font-size: 30px;
}

h1 catstand {
    content: url('https://f2.toyhou.se/file/f2-toyhou-se/images/119246928_FohuSIYSwpfFGJM.png');
    position: absolute;
}

sh1 {
    position: absolute;
    top: 55px;
    left: 138px;
    font-style: italic;
    text-transform: lowercase;
}

.lore button {
    font-family: 'Do Hyeon';
    position: absolute;
    font-size: 15px;
    background-color: var(--gold);
    top: 100px;
    border: none;
    color: var(--brown);
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.lore button:hover {
    color: var(--white);
    text-shadow: -1px -1px 0 var(--brown), 1px -1px 0 var(--brown), -1px 1px 0 var(--brown), 1px 1px 0 var(--brown);
}

.lore summ {
    position: absolute;
    top: 150px;
    width: 500px;
    text-align: justify;
}

.lore summ button {
    font-family: 'Do Hyeon';
    position: absolute;
    font-size: 15px;
    background-color: var(--gold);
    top: 220px;
    border: none;
    color: var(--brown);
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.lore summ button:hover {
    color: var(--white);
    text-shadow: -1px -1px 0 var(--brown), 1px -1px 0 var(--brown), -1px 1px 0 var(--brown), 1px 1px 0 var(--brown);

}

.lore summ arw-l2 {
    content: url('https://f2.toyhou.se/file/f2-toyhou-se/images/119247256_NDHK3LDgqqxOmA3.png');
    position: absolute;
    top: 195px;
    animation: leftpoke2 1s linear infinite;
}

arw-l {
    content: url('https://f2.toyhou.se/file/f2-toyhou-se/images/119247256_NDHK3LDgqqxOmA3.png');
    position: absolute;
    left: 225px;
    top: 75px;
    animation: leftpoke 1s linear infinite;
}

@keyframes leftpoke {
    0% {
        left: 225px;
    }
    50% {
        left: 220px;
    }
    100% {
        left: 225px;
    }
}

@keyframes leftpoke2 {
    0% {
        left: 295px;
    }
    50% {
        left: 290px;
    }
    100% {
        left: 295px;
    }
}