@charset "UTF-8";

/*
New web page CSS for games and toys
Darren Green 2020
*/

:root {
    -webkit-user-select: none;
    user-select: none;
    --game-color: #cc0000;
    --game-color-light: #ee0000;
    --game-color-dark: #220000;
    --font-campy: "Henny Penny", system-ui;
}

main > aside > h2, main > aside > h1 {
    font-family: var(--font-campy);
}

/* small screen sizes for gaming */

@media only screen and (max-width: 575px) {
    html {
        height: 100vw;
    }

    body {
        position: fixed;
        height: 100%;
        width: 100%;
        font-size: 2vh;
    }

    body > header {
        max-height: 10%;
    }

    main {
        height: 90%;
    }

    main > section {
        min-height: 576px;
        height: 80%;
    }

    main > aside .button_box {
        height: 50%;
    }

    main > aside > h1, main > aside > h2 {
        display: none;
    }

    #box_ab {
        height: 100%;
    }
    
    #box_a, #box_b {
        height: 50%;
    }
}

/* general layout */

main > section, main > aside {
	margin: 0px;
    padding: 0px;
    border: none;
    text-align: center;
}

body > nav {
    border: none;
}

.button_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#score_box {
    font-family: var(--font-campy);
    font-size: 120%;
}

.game_button {
    flex-basis: 24%;
    background-color: var(--game-color);
    border-top: 2px solid var(--game-color-light);
    border-left: 2px solid var(--game-color-light);
    border-right: 2px solid var(--game-color-dark);
    border-bottom: 2px solid var(--game-color-dark);
    border-radius: 8px;
    padding: 2px;
    margin: 2px;
    color: var(--color);
    font-family: var(--font-campy);
}

.game_button:active {
    background-color: var(--game-color-light);
}

.card-container {
  width: 64px;
  height: 64px;
  perspective: 1000px; /* Gives the depth needed for 3D */
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.card[face="back"] {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* Hides the back of the layer when rotated */
  background-size: cover;
  background-position: center;
}

.card-front img, .card-back img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block; 
}

.card-back {
  background-color: blue;
  transform: rotateY(180deg); /* Pre-rotates the back image so it faces away */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr); 
  width: 384px;
  height: 576px;
  margin: 0 auto;
}

@media only screen and (max-width: 320px) {
    .game_button {
        flex-basis: 15%;
    }

    #card-frame {
        width: 100%;
    }
}

/* Override settings for large devices */

@media only screen and (min-width: 576px) {
    body {
        --main-width: 88%;
    }

    main, body > nav {
        min-height: 400px;
    }

    body > main {
        width: calc(var(--main-width) - 2vw);
        margin: 1vw;
        box-sizing: border-box;
    }

    body > nav {
        width: calc(100% - var(--main-width));
    }

    main > section, main > aside {
        clear: none;
        height: 80vh;
    }

    main > section {
        width:50%;
        float: left;
    }

    main > aside {
        width: 50%;
        margin-left: 50%;
    }

    main > aside > h1, main > aside > h2 {
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
    }

    .game_button {
        flex-basis: 48%;
    }
}