@keyframes move-avatar {
    0% {
        padding-bottom: 0rem;
    }
    50% {
        padding-bottom: 0.3rem;
    }
    100% {
        padding-bottom: 0rem;
    }
}
body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
    background: ghostwhite;
    label.bar-container {
        width: 90%;
        div.bar {
            width: 100%;
            height: 1em;
            border: solid 1px black;
            div.filled {
                background: lightgreen; 
                height: 100%;
            }
        }
    }
    a.action {
        border: solid 1px black;
        text-decoration: underline;
        display: flex;
        min-height: 100px;
        align-content: center;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        div.disabled-reason {
            text-decoration: none;
        }
    }
    div.pj-list-item {
        display: flex;
        align-items: center;
        div.avatar {
            width: 30%;
            aspect-ratio: 1/1;
            border-radius: 50%;
            background: lightgray;
            margin-right: 2%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            img {
                animation-name: move-avatar;
                animation-duration: 0.5s;
                animation-iteration-count: infinite;
                width: 80%;
                aspect-ratio: 1/1;
                z-index: 1;
            }
            div.shadow {
                top: 78%;
                position: absolute;
                width: 50%;
                aspect-ratio: 7/2;
                background: darkgray;
                border-radius: 50%;
            }
        }
        div.data {
            width: 60%;
        }
    }

    div.presentation {
        display: flex;
        flex-direction: row;
        width: 95%;
        justify-content: center;
        div.presentation-item {
            code {
                pre {
                    white-space: pre-wrap;
                }
            }
            margin: 1%;
            width: 30%;
            overflow-y: scroll;
        }
        height: 50vh;
    }

    div.width-max-content {
        width: max-content;
    }
    div#game-container {
        height: 100vh;
        nav.menu-bar {
            width: 100%;
            background: grey;
            height: 3rem;
            display: flex;
            justify-content: end;
            align-items: center;
            a {
                font-size: 1.7rem;
                display: inline-block;
                background: chocolate;
                border-radius: 0.3rem;
                color: ghostwhite;
                text-decoration: none;
                margin-right: 0.7rem;
                margin-left: 0.7rem;
                height: 100%;
                &:last-child {
                    margin-right: 0px;
                }
                &:hover {
                    background: ghostwhite;
                    color: black;

                }
            }
        }
    }
    div.pj-selection-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100%;
        background: ghostwhite;
        flex-direction: column;
        div.pj-selection-menu-container {
            background: ghostwhite;
            color: black;
            padding: 30px;
            display: flex;
            align-items: center;
            min-width: 80%;
            min-height: 100%;
            flex-direction: column;
            overflow: scroll;
            div.pj-list {
                background: ghostwhite;
                width: 90%;
                padding: 10px;
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                align-content: center;
                justify-content: center;
                align-items: center;
                flex-grow: 1px;
                gap: 8px;

                a {
                    width: 10em;
                    height: 10em;
                    background: white;
                    border: solid 1px black;
                    box-shadow: 3px 1px 3px 3px #333;
                    color: blue;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    &:hover {
                        color: yellow;
                        background: gray;
                    }
                    text-decoration: none;
                                    }
            }
        }
    }
    div.login-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background: url() no-repeat center black;
        flex-direction: column;
        div.login-contained {
            background: rgba(0, 30, 139, 1);
            color: azure;
            padding: 30px;
            border: solid 1px black;
            display: flex;
            align-items: center;
            flex-direction: column;
            input {
                display: block;
            }
            button {
                display: block;
            }
            div.login-form {
                display: flex;
                flex-direction: column;
                width: max-content;
                div.align-self-end {
                    align-self: end;
                }
            }
            a {
                color: aquamarine;
                &:hover {
                    color: yellow;
                }
            }
        }
    }
}