@font-face {
    font-family: "Dream Planner";
    src: url("/assets/dreamplanner.otf") format("opentype");
}

* {
    padding: 0;
    margin: 0;
}

:root {
    font-family: Ubuntu;
}

#background {
    background-image: url("/assets/tablesheet.png");
}

#campfire {
    display: flex;
    flex-direction: column;

    width: fit-content;

    font-family: "Dream Planner";

    transform-origin: center;
    transform: rotate(-2.97deg);

    justify-content: end;

}

#campfire>span {
    text-align: end;
}

#header {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 1rem;

    padding-top: 1rem;

    max-height: 4rem;
}

#app {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#title {
    font-size: 8rem;

    transform-origin: center;
    transform: rotate(-2.97deg);

    animation: bobbingTitle 2s infinite;

    width: fit-content;

    text-align: center;

    margin: 3rem;

    color: orange;

    -webkit-text-stroke: 4px green;
}

@keyframes bobbingTitle {
    0% {
        transform: rotate(-2.97deg);
    }

    50% {
        transform: rotate(2.97deg);
    }

    100% {
        transform: rotate(-2.97deg);
    }
}

img {
    object-fit: contain;
}