/* Course: SENG 513 */
/* Date: NOV 12, 2023 */
/* Assignment 3 */
/* Name: Yunfan Yang */
/* UCID: 30067857 */

@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700&display=swap');
@import url('https://necolas.github.io/normalize.css/latest/normalize.css');

:root {
    user-select: none;
}

button,
input[type="submit"],
input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

div {
    box-sizing: border-box;
}

body {
    margin: 0rem;
    padding: 1rem;
    color: white;
    font-family: 'Gabarito', sans-serif;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-rows: 240px 1fr 230px;
}

.bg {
    background-image: url("assets/Epgsl7.gif");
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

.public {
    max-width: 1280px;
    margin: 0 auto;
}

.jesters {
    display: flex;
    flex-direction: row;
    gap: 0.6rem;
}

.environment {
    gap: 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    justify-items: center;
    width: fit-content;
    margin: auto;
}

.environment .discard,
.environment .tavern {
    height: var(--card-height);
    width: var(--card-width);
    border-radius: 4%;
    border: 2px solid gray;
}

.environment .discard .card,
.environment .tavern .card {
    margin-bottom: calc(var(--card-height) * -1);
}

.deck-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    justify-content: center;
    justify-items: center;
}

.environment .label {
    text-align: center;
    font-size: 0.9rem;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 50;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.6s cubic-bezier(.63, -0.31, .38, 1.28);
}

.overlay::after {
    position: fixed;
    content: "";
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000a0;
    z-index: -1;
    transition: all 0.5s ease-out;
}

.overlay.hide {
    top: -100%;
    pointer-events: none;
}

.hide.overlay::after {
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease-in;
}

.hide.overlay::after {
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s ease-in;
}


@media (max-width: 960px) {
    :root {
        --card-height: 119px;
        --card-width: 85px;
    }

    body {
        grid-template-rows: 210px 1fr 210px;
    }
}

@media (max-width: 640px) {
    :root {
        --card-height: 98px;
        --card-width: 70px;
    }

    body {
        grid-template-rows: 180px 1fr 190px;
    }
}