body{background-color:green}#start-screen{position:relative;width:100%;margin:50px 0;text-align:center}#start-screen h1{position:relative;font-size:70px}#start-screen form{position:relative;margin:30px;font-size:30px}#cards-area{position:relative;display:grid;grid-template-columns:.47% 29.95% 32.86% 29.95% .47%;grid-template-rows:4% repeat(3,32%) 6%;gap:10px;background-color:#32cd32;max-width:1075px;height:auto;aspect-ratio:1.4 / 1;margin:10px auto;justify-items:center;align-items:center;justify-content:center}#drawn-card-area-3{grid-column:2 / 3;grid-row:2 / 3;position:relative;height:58%;width:38%;transform:rotate(180deg);left:28%;bottom:15%}#p3-name{grid-column:3 / 4;top:14%;position:relative}#p3{grid-row:2 / 3;grid-column:3 / 4;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px / 5px;position:relative;width:100%;height:100%;transform:rotate(180deg)}#p2-name{grid-row:3 / 4;grid-column:1 / 2;transform:rotate(90deg);transform-origin:center;position:relative;bottom:15%}#p2{grid-column:2 / 3;grid-row:3 / 4;transform:rotate(90deg);transform-origin:center;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px / 5px;position:relative;width:100%;height:100%;bottom:15%}#drawn-card-area-2{position:relative;transform-origin:center;height:58%;width:38%;grid-column:2 / 3;grid-row:4 / 5;transform:rotate(90deg);bottom:35%;right:14%}#middle{grid-column:3 / 4;grid-row:3 / 4;display:grid;grid-template-columns:3fr 37% 2fr 37% 3fr;gap:10px;width:100%;height:65%;position:relative;bottom:15%}#drawn-card-area-4{position:relative;height:58%;width:38%;grid-column:4 / 5;grid-row:2 / 3;transform:rotate(270deg);transform-origin:center;left:11%;top:5%}#p4{grid-column:4 / 5;grid-row:3 / 4;transform:rotate(270deg);transform-origin:center;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px / 5px;position:relative;width:100%;height:100%;bottom:15%}#p4-name{grid-column:5 / 6;grid-row:3 / 4;transform:rotate(270deg);transform-origin:center;position:relative;bottom:15%}#p1{grid-column:3 / 4;grid-row:4 / 5;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px / 5px;position:relative;width:100%;height:100%;bottom:30%}#drawn-card-area-1{grid-column:4 / 5;grid-row:4 / 5;position:relative;height:58%;width:38%;right:30%;bottom:15%}#p1-name{grid-column:3 / 4;grid-row:5 / 6;position:relative;bottom:180%}#discards-area{grid-column:2 / 3;position:absolute;width:100%;height:100%}#deck-area{grid-column:4 / 5;position:absolute;width:100%;height:100%}.card{perspective:1000px;position:absolute;transition:transform .6s;transform-style:preserve-3d;width:100%;height:100%;display:none}.card-space{width:90%;position:relative}.pile{position:absolute;height:100%;width:100%}#top-discard,#deck-card{position:absolute;height:100%;width:100%;z-index:2}.front,.back{backface-visibility:hidden;position:absolute;width:100%;height:100%}.back{z-index:2;transform:rotateY(0)}.front{transform:rotateY(180deg)}.spot{position:absolute;width:100%;height:100%}.spot-card{position:absolute;width:100%;height:100%;z-index:2}h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}h2{font-size:clamp(1.4rem,2.8vw,2rem)}h3{font-size:clamp(.7rem,2.4vw,1.6rem)}h4{font-size:clamp(.8rem,2.2vw,1.4rem)}h5{font-size:clamp(.6rem,2vw,1.2rem)}#messages{grid-column:3 / 4;grid-row:3 / 4;font-size:xxx-large;font-style:italic;background-color:azure;text-align:center;opacity:85%;position:relative;bottom:25%;width:115%;right:7.5%;z-index:3}#end-screen,#end-round-screen{position:absolute;width:100%;text-align:center;background-color:azure;opacity:85%;z-index:3}#end-round-screen{bottom:55%}#end-screen{bottom:45%}#end-screen button{position:relative;width:100px;margin-bottom:10px}.hidden,#cards-area.hidden{display:none}.bold{font-weight:950}.temp{position:absolute;width:100%;height:100%;z-index:10}@media only screen and (max-width: 800px) and (min-width: 590px){#p1-name{bottom:200%}#p3-name{top:30%}#p2-name{left:130%}#p4-name{right:130%}#messages{font-size:xx-large}#end-round-screen{bottom:53%}#end-screen{bottom:42%}}@media only screen and (max-width: 590px) and (min-width: 450px){#p1-name{bottom:230%}#p1{bottom:35%}#middle{bottom:20%}#p3{bottom:5%}#drawn-card-area-2{bottom:42%}#drawn-card-area-4{top:12%}#p2-name{left:130%}#p4-name{right:130%}#messages{font-size:x-large}#end-round-screen{bottom:50%}#end-screen{bottom:35%}}@media only screen and (max-width: 450px){#p1-name{bottom:290%}#p1{bottom:47%}#middle{bottom:27%}#p3{bottom:7%}#p3-name{top:30%}#drawn-card-area-2{bottom:53%}#drawn-card-area-4{top:8%}#drawn-card-area-1{bottom:35%}#drawn-card-area-3{top:-20%}#p2-name{left:170%;bottom:20%}#p4-name{right:170%}#p2,#p4{bottom:23%}#messages{font-size:x-large}#end-round-screen{bottom:50%}#end-screen{bottom:35%}#deck-area{right:15%}}@media only screen and (max-height: 852px) and (min-height: 630px) and (min-aspect-ratio: 1.27){#cards-area{max-height:853px;height:98vh;width:auto}#p2{right:5%}#p2-name{left:40%}#p4{left:5%}#p4-name{right:40%}#drawn-card-area-2{bottom:25%}#drawn-card-area-4{top:-5%;left:15%}}@media only screen and (max-height: 630px) and (min-height: 475px) and (min-aspect-ratio: 1.27){#cards-area{max-height:853px;height:98vh;width:auto}#p2{right:5%;bottom:17%}#p2-name{left:90%}#p4{left:5%;bottom:20%}#p4-name{right:90%}#p3-name{top:20%}#p3{bottom:3%}#drawn-card-area-3{bottom:18%}#drawn-card-area-2{bottom:27%}#drawn-card-area-4{top:-9%;left:15%}#p1{bottom:35%}#p1-name{bottom:220%}#drawn-card-area-1{bottom:19%}#middle{bottom:18%}#messages{font-size:xx-large}h3,h4{font-size:large}h2{font-size:x-large}h1{font-size:xx-large}h5{font-size:medium}}@media only screen and (max-height: 475px) and (min-aspect-ratio: 1.27){#cards-area{max-height:853px;height:96vh;width:auto}#p2{right:5%;bottom:19%}#p2-name{left:190%}#p4{left:5%;bottom:23%}#p4-name{right:190%}#p3-name{top:38%}#p3{bottom:4%}#drawn-card-area-3{bottom:18%;left:30%}#drawn-card-area-2{bottom:32%}#drawn-card-area-4{top:-9%;left:15%}#p1{bottom:42%}#p1-name{bottom:270%}#drawn-card-area-1{bottom:27%}#messages{font-size:x-large}h3,h4{font-size:large}#middle{bottom:23%}h2{font-size:large}h1{font-size:x-large}h5{font-size:medium}#end-screen{top:20%;height:50%}}@keyframes deal-card{0%{transform:translate(0) translateY(0);z-index:10}to{transform:translate(var(--horizontal-distance)) translateY(var(--vertical-distance));z-index:10}}@keyframes take-card{0%{transform:translate(0) translateY(0) rotate(var(--start-angle));z-index:10}to{transform:translate(var(--horizontal-distance)) translateY(var(--vertical-distance)) rotate(var(--end-angle));z-index:10}}@keyframes take-flipped-card{0%{transform:translate(0) translateY(0) rotateY(180deg) rotate(var(--start-angle));z-index:10}to{transform:translate(var(--horizontal-distance)) translateY(var(--vertical-distance)) rotateY(180deg) rotate(var(--end-angle));z-index:10}}@keyframes shuffle{0%{transform:translate(0) rotate(0)}25%{transform:translate(-10px,-10px) rotate(-10deg)}50%{transform:translate(10px,-10px) rotate(10deg)}75%{transform:translate(-10px,10px) rotate(-10deg)}to{transform:translate(0) rotate(0)}}