body {
    background-color: rgb(205, 205, 255);
}

button {
    background-color: rgb(220, 220, 255);
    font-size: 28px;
    border-radius: 10px;
    border: 3px solid rgb(94, 88, 123);
    font-weight: 800;
    display: block;
    transition: transform 0.1s;
    font-family: "main";
}

button:hover {
    background-color: rgb(212, 212, 246);
    transform: scale(1.01);
}

img {
    position: absolute;
    display: block;
    margin: auto;
    width: 500px;
}

.container {
    position: relative;
    width: 500px;
    margin: auto;
}

#food {
    z-index: 1;
}

#loading {
    z-index: 2;
    position: absolute;
    width: 300px;
    left: 100px;
    filter: invert(23%) sepia(78%) saturate(2692%) hue-rotate(238deg) brightness(84%) contrast(89%);
    animation: spin 1s linear infinite;
    top: 0;
}

#async {
    margin: 30px auto 20px auto;
}

#promise {
    margin: auto auto 40px auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg);
    }
}

@font-face {
    font-family: "main";
    src: url(main.ttf);
}