@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap";:root{--doc-scrollheight: 100%;--clr-black: #000;--clr-dark-purple: #5c2dd5;--clr-pale-purple: #7945ff;--clr-pink: #fd6687;--clr-yellow: #ffce67;--clr-white: #fff;--ff-body: "Space Grotesk", sans-serif;--fw-bold: "bold";--fw-medium: "medium";--fs-400: 1rem;--fs-500: 1.25rem;--fs-600: 1.5rem;--fs-700: 2rem;--fs-900: 3.5rem;--lh-400: 1.313rem;--lh-500: 1.625rem;--lh-600: 1.938rem;--lh-900: 4.438rem}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0;font:inherit}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;font-family:var(--ff-body);font-weight:var(--fw-bold);background-color:var(--clr-pale-purple);overflow-x:hidden}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.heading-lg{font-size:var(--fs-900);line-height:var(--lh-900)}.heading-m{font-size:var(--fs-600);line-height:var(--lh-600)}.heading-sm{font-size:var(--fs-500);line-height:var(--lh-500)}.heading-xs{font-size:var(--fs-400);line-height:var(--lh-400)}.body-text{font-size:var(--fs-400);line-height:var(--lh-400);font-weight:var(--fw-medium)}.btn{border-radius:20px;border:3px solid var(--clr-black);box-shadow:0 10px 0 var(--clr-black);padding:20px;display:flex;align-items:center;justify-content:center}.btn-lg{width:335px;height:72px}.btn-m{width:295px;height:72px}.btn-sm{width:108px;height:39px;border-radius:20px;border:none;background-color:var(--clr-dark-purple);color:var(--clr-white)}.btn-round{height:75px;width:70px;padding:0;background-color:none;border:none;border-radius:50%;background-image:url(/assets/icon-check.a1176e7b.svg);background-repeat:no-repeat;background-size:cover}.GAME.RULES{justify-content:flex-start}@media (hover){button:hover{cursor:pointer}.btn:hover{box-shadow:0 10px 0 var(--clr-dark-purple)}.btn-round:hover{background-image:url(/assets/icon-check-hover.ea260ba9.svg)}}@media (min-width: 680px){.btn-lg{width:400px;height:72px}.btn-m{width:400px;height:72px;box-shadow:0 10px 0 var(--clr-black)}.btn-sm{width:86px;height:39px}}.pvp{background-color:var(--clr-yellow);color:var(--clr-black);justify-content:space-between}.quit{background-color:var(--clr-pink);color:var(--clr-white)}.options{background-color:var(--clr-white);color:var(--clr-black)}h2{color:var(--clr-pale-purple)}.app{display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-content:center;flex-direction:column;column-gap:20px}.win{width:40%;height:40%;border-radius:50%;border:4px solid white}.top{box-shadow:inset 1px 6px 3px 1px #00000080}.player1{background-color:var(--clr-pink);box-shadow:inset 1px 6px 3px 1px #00000080}.player2{background-color:var(--clr-yellow);box-shadow:inset 1px 6px 3px 1px #00000080}.winner-container{height:160px;width:285px;background-color:var(--clr-white);border:3px solid var(--clr-black);border-radius:20px;box-shadow:0 10px 0 var(--clr-black);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:17px;position:absolute;top:93%;left:50%;transform:translate(-50%);z-index:99999}.winner-container button{width:130px}#player-indicator{height:165px;width:197px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 17px 17px;position:absolute;top:93%;left:50%;transform:translate(-50%);z-index:88888}#player-indicator.p1{background-image:url(/assets/turn-background-red.4aa40b5b.svg);color:var(--clr-white)}#player-indicator.p2{background-image:url(/assets/turn-background-yellow.028a4c9c.svg);color:var(--clr-black)}#main-menu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center}#main-menu .menu-container{display:flex;flex-direction:column;align-items:center;gap:30px}#main-menu .menu-logo{height:52px;width:52px;margin-bottom:50px}#game-rules{height:618px;width:335px;background-color:var(--clr-white);border-radius:40px;border:3px solid var(--clr-black);box-shadow:0 10px 0 var(--clr-black);display:flex;flex-direction:column;padding:30px 20px;position:relative}#game-rules h1{align-self:center;margin-bottom:29px}#game-rules h2{margin-bottom:16px}#game-rules p{margin-bottom:33px}#game-rules li{margin-bottom:10px}#game-rules ul{padding-left:27px;list-style:decimal;list-style-position:outside}#game-rules button{position:absolute;bottom:-35px;left:50%;transform:translate(-50%)}#pause-menu{position:absolute;z-index:99999999;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;background-color:#00000080;height:100vh;width:100vw}#pause-menu .pause-container{position:relative;height:437px;width:335px;display:flex;flex-direction:column;align-items:center;gap:30px;background-color:var(--clr-pale-purple);border-radius:40px;border:3px solid var(--clr-black);box-shadow:0 10px 0 var(--clr-black);padding:30px 20px}#pause-menu h1{color:var(--clr-white)}#menu-buttons{display:flex;justify-content:space-between;width:335px;margin:50px 0;grid-column:1/3;justify-self:center}#menu-buttons img{height:40px;width:40px}#score{position:relative;width:142px;height:81px;background-color:var(--clr-white);border-radius:20px;border:3px solid var(--clr-black);box-shadow:0 10px 0 var(--clr-black);display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;margin-bottom:50px}#score:after{content:" ";display:block;position:absolute;height:54px;width:59px;background-repeat:no-repeat;background-size:contain}#score:nth-of-type(even):after{background-image:url(/assets/player-one.07970e5b.svg);left:-25px}#score.pause:nth-of-type(even):after{background-image:url(/assets/player-one-angry.f806fad4.svg)}#score:nth-of-type(odd):after{background-image:url(/assets/player-two.9ddd404d.svg);right:-30px}#score.pause:nth-of-type(odd):after{background-image:url(/assets/player-two-angry.400dff22.svg)}#score:nth-of-type(even){justify-self:flex-end}#score .player{font-size:var(--fs-400)}#score .display{font-size:var(--fs-700)}#gameboard{width:335px;height:310px;position:relative;grid-column:1/3;justify-self:center}#gameboard .gameboard-underlay{position:relative;z-index:1;display:grid;grid-template-columns:repeat(7,1fr);gap:5px;row-gap:6px;padding-top:.4em;padding-left:.5em;padding-right:.5em}.gamesquare{height:41px;width:41px;border-radius:50%;display:flex;align-items:center;justify-content:center}#gameboard .gameboardBlack{position:absolute;z-index:-1;left:50%;transform:translate(-50%)}#gameboard .gameboardWhite{position:absolute;z-index:999;left:50%;transform:translate(-50%);pointer-events:none}#footer-color{position:absolute;left:50%;transform:translate(-50%);width:100vw;bottom:calc(581px - var(--doc-scrollheight));top:95%;background-color:var(--clr-dark-purple);z-index:-99;border-top-right-radius:70px;border-top-left-radius:70px}#footer-color.player-1{background-color:var(--clr-pink)}#footer-color.player-2{background-color:var(--clr-yellow)}@media (max-height: 700px){#menu-buttons{margin-top:10px;margin-bottom:20px}#score{margin-bottom:30px}#footer-color{bottom:calc(491px - var(--doc-scrollheight))}}@media (min-width: 680px){#main-menu{background-color:var(--clr-dark-purple);height:100vh;width:100vw}#main-menu .menu-container{height:480px;width:440px;padding-top:70px;border-radius:40px;border:3px solid var(--clr-black);box-shadow:0 10px 0 var(--clr-black);background-color:var(--clr-pale-purple)}#pause-menu .pause-container{height:491px;width:480px}#menu-buttons{width:632px;margin:30px 0}#menu-buttons img{height:52px;width:52px}#score{width:296px;height:100px;flex-direction:row;gap:20px;margin-bottom:30px}#score:nth-of-type(odd){flex-direction:row-reverse}#score .player{font-size:var(--fs-500)}#score .display{font-size:var(--fs-900)}#gameboard{width:632px;height:584px}#gameboard .gameboard-underlay{gap:15px;padding-top:1em;padding-left:1em;padding-right:1em}.gamesquare{height:73px;width:73px}.player1,.player2,.top{box-shadow:inset 1px 9px 3px 1px #00000080}#footer-color{bottom:calc(826px - var(--doc-scrollheight))}}@media (min-width: 1100px){.app{grid-template-columns:1fr 1fr 1fr;column-gap:60px}#menu-buttons{grid-column:1/4}#score{width:141px;height:187px;flex-direction:column;padding:50px 0}#score:after{top:-25px;left:53%;transform:translate(-50%)}#score:nth-of-type(even):after{left:54%}#score:nth-of-type(even){grid-column:1/2;grid-row:2/3}#score:nth-of-type(odd){grid-column:3/4;grid-row:2/3;flex-direction:column}#gameboard{grid-column:2/3;grid-row:2/3}#footer-color{bottom:calc(696px - var(--doc-scrollheight))}@media (hover){.top:hover:after{content:" ";position:absolute;top:-7%;width:38px;height:36px}.top.redmarker:hover:after{background-image:url(/assets/marker-red.2e084466.svg)}.top.yellowmarker:hover:after{background-image:url(/assets/marker-yellow.fc796acb.svg)}}}