* {
    box-sizing: border-box;
}

body, header {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border: 10px double #088CD9;
    background-color: #2B4570;       
}

body {
    justify-content: center;
    text-align: center;
    font-family: "Fredoka", sans-serif;
}

body, #rules, #header-buttons, #message, #card-mat, .cardFront {
    display: flex;
    flex-direction: column;
    align-items: center;
}

button {
    border-radius: 10% / 30%;
    border: 3px solid #7836AF;
    color: black;
    color: #1a2942;
    background: linear-gradient(#DFCCEF, #7836AF);
    box-shadow: inset 0px 2px 1px #eee4f6, 5px 5px 5px rgba(0,0,0,.2);
    font-family: "Fredoka", sans-serif;
    cursor: pointer;
}

button:hover {
    border: none;
}


header, #rules {
    justify-content: center;    
    position: absolute;
}

header {
    display: grid;
    justify-items: center;
    grid-template-columns: 20% 1fr 20%;
    grid-template-rows: repeat(5, 1fr);
    gap: 0px;
    z-index: 1;
    background-color: #2B4570;
    overflow-y: auto;
    overflow-x: hidden;
}

h1{
    grid-column: 2;
    grid-row: 2;  
    position: relative;
    font-size: 175px;
    font-weight: 600;
    text-shadow: 10px 10px 10px rgba(0,0,0,.4);
}

h1::first-line {
    font-size: 100px;
    line-height: 50px;
}

#third-title {
    top: 12px;
    left: -16px;
    color: #516990;    
}

#second-title {
    top: 6px;
    left: -8px;
    color: #088CD9;
}

#first-title {
    color: #84AF21;
}

#header-buttons {
    grid-column: 2;
    grid-row: 3;
    margin-top: -40px;
}

header button {
    font-size: 1.6em;
    width: max-content;
    height: 2.4em;
    margin: 10px;
}

#rules-close {
    font-size: 1.1em;
    width: max-content;
    height: 5em;
    margin: 7px;
}

#stats {
    font-size: 1.7em;
    color: white;
    grid-column: 2;
    grid-row: 4;
    height: max-content;
    width: 775px;
}

#rules {
    display: none;
    width: 950px;
    height: 700px;
    z-index: 2;
    color: #76c1ec;
    background-color: #1f3252;
    font-size: 1.5em;
}

#rule-words {
    padding: 20px;
    overflow-y: scroll;
    scrollbar-color: #088CD9 #516990;
}

#rule-words::-webkit-scrollbar {
    background-color: #516990;
    width: 10px;
}

#rule-words::-webkit-scrollbar-thumb {
    background-color: #088CD9;
    border-radius: 10px;
}

#game-board {
    background-color: #2B4570;
    height: 800px;
    width: 1200px;
    display: grid;
    gap: 20px;
}

#message {
    justify-content: center;
    margin: auto;
    border: 5px solid #7836AF;
    background: linear-gradient(#e1d1ed, #c5a3e0);    
    box-shadow: inset 2px 3px 3px #eee4f6, 5px 5px 5px rgba(0,0,0,.2);
    border-radius: 5% / 20%;
    width: 700px;
    height: 120px;
    color: #2B4570;
    font-size: 1.6em;
    grid-column: 2;
    grid-row: 1;
}

#set-display {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    color: white;
    font-size: 2em;
    height: max-content;
}

#rules-show2, #new-game, #help {
    position: relative;
    font-size: 1.5em;
    height: 2em;
    width: 150px;
    margin: auto;    
}

#help {
    grid-column: 1;
    grid-row: 3;
}

#rules-show2, #new-game{
    grid-column: 3;
    grid-row: 3;    
}

#new-game {
    margin-top: 20px;
}

#timer {
    grid-column: 3;
    grid-row: 2;
    color: white;
    font-size: 3em;
    margin-top: 80px;
    text-shadow: 4px 4px 4px rgba(0,0,0,.6);
    height: max-content;
}

#deck {
    list-style: none;
    position: relative;
    height: 228px;
    width: 171px;
    overflow: hidden;
    border-radius: 10%;
    grid-column: 1;
    grid-row: 2;
    left: 20px;
    cursor: pointer;
}

#card-mat {
    list-style: none;
    position: relative;
    height: 625px;
    width: 750px;
    padding: 0;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    grid-column: 2;
    grid-row: 2 / 4;
}

/* list items look like white cards, and the divs within create the flip animation by having a front, inner, and back.  the divs within the fronts become shapes based on classes of the li */
.card {
    margin: 5px;
    height: 190px;
    width: 135px;
    border-radius: 10%;
    background: none;
    perspective: 1000px;
}

.innerCard {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: all 0.8s ease;
}

.cardFront, .cardBack {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* before adding this line, the cards were not clickable in firefox: */
    transform: rotateY(0deg);
}

.cardFront {
    flex: 1 1 190px;
    justify-content: center;
    background-color: white;
    border: 4px solid white;
    padding: 3px;
    border-radius: 10%;
    transform: rotateX(180deg);
    box-shadow: 5px 8px 8px rgba(0,0,0,.6);
    cursor: pointer;
}

.cardBack {    
    border-radius: 10%;
    background-color: #2B4570;
    background-image:  linear-gradient(30deg, #a07abf 12%, transparent 12.5%, transparent 87%, #a07abf 87.5%, #a07abf), linear-gradient(150deg, #a07abf 12%, transparent 12.5%, transparent 87%, #a07abf 87.5%, #a07abf), linear-gradient(30deg, #a07abf 12%, transparent 12.5%, transparent 87%, #a07abf 87.5%, #a07abf), linear-gradient(150deg, #a07abf 12%, transparent 12.5%, transparent 87%, #a07abf 87.5%, #a07abf), linear-gradient(60deg, #a07abf77 25%, transparent 25.5%, transparent 75%, #a07abf77 75%, #a07abf77), linear-gradient(60deg, #a07abf77 25%, transparent 25.5%, transparent 75%, #a07abf77 75%, #a07abf77);
    background-size: 20px 35px;
    background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
    border: 4px solid white;
}

.showFront > div{
    transform: rotateX(180deg);
}

.cardFront div {
    aspect-ratio: 1/1;
    margin: 4px;
    min-width: 45px;
    max-width: 60px;
    max-height: 60px;
    border-style: solid;
    flex-grow: 1;
    border-width: 3.5px;
}

.circle div {
    border-radius: 50%;
}

.gumdrop div {
    border-radius: 50% / 100% 100% 0 0;
}

.blue div {
    border-color: #088CD9;
    background-color: #088CD9;
}

.green div {
    border-color: #84AF21;
    background-color: #84AF21;
}

.pink div {
    border-color: #DB4CAF;
    background-color: #DB4CAF;
}

.hollow div {
    background-color: rgba(255, 255, 255, 0);
}

.stripe.blue div {
    background: linear-gradient(20deg, #088CD9 10%, white 10% 20%, #088CD9 20% 30%, white 30% 40%, #088CD9 40% 50%, white 50% 60%, #088CD9 60% 70%, white 70% 80%, #088CD9 80% 90%, white 90%)
}

.stripe.pink div {
    background: linear-gradient(20deg, #DB4CAF 10%, white 10% 20%, #DB4CAF 20% 30%, white 30% 40%, #DB4CAF 40% 50%, white 50% 60%, #DB4CAF 60% 70%, white 70% 80%, #DB4CAF 80% 90%, white 90%)
}

.stripe.green div {
    background: linear-gradient(20deg, #84AF21 10%, white 10% 20%, #84AF21 20% 30%, white 30% 40%, #84AF21 40% 50%, white 50% 60%, #84AF21 60% 70%, white 70% 80%, #84AF21 80% 90%, white 90%)
}

.deckCard {
    position: absolute;
    box-shadow: none;
}

.deckCard:first-child {
    left: -5px;
    top: -5px;
}
.deckCard:nth-child(2) {
    top: 1px;
    left: 1px;
}
.deckCard:nth-child(3) {
    top: 7px;
    left: 7px;
}
.deckCard:nth-child(n+4) {
    top: 12px;
    left: 12px;
}

.clicked .cardFront {
    background-color: #dac2f1;
}

canvas {
    display: none;
    position: absolute;
    z-index: 3;
    cursor: pointer;
}

@keyframes bounce {
    0%   { transform: scale(1,1) translateY(0); }
    30%  { transform: scale(1.1,.5) translateY(0); }
    60%  { transform: scale(.9,1.2)   translateY(-30px);}
    100% { transform: scale(1,1) translateY(0);}
}

#win, #lose {
    display: none;
    position: absolute;
    z-index: 4;      
    font-size: 200px;
}

#win {
  animation: 2s infinite bounce;
  color: white;  
}

#lose {
    color: rgb(231, 231, 17);
}

.example-set {
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 200px;
    width: 425px;
}

.example {
    position: relative;
    margin: 5px;
    height: 190px;
    width: 135px;
    border-radius: 10%;
    cursor: default;
    transform: none;
}




@media (max-width: 1210px) {
    
    body, header {
        border-width: 1vw;
        height: 100svh;
    }
    
    button {
        border-width: .2vw; 
        box-shadow: inset 0px .2vw .1vw #eee4f6, .4vw .4vw .4vw rgba(0,0,0,.2);
    }

    h1{
        font-size: 14vw;
        text-shadow: .6vw .6vw .6vw rgba(0,0,0,.4);
    }
    
    h1::first-line {
        font-size: 8vw;
        line-height: 4vw;
    }
    
    #third-title {
        top: .96vw;
        left: -1.3vw;  
    }
    
    #second-title {
        top: .48vw;
        left: -.65vw;
    }

    #header-buttons {
        margin-top: -6vw;
    }
    
    header button {
        font-size: 2vw;
        height: 4.4vw;
        margin: 1vw;
    }
    
    #rules-close {
        font-size: 1.1em;
        height: 5em;
        margin: 1vh;
    }
    
    #stats {
        font-size: 2.5vw;
        width: 70vw;
    }
    
    #rules {
        width: 96vw;
        height: 80vh;
        font-size: 1.5em;
    }
    
    #rule-words {
        padding: 4vw;
    }
    
    #rule-words::-webkit-scrollbar {
        width: 1.1vw;
    }
    
    #rule-words::-webkit-scrollbar-thumb {
        border-radius: 1.1vw;
    }
    
    #game-board {
        height: 65vw;
        max-height: 96svh;
        width: 98vw;
        margin: auto;
        gap: 1.5vw;
    }
    
    #message {
        border-width: .4vw;  
        box-shadow: inset .2vw .3vw .3vw #eee4f6, .5vw .5vw .5vw rgba(0,0,0,.2);
        width: 57vw;
        height: 12vw;
        font-size: 3vw;
    }
    
    #set-display {
        font-size: 3vw;
    }
    
    #rules-show2, #new-game, #help {
        font-size: 2.1vw;
        height: 5vw;
        width: 15vw;  
    }

    #new-game {
        margin-top: -1vw;
    }
    
    #timer {
        font-size: 5vw;
        margin-top: 8vh;
        text-shadow: .4vw .4vw .4vw rgba(0,0,0,.6);
    }
    
    #deck {
        height: 18.4vw;
        width: 13.8vw;
        left: 1.6vw;
    }
    
    #card-mat {
        height: 50vw;
        width: 60vw;
    }

    .card {
        margin: .5vw;
        height: 15.3vw;
        width: 10.9vw;
        perspective: 80.8vw;
    }
    
    .cardFront {
        flex: 1 1 15.36vw;
        border-width: .3vw;
        padding: .25vw;
        box-shadow: .4vw .65vw .65vw rgba(0,0,0,.6);
    }
    
    .cardBack {
        background-size: 1.6vw 2.8vw;
        background-position: 0 0, 0 0, .8vw 1.44vw, .8vw 1.44vw, 0 0, .8vw 1.44vw;
        border-width: .3vw;
    }

    .cardFront div {
        margin: .3vw;
        min-width: 3.6vw;
        max-width: 4.85vw;
        max-height: 4.85vw;
        border-width: .28vw;
    }
   
    .deckCard:first-child {
        left: -.4vw;
        top: -.4vw;
    }
    .deckCard:nth-child(2) {
        top: .08vw;
        left: .08vw;
    }
    .deckCard:nth-child(3) {
        top: .57vw;
        left: .57vw;
    }
    .deckCard:nth-child(n+4) {
        top: .97vw;
        left: .97vw;
    }
    
    @keyframes bounce {
        0%   { transform: scale(1,1) translateY(0); }
        30%  { transform: scale(1.1,.5) translateY(0); }
        60%  { transform: scale(.9,1.2)   translateY(-2.4vw);}
        100% { transform: scale(1,1) translateY(0);}
    }
    
    #win, #lose {     
        font-size: 16vw;
    }
    
    .example-set {
        height: 16.17vw;
        width: 34.35vw;
    }
    
    .example {
        margin: .4vw;
        height: 15.4vw;
        width: 10.9vw;
    }
}

@media (max-width: 700px){

    h1{
        font-size: 17.5vw;
        text-shadow: .6vw .6vw .6vw rgba(0,0,0,.4);
    }
    
    h1::first-line {
        font-size: 10vw;
        line-height: 5vw;
    }
    
    #third-title {
        top: 1.2vw;
        left: -1.6vw;  
    }
    
    #second-title {
        top: .6vw;
        left: -.8vw;
    }

    header button {
        font-size: 3.5vw;
        height: 7vw;
        margin: 1.5vw;
    }
}


@media (orientation: landscape) and (min-aspect-ratio: 5 / 4){

    body, header {
        border-width: 1.2svh;
        height: 100svh;
    }

    button {
        border-width: .5svh; 
        box-shadow: inset 0px .2svh .1svh #eee4f6, .4svh .4svh .4svh rgba(0,0,0,.2);
    }

    h1{
        font-size: 20svh;
        text-shadow: .6svh .6svh .6svh rgba(0,0,0,.4);
    }
    
    h1::first-line {
        font-size: 10svh;
        line-height: 4svh;
    }

    #third-title {
        top: 1.2svh;
        left: -1.625svh;  
    }
    
    #second-title {
        top: .6svh;
        left: -.81svh;
    }

    #header-buttons {
        margin-top: -7.5svh;
    }
    
    header button {
        font-size: 4svh;
        height: 8.8svh;
        margin: 1.25svh;
    }

    #rules-close {
        font-size: 1em;
        height: 5.2em;
        margin: 1.2svh;
    }

    #stats {
        font-size: 4svh;
        width: 60vw;
    }

    #rules {
        width: 96vw;
        height: 80vh;
        font-size: 1.2em;
    }

    #game-board {
        grid-template-columns: repeat(5, 19%);
        grid-template-rows: repeat(4, 24%);
        justify-items: center;
        align-items: center;
        gap: 2svh;
        grid-template-areas: 
            "a b b b c"
            "a d d d e"
            "f d d d g"
            "h d d d i"
        ;
    }

    #deck {
        grid-area: a;
    }

    #message {
        grid-area: b;
        height: 16svh;
        font-size: 4svh;
    }

    #timer {
        grid-area: c;
        font-size: 7svh;
    }

    #card-mat {
        grid-area: d;
    }

    #new-game {
        grid-area: g;
        margin-top: 15svh;
    }

    #set-display {
        grid-area: f;
        font-size: 4.4svh;
        margin-left: 1svh;
    }

    #help {
        grid-area: h;
    }

    #rules-show2 {
        grid-area: i;
    }

    #rules-show2, #new-game, #help {
        font-size: 2.8svh;
        height: 8svh;
        width: 19svh;
    }

    #deck {
        height: 23.9svh;;
        width: 17.9svh;
        left: 2.1svh;
    }
    
    #card-mat {
        margin: 0;
        height: 65svh;
        width: 78svh;
    }

    .card {
        margin: .65svh;
        height: 19.89svh;
        width: 14.17svh;
        perspective: 105.04svh;
    }

    .cardFront {
        flex: 1 1 19.97svh;
        border-width: .39svh;
        padding: .325svh;
        box-shadow: .52svh .85svh .85svh rgba(0,0,0,.6);
    }

    .cardBack {
        background-size: 2.08svh 3.64svh;
        background-position: 0 0, 0 0, 1.04svh 1.87svh, 1.04svh 1.87svh, 0 0, 1.04svh 1.87svh;
        border-width: .4svh;
    }

    .cardFront div {
        margin: .39svh;
        min-width: 4.68svh;
        max-width: 6.3svh;
        max-height: 6.3svh;
        border-width: .364svh;
    }    

    .deckCard:first-child {
        left: -.52svh;
        top: -.52svh;
    }
    .deckCard:nth-child(2) {
        top: .104svh;
        left: .104svh;
    }    

    .deckCard:nth-child(3) {
        top: .741svh;
        left: .741svh;
    }

    .deckCard:nth-child(n+4) {
        top: 1.26svh;
        left: 1.26svh;
    }   

    #win, #lose {     
        font-size: 22svh;
    }

}

@media (orientation: landscape) and (min-aspect-ratio: 5 / 3){

    #rules-show2, #new-game, #help {
        font-size: 3.6svh;
        height: 8svh;
        width: 27svh;
        padding: 0;
    }

    #set-display {
        font-size: 5svh;
    }

}




@media (orientation: portrait) and (max-aspect-ratio: 3/5){

    body {
        height: 100vh;
        height: 100svh;
    }

    header {
        height: 100vh;
        height: 100svh; 
    }

    h1{
        font-size: 28vw;
        text-shadow: 1.2vw 1.2vw 1.2vw rgba(0,0,0,.4);
    }

    h1::first-line {
        font-size: 16vw;
        line-height: 8vw;
    }

    #third-title {
        top: 1.92vw;
        left: -2.56vw;  
    }
    
    #second-title {
        top: .96vw;
        left: -1.28vw;
    }

    header button {
        font-size: 5vw;
        height: 10vw;
        margin: 2vw;
    }

    #stats {
        width: 98vw;
        font-size: 1.6em;
    }

    #stats-list li {
        margin-bottom: 2vw;
    }

    #game-board {
        margin: auto;
        height: 98vh;
        height: 98svh;
        width: 98vw;
        grid-template-columns: repeat(5, 19%);
        grid-template-rows: 1fr 1.5fr 7fr .9fr;
        justify-items: center;
        align-items: center;
        gap: 1.4vw;
        grid-template-areas: 
            "a a a a a"
            "b b c e e"
            "f f f f f"
            "g g h i i"
        ;
    }

    #message {
        grid-area: a;
        width: 75vw;
        height: 17vw;
        margin-top: 2vw;
        font-size: 4.2vw;
    }

    #rules-show2, #new-game, #help {
        font-size: 3.6vw;
        height: 8vw;
    }

    #set-display {
        grid-area: c;
        align-self: auto;
        margin-top: 0;
        width: max-content;
        font-size: 4vw;
    }

    #help {
        grid-area: e;
        width: 23vw;        
    }

    #rules-show2, #new-game {
        width: 27vw;
    }

    #rules-show2 {
        grid-area: g;
    }
    
    #timer {
        grid-area: h;
        margin-top: 0;
        width: max-content;
    }

    #new-game{
        grid-area: i;
        margin-top: auto;    
    }

    #deck {
        height: 24vw;
        width: 32vw;
        grid-area: b;
        margin: 0 0 -2vw 0;
    }

    #card-mat {
        margin: auto;
        height: 105.6vw;
        width: 88vw;
        flex-direction: row;
        grid-area: f;
    }

    .card {
        margin: .88vw;
        height: 19.2vw;
        width: 26.9vw;
        perspective: 142.3vw;
    }

    .cardFront {
        flex: 1 1 27.06vw;
        flex-direction: row;
        border-width: .53vw;
        padding: .44vw;
        box-shadow: .7vw 1.14vw 1.14vw rgba(0,0,0,.6);
    }

    .cardBack {
        background-size: 2.82vw 4.93vw;
        background-position: 0 0, 0 0, 1.41vw 2.54vw, 1.41vw 2.54vw, 0 0, 1.41vw 2.54vw;
        border-width: .53vw;
    }

    .cardFront div {
        margin: .53vw;
        min-width: 6.34vw;
        max-width: 8.54vw;
        max-height: 8.54vw;
        border-width: .49vw;
    }

    .deckCard:first-child {
        left: -.7vw;
        top: -.7vw;
    }
    .deckCard:nth-child(2) {
        top: .14vw;
        left: .14vw;
    }
    .deckCard:nth-child(3) {
        top: 1vw;
        left: 1vw;
    }
    .deckCard:nth-child(n+4) {
        top: 1.7vw;
        left: 1.7vw;
    }

    .example-set {
        height: 25vw;
        width: 80vw;
    }

    .example {
        margin: 1vw;
    }
}