@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap'); :root{ --card-width-lg:157px; --card-height-lg:220px; --card-width-sm:120px; --card-height-sm:168px; --num-cards:4; --card-horizontal-space-lg: 100px; --card-horizontal-space-sm: 50px; --badge-bg-color:darkgrey; --primary-color: black; --secondary-color: #ffffff; --primary-font: 'Quicksand', sans-serif; } body{ height:100vh; font-family: var(--primary-font); } main{ height: 55%; display: flex; justify-content: center; } .card-container{ position: relative; height:100%; width:calc(var(--card-width-lg) * (var(--num-cards) / 2) + var(--card-horizontal-space-lg)); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "a b" "c d"; } .card-pos-a{ grid-area: a; /* background-color: gray; */ } .card-pos-b{ grid-area: b; /* background-color: goldenrod; */ } .card-pos-c{ grid-area: c; /* background-color: rosybrown; */ } .card-pos-d{ grid-area: d; /* background-color: darkcyan; */ } .card-pos-a, .card-pos-b,.card-pos-c,.card-pos-d{ display:flex; justify-content: center; align-items: center; } .card{ position:absolute; height:var(--card-height-lg); width:var(--card-width-lg); perspective: 1000px; cursor: pointer; transition: transform 0.6s ease-in-out } .card-inner{ position: relative; width:100%; height:100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } .card-front, .card-back{ position:absolute; width:100%; height:100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .card-img{ height:100%; } .card-back{ transform: rotateY(180deg); } .card-inner.flip-it{ transform: rotateY(180deg); } header{ display: flex; flex-direction: column; margin-bottom:10px; } .header-title-container{ display: flex; justify-content: center; } .header-round-info-container{ display: flex; justify-content: space-evenly; } .current-status{ font-size:1.5rem; text-align: center; } .header-status-info-container, .header-button-container, .header-score-container, .header-round-container, .header-img-container{ display: flex; justify-content: center; align-items: center; } .header-score-container, .header-round-container, .header-img-container { width: 150px; } .header-img{ height: 75px; border-radius: 5px; border: 1px solid black; padding: 5px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transform: rotate(-3deg); } .badge{ background-color: var(--badge-bg-color); color: var(--secondary-color); padding: 2px 10px 3px; border-radius: 15px; } .game-play-button-container{ width:150px; height:70px; } /* CSS */ #playGame { appearance: none; background-color: transparent; border: 2px solid #1A1A1A; border-radius: 15px; box-sizing: border-box; color: #3B3B3B; cursor: pointer; display: none; font-family: var(--primary-font); font-size: 16px; font-weight: 600; line-height: normal; margin: 0; min-height: 60px; min-width: 0; outline: none; padding: 16px 24px; text-align: center; text-decoration: none; transition: all 300ms cubic-bezier(.23, 1, 0.32, 1); user-select: none; -webkit-user-select: none; touch-action: manipulation; width: 100%; will-change: transform; animation: game-play-button-fade-in 10s 1; } #playGame:disabled { pointer-events: none; } #playGame:hover { color: #fff; background-color: #1A1A1A; box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px; transform: translateY(-2px); } #playGame:active { box-shadow: none; transform: translateY(0); } @keyframes game-play-button-fade-in{ from{opacity: 0;} to{opacity: 1;} } .card.shuffle-left{ transform: translateX(300px) translateY(40px); } .card.shuffle-right{ transform: translateX(-350px) translateY(-40px); } .card.fly-in{ transform: translateY(-1000px) translateX(-600px) rotate(45deg); } @media screen and (max-width:600px){ .card{ width: var(--card-width-sm); height: var(--card-height-sm); } .card-container{ width: calc(var(--card-width-sm) * (var(--num-cards)/2) + var(--card-horizontal-space-sm)); } main{ height:50%; } .current-status{ font-size:1.2rem; } .game-play-button-container{ width: 120px; height: 40px; } #playGame{ padding: 6px 8px; font-size:12px; min-height:40px; } .header-img{ height:55px; } }