:root{font-size:16px}body{text-align:center;margin:0;background-color:#02140c;color:#faebd7}main{margin:auto;width:fit-content}.headArea{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}.headArea .deal{margin:1rem 0;animation:2s ease-in infinite animated-glow-border;box-shadow:0px 0px 10px 3px rgba(168,168,168,0.25);width:calc(9rem - 10px);padding:0.3125rem 0;cursor:pointer;border:2px solid #faebd7;border-radius:5px;background-color:#333;color:#faebd7}.headArea .deal:hover{border:2px solid #d2fcba;box-shadow:0px 0px 10px 3px rgba(168,168,168,0.25);color:#fff;background-color:#222}.hiddenArea{display:none}.gameArea{display:flex;flex-direction:column;flex-wrap:wrap;gap:0;background:radial-gradient(circle, #028b4e 0%, #00512c 82%);color:#fff;padding:0;min-height:100vh}.gameArea .centerArea{display:grid}.gameArea .centerArea .reDeal{position:relative;animation:2s ease-in 0ms infinite animated-glow-border;height:fit-content;grid-area:1/1;top:-4rem;margin:auto;padding:0.5rem 2rem;width:fit-content}.gameArea .centerArea .scoreArea{background-color:rgba(51,51,51,0.25);padding:0.5rem;margin:1rem 0 0 0;grid-area:1/1}.gameArea .playerArea,.gameArea .dealerArea{margin:1rem auto 0 auto;background-color:rgba(51,51,51,0.25);padding:1rem 0;border-radius:5px;border:2px solid #8d7c1f;width:70%;box-sizing:border-box}.gameArea .playerArea h3,.gameArea .dealerArea h3{background-color:rgba(51,51,51,0.25);padding:0.5rem}.gameArea .playerArea .playerHand,.gameArea .playerArea .dealerHand,.gameArea .dealerArea .playerHand,.gameArea .dealerArea .dealerHand{display:flex;flex-wrap:wrap;justify-content:center;gap:0 1vw}.gameArea .playerArea .playerHand .cardHolder,.gameArea .playerArea .dealerHand .cardHolder,.gameArea .dealerArea .playerHand .cardHolder,.gameArea .dealerArea .dealerHand .cardHolder{margin:0}.gameArea .playerArea .playerHand .cardHolder .card,.gameArea .playerArea .dealerHand .cardHolder .card,.gameArea .dealerArea .playerHand .cardHolder .card,.gameArea .dealerArea .dealerHand .cardHolder .card{margin:0.625rem -0.9375rem;width:9rem;height:12rem;border-radius:5px;border:1px solid #333;box-shadow:1px 1px 5px 3px rgba(0,0,0,0.35);display:flex;flex-direction:column;justify-content:space-between;background-color:#ececec}.gameArea .playerArea .playerHand .cardHolder .flipCard,.gameArea .playerArea .dealerHand .cardHolder .flipCard,.gameArea .dealerArea .playerHand .cardHolder .flipCard,.gameArea .dealerArea .dealerHand .cardHolder .flipCard{width:9rem;height:12rem;border-radius:5px;border:1px solid #333;box-shadow:1px 1px 5px 3px rgba(0,0,0,0.35);display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle, #1447a7 5%, #062c64 90%)}.gameArea .playerArea .playerHand .cardHolder .flipCard .card-value-suit,.gameArea .playerArea .playerHand .cardHolder .flipCard .card-value-suit.bot,.gameArea .playerArea .playerHand .cardHolder .flipCard .card-suit,.gameArea .playerArea .dealerHand .cardHolder .flipCard .card-value-suit,.gameArea .playerArea .dealerHand .cardHolder .flipCard .card-value-suit.bot,.gameArea .playerArea .dealerHand .cardHolder .flipCard .card-suit,.gameArea .dealerArea .playerHand .cardHolder .flipCard .card-value-suit,.gameArea .dealerArea .playerHand .cardHolder .flipCard .card-value-suit.bot,.gameArea .dealerArea .playerHand .cardHolder .flipCard .card-suit,.gameArea .dealerArea .dealerHand .cardHolder .flipCard .card-value-suit,.gameArea .dealerArea .dealerHand .cardHolder .flipCard .card-value-suit.bot,.gameArea .dealerArea .dealerHand .cardHolder .flipCard .card-suit{display:none}.gameArea .playerArea .playerHand .cardHolder .card-value-suit,.gameArea .playerArea .dealerHand .cardHolder .card-value-suit,.gameArea .dealerArea .playerHand .cardHolder .card-value-suit,.gameArea .dealerArea .dealerHand .cardHolder .card-value-suit{display:flex;gap:0.3125rem;font-size:1.25rem;background-color:#e6e6e6;border-bottom:1px dotted rgba(51,51,51,0.5);border-radius:5px 5px 0 0;padding:0.15rem 0 0 0.35rem}.gameArea .playerArea .playerHand .cardHolder .card-value-suit span,.gameArea .playerArea .dealerHand .cardHolder .card-value-suit span,.gameArea .dealerArea .playerHand .cardHolder .card-value-suit span,.gameArea .dealerArea .dealerHand .cardHolder .card-value-suit span{padding:0.2rem 0rem 0.2rem 0.35rem}.gameArea .playerArea .playerHand .cardHolder .card-value-suit.bot,.gameArea .playerArea .dealerHand .cardHolder .card-value-suit.bot,.gameArea .dealerArea .playerHand .cardHolder .card-value-suit.bot,.gameArea .dealerArea .dealerHand .cardHolder .card-value-suit.bot{transform:rotate(180deg)}.gameArea .playerArea .playerHand .cardHolder .card-suit,.gameArea .playerArea .dealerHand .cardHolder .card-suit,.gameArea .dealerArea .playerHand .cardHolder .card-suit,.gameArea .dealerArea .dealerHand .cardHolder .card-suit{font-size:1.5rem;display:flex;flex-wrap:wrap;justify-content:space-around;padding:0.625rem 2rem;gap:0.3rem 0.15rem}.gameArea .playerArea .playerHand .cardHolder .card-suit.A,.gameArea .playerArea .dealerHand .cardHolder .card-suit.A,.gameArea .dealerArea .playerHand .cardHolder .card-suit.A,.gameArea .dealerArea .dealerHand .cardHolder .card-suit.A{position:relative;font-size:5rem;padding:0}.gameArea .playerArea .playerHand .cardHolder .card-suit.K,.gameArea .playerArea .playerHand .cardHolder .card-suit.Q,.gameArea .playerArea .playerHand .cardHolder .card-suit.J,.gameArea .playerArea .dealerHand .cardHolder .card-suit.K,.gameArea .playerArea .dealerHand .cardHolder .card-suit.Q,.gameArea .playerArea .dealerHand .cardHolder .card-suit.J,.gameArea .dealerArea .playerHand .cardHolder .card-suit.K,.gameArea .dealerArea .playerHand .cardHolder .card-suit.Q,.gameArea .dealerArea .playerHand .cardHolder .card-suit.J,.gameArea .dealerArea .dealerHand .cardHolder .card-suit.K,.gameArea .dealerArea .dealerHand .cardHolder .card-suit.Q,.gameArea .dealerArea .dealerHand .cardHolder .card-suit.J{font-size:3rem}.gameArea .playerArea .playerHand .cardHolder .card.S,.gameArea .playerArea .playerHand .cardHolder .card.C,.gameArea .playerArea .dealerHand .cardHolder .card.S,.gameArea .playerArea .dealerHand .cardHolder .card.C,.gameArea .dealerArea .playerHand .cardHolder .card.S,.gameArea .dealerArea .playerHand .cardHolder .card.C,.gameArea .dealerArea .dealerHand .cardHolder .card.S,.gameArea .dealerArea .dealerHand .cardHolder .card.C{color:black}.gameArea .playerArea .playerHand .cardHolder .card.H,.gameArea .playerArea .playerHand .cardHolder .card.D,.gameArea .playerArea .dealerHand .cardHolder .card.H,.gameArea .playerArea .dealerHand .cardHolder .card.D,.gameArea .dealerArea .playerHand .cardHolder .card.H,.gameArea .dealerArea .playerHand .cardHolder .card.D,.gameArea .dealerArea .dealerHand .cardHolder .card.H,.gameArea .dealerArea .dealerHand .cardHolder .card.D{color:red}.gameArea .playerArea .playerHand .buttonHolder,.gameArea .playerArea .dealerHand .buttonHolder,.gameArea .dealerArea .playerHand .buttonHolder,.gameArea .dealerArea .dealerHand .buttonHolder{display:flex;justify-content:center;gap:calc(1vw + 0.625rem);margin:1rem 0 0 0}.gameArea .winsArea{position:relative;padding:1rem 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:calc(1vw + 0.3125rem);border:none}.gameArea .winsArea #resetScoreButton{width:9rem;padding:0.625rem 0.3125rem}.gameArea .winsArea div{background-color:rgba(0,0,0,0.55);padding:0.625rem 0.5rem;border-radius:0.3125rem;width:4.5rem;height:fit-content;display:flex;justify-content:space-between;align-items:center}.gameArea .btn{width:calc(9rem - 10px);padding:0.3125rem 0;cursor:pointer;box-shadow:1px 1px 5px 1px rgba(0,0,0,0.3);border:2px solid #faebd7;border-radius:5px;background-color:#333;color:#faebd7}.gameArea .btn:hover{border:2px solid #d2fcba;box-shadow:0px 0px 10px 3px rgba(168,168,168,0.25);color:#fff;background-color:#222}.gameArea .greyOut{background-color:#ad1030;color:#333;cursor:not-allowed}.gameArea .greyOut:hover{background-color:#ad1030}.gameArea .winButton{background-color:#045f04;color:#fff;box-shadow:1px 1px 5px 3px rgba(0,0,0,0.25)}.gameArea .winButton:hover{background-color:#7aac2f;color:#333;box-shadow:0px 0px 5px 0px rgba(0,0,0,0.25)}.out_animation{animation:animated-card-out 200ms ease-in 0ms forwards}.in_animation{opacity:0;animation:animated-card-in 300ms ease-in 0ms forwards}@keyframes animated-card-out{0%{width:9rem;opacity:1;margin:0}100%{width:0px;margin:-2rem 0 0 0;opacity:0}}@keyframes animated-card-in{0%{overflow:hidden;white-space:nowrap;width:0px;opacity:0}60%{opacity:0}100%{overflow:visible;white-space:normal;width:9rem;opacity:1}}@keyframes animated-glow-border{0%{border:2px solid #a7fc77;box-shadow:0px 0px 3px 1px rgba(168,168,168,0.25)}50%{border:2px solid #d2fcba;box-shadow:0px 0px 10px 5px rgba(168,168,168,0.25)}100%{border:2px solid #a7fc77;box-shadow:0px 0px 3px 1px rgba(168,168,168,0.25)}}@media screen and (max-width: 800px){:root{font-size:12px}.headArea{padding:1rem}.headArea .deal{margin:2rem 0;width:calc(9rem - 5px);padding:0.3125rem}.gameArea .centerArea .reDeal{top:-5.15rem;padding:0.25rem 1rem}.gameArea .playerArea,.gameArea .dealerArea{width:90%}.gameArea .playerArea h3,.gameArea .dealerArea h3{padding:0.25rem}.gameArea .playerArea .playerHand .cardHolder .card-value-suit,.gameArea .playerArea .dealerHand .cardHolder .card-value-suit,.gameArea .dealerArea .playerHand .cardHolder .card-value-suit,.gameArea .dealerArea .dealerHand .cardHolder .card-value-suit{font-size:1rem}.gameArea .playerArea .playerHand .cardHolder .card-value-suit span,.gameArea .playerArea .dealerHand .cardHolder .card-value-suit span,.gameArea .dealerArea .playerHand .cardHolder .card-value-suit span,.gameArea .dealerArea .dealerHand .cardHolder .card-value-suit span{padding:0.15rem 0rem 0.15rem 0.3rem}.gameArea .playerArea .playerHand .cardHolder .card-suit,.gameArea .playerArea .dealerHand .cardHolder .card-suit,.gameArea .dealerArea .playerHand .cardHolder .card-suit,.gameArea .dealerArea .dealerHand .cardHolder .card-suit{font-size:1rem;padding:0.5rem 2rem;gap:0.5rem 0.15rem}.gameArea .playerArea .playerHand .cardHolder .card-suit.A,.gameArea .playerArea .dealerHand .cardHolder .card-suit.A,.gameArea .dealerArea .playerHand .cardHolder .card-suit.A,.gameArea .dealerArea .dealerHand .cardHolder .card-suit.A{font-size:4rem}.gameArea .playerArea .playerHand .cardHolder .card-suit.K,.gameArea .playerArea .playerHand .cardHolder .card-suit.Q,.gameArea .playerArea .playerHand .cardHolder .card-suit.J,.gameArea .playerArea .dealerHand .cardHolder .card-suit.K,.gameArea .playerArea .dealerHand .cardHolder .card-suit.Q,.gameArea .playerArea .dealerHand .cardHolder .card-suit.J,.gameArea .dealerArea .playerHand .cardHolder .card-suit.K,.gameArea .dealerArea .playerHand .cardHolder .card-suit.Q,.gameArea .dealerArea .playerHand .cardHolder .card-suit.J,.gameArea .dealerArea .dealerHand .cardHolder .card-suit.K,.gameArea .dealerArea .dealerHand .cardHolder .card-suit.Q,.gameArea .dealerArea .dealerHand .cardHolder .card-suit.J{font-size:3rem}.gameArea .winsArea{padding:0.5rem 0 0 0}.gameArea .winsArea fieldset{gap:calc(1vw + 0.25rem)}.gameArea .winsArea fieldset #resetScoreButton{padding:0.3125rem}.gameArea .winsArea fieldset div{padding:0.5rem}.gameArea .btn{width:calc(9rem - 5px)}}