@charset "UTF-8";
html, body {
height: 100%;
margin: 0;
}
header {
font-family: comic sans ms;
width: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
}
header h2 {
font-family: comic sans ms;
font-size: 230px;
}
header h3 {
font-family: comic sans ms;
font-size: 70px;
}
.get-out-message {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
p {
font-family: 'Arial', sans-serif;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
position: relative;
box-sizing: border-box;
padding: 20px;
flex-direction: column;
align-items: center;
padding-top: 120px;
}
.card {
--card-w: 160px;
--card-h: 220px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
width: var(--card-w);
height: var(--card-h);
overflow: hidden;
border-radius: 8px;
margin: 0;
flex: 0 0 var(--card-w);
perspective: 1000px; /* enable 3D perspective for children */
-webkit-perspective: 1000px;
}
/* outer card should not be rotated; inner will rotate */
.card.flipped {
background: #ff0000;
color: #fff;
}
/* inner element handles the 3D rotation */
.card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 600ms ease;
will-change: transform;
}
/* rotate the inner when flipped */
.card.flipped .card-inner {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
/* faces */
.card-front,
.card-back {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 8px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* front face explicitly not rotated */
.card-front {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
z-index: 2;
background: #fff;
color: #000;
}
/* back face rotated so it shows after flip */
.card-back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
background: #ff0000;
color: #fff;
}
/* ensure inner text doesn't show through */
.card p {
margin: 0;
text-align: center;
width: 100%;
word-break: break-word;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
align-items: flex-start;
width: 100%;
box-sizing: border-box;
}
@keyframes pulseColors {
0% { background-color: hsl(210 80% 52%); }
25% { background-color: hsl(150 75% 50%); }
50% { background-color: hsl(45 85% 52%); }
75% { background-color: hsl(320 70% 52%); }
100% { background-color: hsl(210 80% 52%); }
}
/* Apply only on the You-Win page which uses */
body.you-win {
min-height: 100vh;
animation: pulseColors 1s steps(4,end) infinite;
color: #fff;
}
.try-again-button {
position: absolute;
z-index: 9999;
}
.crying-emoji {
position: absolute;
z-index: 999;
width: min(80vw, 900px);
height: auto;
max-width: 1200px;
}