html,
body {
    background-color: black;
}

#app {
    width: 100vw;
    height: 100vh;
}

a {
    all: unset;
    cursor: pointer;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#content {
    max-width: 80ch;
    color: white;
}

#marigold-img {
    height: auto;
    width: 332px;
    float: left;
    shape-outside: url("/static/marigold_20.png");
    shape-margin: 20px;
}

@media (max-width: 500px) {
    #marigold-img {
        width: 275px;
    }

    #content > *:nth-child(8) {
        clear: both;
    }
}

@media (max-width: 443px) {
    #content > *:nth-child(7) {
        clear: both;
    }
}

@media (max-width: 400px) {
    #content > *:nth-child(6) {
        clear: both;
    }

    body {
        align-items: normal;
    }
}

@media (max-width: 385px) {
    #content > *:nth-child(2) {
        clear: both;
    }

    #marigold-img {
        float: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

#content-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}