@keyframes fadeUp {
    0% {
        transform: translateY(50%);
        opacity: 0;
    }

    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

body {
    background-color: #2B304B;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: #6441A4;
}

h1#title {
    font-size: 64pt;
    text-decoration: underline;
    margin: 5px;
    text-align: center;
    margin-bottom: 50px;
}

.container {
    animation: 1s ease-out 0s 1 fadeUp;
}

.player-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.player {
    text-align: center;
    width: 50%;
    margin-left: 25%;
    position: relative;
}

.player img {
    width: 200px;
    border-radius: 50%;
    box-shadow: 0px 0px 10px #222;
}

h2#desc {
    text-align: center;
    font-style: italic;
    margin-top: 50px;
}

.live {
    position: absolute;
    background-color: #e91916;
    padding: 5px;
    border-radius: 5px;
    left: 70%;
    top: -10px;
    box-shadow: 0px 0px 15px #111;

    display: none;
}

@media screen and (max-width: 1200px) {
    .player-container {
        grid-template-columns: none;
        grid-template-rows: 1fr 1fr 1fr;
    }

    .player {
        margin-bottom: 35px;
        width: 33%;
        margin-left: 33.5%;
    }

    h2#desc {
        margin-top: 0px;
    }

    h3#discord {
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 700px) {
    h1#title {
        font-size: 36pt;
    }

    .player {
        width: 90%;
        margin-left: 5%;
    }

    h2#desc {
        font-size: 16pt;
    }

    h3#discord {
        font-size: 12pt;
    }
}