@font-face {
    font-family: kk-font;
    src: url(Kkfont-Regular.otf);
}

body {
    --image-size: 200px;
    background-color: gray;
}

main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: 1em;
    gap: 2em;
}

    main > div {
        display: flex;
        flex-direction: column;
        background-color: aliceblue;
        border-radius: 4px;
        padding: 1em;
        gap: 0.5em;
    }

            main > div:last-of-type > p{
                font-size: 0.75em;
            }

        #friends {
            display: none;
        }

            #friends.loaded, .loading {
                display: flex;
                flex-direction: column;
                gap: 0.5em;
            }

                #friends.loaded + .loading {
                    display: none;
                }

        #locations {
            display: none;
        }

            #locations.loaded, .loading {
                display: flex;
                flex-direction: column;
                gap: 0.5em;
            }

                #locations.loaded + .loading {
                    display: none;
                }

.entity {
    display: grid;
    grid-template-columns: 0.25fr 0.5fr 0.25fr;
    background-color: rgb(213, 168, 255);
    border-radius: 4px;
    padding: 1em;
    gap: 0.5em;
}

    .entity > .entity {
        display: flex;
        flex-direction: column;
        background-color: rgb(193, 127, 255);
    }

        .loading > .entity > .entity {
            background: linear-gradient(270deg, rgb(193, 127, 255), rgb(231, 240, 158));
            background-size: 400% 400%;
        
            -webkit-animation: Loading 30s ease infinite;
            -moz-animation: Loading 30s ease infinite;
            -o-animation: Loading 30s ease infinite;
            animation: Loading 30s ease infinite;
        }

        .entity > .entity > .entity {
            display: flex;
            flex-direction: column;
            background-color: rgb(213, 168, 255);
            border-radius: 4px;
            padding: 1em;
            gap: 0.5em;
        }

input, textarea {
    background-color: white;
    border: gray solid 1px;
    border-radius: 4px;
    padding: 0.5em;
}

    input:focus, textarea:focus {
        outline: lightsteelblue solid 2px;
        outline-offset: 2px;
    }

    input[type="button"], input[type="submit"] {
        cursor: pointer;
    }

        input[type="button"]:hover, input[type="submit"]:hover {
            opacity: 0.8;
        }

img {
    height: var(--image-size);
    object-fit: fill;
    border-radius: 4px;
}

h1, h2, h3, p, button {
    font-family: kk-font;
    text-align: center;
    margin: 0;
}

    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 2.25em;
    }

    p, button {
        font-size: 1.25em;
    }

        p > a {
            color: rgb(193, 127, 255);
        }

@media screen and (max-width: 429px) {
    body {
        --image-size: 100px;
    }

    main {
        padding: 0.5em;
        gap: 1em;
    }

        main > div {
            padding: 0.5em;
        }

    .entity {
        grid-template-columns: 1fr;
        padding: 0.5em;
    }
}

@-webkit-keyframes Loading {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-moz-keyframes Loading {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-o-keyframes Loading {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@keyframes Loading {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}