:root {
    --red: #C40C00;
    --blue: #0849A3;
    --yellow: #E7D004;
    --green: #328A10;
    
    --ownCardOffset: 0;
}

@font-face {
    font-family: "Josefin Bold";
    src: url("../../fonts/josefin_sans_bold.ttf");
	font-display: swap;
}

@font-face {
    font-family: Josefin;
    src: url("../../fonts/josefin_sans.ttf");
	font-display: swap;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    
    background-image:   linear-gradient(-45deg, transparent, transparent 50%, var(--red) 50%, var(--red) 100%),
                        linear-gradient(45deg, transparent, transparent 50%, var(--blue) 50%, var(--blue) 100%),
                        linear-gradient(-135deg, transparent, transparent 50%, var(--yellow) 50%, var(--yellow) 100%),
                        linear-gradient(135deg, transparent, transparent 50%, var(--green) 50%, var(--green) 100%);
    background-position: top left, top right, bottom left, bottom right;
    background-repeat: no-repeat;
    background-size: 15vw 15vw;
    
    font-family: Josefin, Calibri, sans-serif;
    font-size: 1.5em;
}

input {
    outline: none;
}

/* ##### START PAGE ##### */
/* DESIGN UNO CARDS */
@media (min-width: 800px) {
    #start::before, #start::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 7em;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    
    #start::before {
        left: calc((50% - 12em) / 2);
        background-image: url("imgs/card_color.jpg");
    }
    
    #start::after {
        right: calc((50% - 12em) / 2);
        background-image: url("imgs/card_color_draw4.jpg");
    }
}

#start {
    width: 10em;
}

/* RADIO & LABEL */
#start label, input {
    display: block;
}

#start input[type="radio"] {
    display: none;
}

#start input[type="radio"] + label {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0.5em 0;
    color: #555;
    cursor: pointer;
}

#start input[type="radio"] + label::before {
    content: "";
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-right: 0.5em;
    border-radius: 100%;
    background-color: #EEE;
    box-shadow: 0 0 0.1em black;
}

#start input[type="radio"]:checked + label {
    color: black;
}

#start input[type="radio"]:checked + label::before {
    background-image:   linear-gradient(135deg, transparent, transparent 50%, var(--red) 50%, var(--red) 100%),
                        linear-gradient(225deg, transparent, transparent 50%, var(--blue) 50%, var(--blue) 100%),
                        linear-gradient(45deg, transparent, transparent 50%, var(--yellow) 50%, var(--yellow) 100%),
                        linear-gradient(315deg, transparent, transparent 50%, var(--green) 50%, var(--green) 100%);
    background-position: -0.35em -0.35em, 0.35em -0.35em, -0.35em 0.35em, 0.35em 0.35em;
    background-repeat: no-repeat;
    background-size: 0.7em 0.7em;
}

#start #enterID:checked ~ #inputID {
    display: block;
}

/* TEXT INPUTS */
#start #inputID, #start #name {
    display: none;
    border: none;
    width: 100%;
    margin: 0.5em 0;
    padding: 0.5em 0.8em;
    box-sizing: border-box;
    background-color: #EEE;
    font-size: 0.8em;
}

#start #name {
    display: block;
    margin-bottom: 1.5em;
}

/* NOSCRIPT & SUBMIT */
#start noscript {
    display: block;
    margin: 0.8em 0;
    color: var(--red);
    font-family: "Josefin Bold";
    font-size: 0.5em;
    text-align: center;
}

#start input[type=submit] {
    width: 100%;
    padding: 0.5em 0.8em;
    margin-top: 1.5em;
    border: none;
    background-color: #EEE;
    box-shadow: 0 0 0.1em black;
    font-size: 0.8em;
    cursor: pointer;
}

#start input[type=submit]:hover {
    background-color: #DDD;
}

/* ##### GAME PAGE ##### */
/* GAME ID */
#gameID {
    position: absolute;
    top: 0;
    padding: 0.3em 0.5em;
    line-height: 1em;
    box-shadow: 0 0 0.1em black;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    background-color: #CCC;
}

/* TAKE & MAIN CARD DECK */
#takeDeck, #mainDeck {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 1.6em;
    bottom: 13em;
}

#takeDeck {
    left: calc((50% - 3em) / 2);
}

#takeDeck img, #mainDeck img {
    position: absolute;
    display: inline-block;
    width: 6em;
    box-shadow: 0 0 0.3em black;
}

#takeDeck img {
    cursor: pointer;
}

#mainDeck img:nth-of-type(5n + 2) {
    transform: rotate(30deg);
}

#mainDeck img:nth-of-type(5n + 3) {
    transform: rotate(-10deg);
}

#mainDeck img:nth-of-type(5n + 4) {
    transform: rotate(20deg);
}

#mainDeck img:nth-of-type(5n + 5) {
    transform: rotate(-15deg);
}

/* OWN CARD DECK */
#ownDeck {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.2em;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 0 0.3em grey;
    border-top: solid 0.1em grey;
    background-color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

#ownDeck img {
    position: relative;
    left: calc(3em + var(--ownCardOffset) * 3em);
    display: inline-block;
    width: 6em;
    margin: 0.5em 0 0.5em -3em;
    box-shadow: 0 0 0.3em black;
    cursor: pointer;
}