:root {
    --mythicOrange: #f59326;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

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

.lobby h2 {
    grid-column: 1 / 3;
}

.lobby label {
    margin: .25rem auto;
}

.lobby button {
    grid-column: 1 / 3;
    padding: .25rem .75rem;
    width: max-content;
    margin: .25rem auto;
}

.drafters {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
}

#draftStatus {
    text-align: center;
}

#draftStatus h4 {
    margin-bottom: 0.25rem;
}

#draftStatus p {
    margin-top: 0.25rem;
    margin-bottom: 2rem;
}

.card {
    display: block;
    border-radius: 12px;
    width: 223px;
    margin: .25rem auto;
    height: 310px;
}

.card .card {
    border: 1px solid black;
    border-radius: 12px;
}

.card img {
    border-radius: 12px;
}

.card h3, .card h4, .card p {
    text-align: center;
    margin: .75rem .125rem;
}

h2 {
    text-align: center;
}

article {
    max-width: 90%;
    margin: 0 auto;
}

article h3 {
    text-align: center;
}

.delBtn {
    display: block;
    margin: .5rem auto;
    padding: .5rem .75rem;
}

#endBtn, #restartBtn {
    display: block;
    margin: .5rem 1rem;
    padding: .5rem .75rem;
}

button {
    background-color: var(--mythicOrange);
    border-radius: 4px;
}

.common {
    box-shadow: 0 0 15px #202020;
}

.uncommon {
    box-shadow: 0 0 15px #4b6c79;
}

.rare {
    box-shadow: 0 0 15px #887441;
}

.mythic {
    box-shadow: 0 0 15px var(--mythicOrange);
}

#draftEndButtons {
    display: flex;
    justify-content: center;
}

@keyframes flip-up {
    0%{
        display: none;
        height: 310px;
        margin: 0 auto;
        width: 0;
        transform: translateX(112px);
    }
    49%{
        display: none;
    }
    50%{
        display: block;
        width: 0;
        transform: translateX(112px);
    }
    100%{
        width: 223px;
        transform: translateX(0);
    }
}

@keyframes flip-down {
    0%{
        display: block;
        width: 223px;
        height: 310px;
        margin: 0 auto;
        transform: translateX(0);
    }
    50%{
        width: 0;
    }
    51%{
        display: none;
    }
    100%{
        display: none;
    }
}


.face-up {
    animation-name: flip-up;
    animation-timing-function: ease-in-out;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-delay: .33s;
}

.face-down {
    animation-name: flip-down;
    animation-timing-function: ease-in-out;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-delay: .33s;
}