.lobby-page {
    height: 100%;
    width: 100%;
    padding: 2%;
    margin: 0 auto;
    text-align: center;

    background: linear-gradient(-45deg, #03444a, #00a8a8, #f1bc52, #ff8f4b);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 100vh;

    @keyframes gradient {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    .lobby-page-body {
        margin: auto;
        width: 20%;
        min-width: 300px;

        .lobby-user-name {
            margin: 0 auto 10px;
            padding: 10px;
            width: 60%;
            border: 2px solid cyan;
            border-radius: 10px;
        }

        .game-code {
            margin: 0 auto 10px;
            padding: 10px;
            width: 60%;
            border: 2px solid blue;
            border-radius: 10px;
        }

        .start-game-button {
            margin: 30px 0;
        }
    }
}