@import url(https://fonts.googleapis.com/css2?family=Itim&display=swap);body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-width:350px}*{font-family:"Indie Flower",cursive}.auth{flex-flow:column wrap;flex:1.1 1;height:100%}.auth,.auth-form{display:flex;justify-content:center;align-items:center}.auth-form{flex-flow:column wrap;width:80%;height:350px;background:rgba(54,212,98,.15);box-shadow:0 18px 15px 0 rgba(31,38,135,.37);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:50px;border:1px solid hsla(0,0%,100%,.18);margin-block:50px}.form-input-fields{width:100%;font-weight:700;font-size:.9rem;margin-block:2%}.form-input-fields:first-child{margin-top:-30px}.form-input-fields label{margin-left:5%;width:25%}.form-input-fields input{font-size:1.1em;margin-left:2%;height:35px;width:60%;border-radius:15px;text-align:center;border:2px inset #000;background:rgba(57,57,57,.5);color:#fff}.form-input-fields input::placeholder{color:hsla(0,0%,100%,.503)}.form-input-fields input:focus{outline:2px solid #000;outline-offset:1px}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{box-shadow:inset 0 0 0 30px #393939!important;opacity:.5;-webkit-text-fill-color:#fff}.auth-form button[type=submit]{box-shadow:3px 4px 0 0 #8a2a21;background:linear-gradient(180deg,#c62d1f 5%,#f24437);background-color:#c62d1f;border-radius:18px;width:50%;margin-top:1em;border:1px solid #d02718;display:inline-block;color:#fff;font-size:1.2em;text-decoration:none;text-shadow:0 1px 0 #810e05;position:absolute;bottom:25px}.auth-form button[type=submit]:hover{background:linear-gradient(180deg,#f24437 5%,#c62d1f);background-color:#f24437}.form-buttons button{margin-inline:20px;box-shadow:0 10px 14px -7px #276873;background:linear-gradient(180deg,#599bb3 5%,#408c99);background-color:#599bb3;border-radius:8px;display:inline-block;cursor:pointer;color:#fff;font-size:1.1em;padding:5px 10px;text-decoration:none;text-shadow:0 1px 0 #3d768a}.form-buttons button:active,.form-buttons button:hover{background:linear-gradient(180deg,#408c99 5%,#599bb3);background-color:#408c99}.form-buttons button span{font-weight:700}@media only screen and (max-width:900px){.auth{transform:scale(.7);position:relative;top:-170px}.auth-form{width:85vw}.form-input-fields{font-size:1.1em}.form-buttons button{width:35vw}}@media only screen and (max-width:600px)and (min-width:900px){auth-form{width:100vw}}@media only screen and (max-width:450px){.form-buttons{display:flex}.form-buttons button{height:60px}}.homepage{display:flex;flex-flow:row wrap;justify-content:center;align-items:center}.homepage *{transition:all 1s ease}.homepage{width:100vw;height:100vh;background-image:url(https://staticctf.akamaized.net/8aefmxkxpxwl/1qsQOdn4SDZywxdcULpQDR/7312cd4973de34cbecac302d033bb5d2/UNO_1920x1080.jpg);background-size:auto 120%;background-repeat:no-repeat}.welcome{margin-inline:5%;flex:.9 1;color:#fff;height:100%;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;flex-flow:column wrap;align-content:center}.welcome-logo{width:min(300px,50%);padding:1em}.welcome-logo~*{text-align:center;margin-block:.5em}@media only screen and (max-width:900px){.homepage{display:inline-block}.homepage .welcome{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.homepage .welcome h1{font-size:1.8em}.homepage .welcome-logo{width:150px}.homepage .welcome-logo~*{font-size:.8em}}#rooms-ui{display:flex;flex-flow:column wrap;align-items:center;justify-content:flex-start;grid-gap:10%;gap:10%;height:85vh;min-width:350px;width:100vw;margin-block:1.5vh;padding-top:50px}#rooms-ui .room-choice-buttons button{margin-inline:2vw;box-shadow:inset 0 1px 0 0 #f9eca0;background:linear-gradient(180deg,#f0c911 5%,#f2ab1e);background-color:#f0c911;border-radius:6px;border:1px solid #e65f44;display:inline-block;color:#c92200;text-decoration:none;text-shadow:0 1px 0 #ded17c;color:#000;padding:10px 20px}#rooms-ui .room-choice-buttons button:hover{background:linear-gradient(180deg,#f2ab1e 5%,#f0c911);background-color:#f2ab1e}#rooms-ui .room-choice-buttons button:active{position:relative;top:1px}#rooms-ui .room-form{width:45%;box-sizing:border-box}#rooms-ui .room-form input{position:relative;width:80%;min-width:200px;height:40px;border:3px inset #000;border-radius:15px;padding-left:15px;font-family:Arial,Helvetica,sans-serif}#rooms-ui .room-form input::placeholder{font-family:"Indie Flower",cursive}#rooms-ui .room-form button[type=submit]{width:10%;min-width:60px;margin-left:5%;height:35px;background-color:red;font-weight:700;border-width:1px;color:#fff;border-color:#337fed;border-radius:6px;box-shadow:inset 0 1px 0 0 #97c4fe;text-shadow:inset 0 1px 0 #1570cd;background:linear-gradient(#3d94f6,#1e62d0)}#rooms-ui .room-form button[type=submit]:hover{background:linear-gradient(#1e62d0,#3d94f6)}#rooms-ui .room-form label{font-weight:700;left:0}.room-form-controller{width:100%}.waiting-for-socket{display:flex;flex-flow:column wrap;align-items:center;justify-content:flex-start;margin-top:7.5vh}.waiting-for-socket span{margin-top:25px;font-weight:700}@media only screen and (max-width:900px){.room-form{width:70%!important}}@media only screen and (max-width:600px){.room-choice-buttons button{padding:0;font-size:.8rem;font-weight:700}.room-form-controller{display:flex;flex-flow:column wrap;align-items:center;justify-content:flex-start}.room-form-controller input{width:100%!important}.room-form-controller button{-webkit-margin-before:20px;margin-block-start:20px}}.waiting-room-modal .modal-title,.wr-modal-body{text-align:center}.wr-modal-body{display:flex;flex-flow:column wrap;align-items:center;justify-content:space-around;height:45vh;font-weight:700;font-size:1.2rem}.wr-modal-body button{display:inline-block;padding:.35em 1.2em;margin:0 .3em .3em 0;border-radius:15px;box-sizing:border-box;border:2px outset grey;text-decoration:none;font-weight:300;color:#fff;text-align:center;transition:all .2s;background-color:#000}.wr-modal-body button:hover{color:#000;background-color:#fff}@media only screen and (max-width:570px){.wr-modal-body{font-size:1rem}}.uno-card{height:140px;width:auto;transition:all .5s linear}.uno-card:hover{transform:scale(1.1);z-index:20}.draw-pile-card{position:absolute}.draw-pile-card:first-child{transform:translateX(10px);z-index:1}.draw-pile-card:first-child:hover{transform:translateX(10px) scale(1.1)}.draw-pile-card:nth-child(2){transform:translateX(20px);z-index:2}.draw-pile-card:nth-child(2):hover{transform:translateX(20px) scale(1.1)}.draw-pile-card:nth-child(3){transform:translateX(30px);z-index:3}.draw-pile-card:nth-child(3):hover{transform:translateX(30px) scale(1.1)}.draw-pile-card:nth-child(4){transform:translateX(40px);z-index:4}.draw-pile-card:nth-child(4):hover{transform:translateX(40px) scale(1.1)}.draw-pile-card:nth-child(5){transform:translateX(50px);z-index:5}.draw-pile-card:nth-child(5):hover{transform:translateX(50px) scale(1.1)}.draw-pile-card:nth-child(6){transform:translateX(60px);z-index:6}.draw-pile-card:nth-child(6):hover{transform:translateX(60px) scale(1.1)}.draw-pile-card:nth-child(7){transform:translateX(70px);z-index:7}.draw-pile-card:nth-child(7):hover{transform:translateX(70px) scale(1.1)}.draw-pile-card:nth-child(8){transform:translateX(80px);z-index:8}.draw-pile-card:nth-child(8):hover{transform:translateX(80px) scale(1.1)}.draw-pile-card:nth-child(9){transform:translateX(90px);z-index:9}.draw-pile-card:nth-child(9):hover{transform:translateX(90px) scale(1.1)}.draw-pile-card:nth-child(10){transform:translateX(100px);z-index:10}.draw-pile-card:nth-child(10):hover{transform:translateX(100px) scale(1.1)}.draw-pile-card:nth-child(11){transform:translateX(110px);z-index:11}.draw-pile-card:nth-child(11):hover{transform:translateX(110px) scale(1.1)}.discard-pile-card{position:absolute;transition:none}.discard-pile-card:first-child{transform:translate(-15px,13px) rotate(2deg);z-index:1}.discard-pile-card:nth-child(2){transform:translate(3px,16px) rotate(-4deg);z-index:2}.discard-pile-card:nth-child(3){transform:translate(7px,-3px) rotate(-4deg);z-index:3}.discard-pile-card:nth-child(4){transform:translate(2px,-7px) rotate(0deg);z-index:4}.discard-pile-card:nth-child(5){transform:translate(-5px,19px) rotate(23deg);z-index:5}.discard-pile-card:last-child{transform:none;z-index:30!important;animation:card-played .5s}.discard-pile-card:last-child:hover{transform:translate(0) scale(1.1)}@keyframes card-played{0%{transform:translate3d(-100%,0,0) skewX(10deg);opacity:0}60%{transform:skewX(-5deg);opacity:1}80%{transform:skewX(2.5deg)}to{transform:translateZ(0)}}@media only screen and (max-width:1050px){.uno-card{height:90px}}@media only screen and (max-width:690px){.uno-card{height:75px}}.pick-a-color-wheel{height:375px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pick-a-color-wheel button{width:150px;height:150px;position:absolute}.pick-a-color-wheel button:hover{outline:2px solid #000;outline-offset:3px}#red{background:red;border-radius:0 150px 0 0;inset:2.5% auto auto 50%;transform:translateX(-50%) rotate(-45deg)}#red:hover{animation:color-rotation-red 1.5s linear infinite}#blue{background:#00f;border-radius:0 0 150px 0;inset:50% 12.5% auto auto;transform:translateY(-50%) rotate(-45deg)}#blue:hover{animation:color-rotation-blue 1.5s linear infinite}#green{background:green;border-radius:0 0 0 150px;inset:auto 50% 2.5% auto;transform:translateX(50%) rotate(-45deg)}#green:hover{animation:color-rotation-green 1.5s linear infinite}#yellow{background:#ff0;border-radius:150px 0 0 0;inset:50% auto auto 12.5%;transform:translateY(-50%) rotate(-45deg)}#yellow:hover{animation:color-rotation-yellow 1.5s linear infinite}@keyframes color-rotation-red{0%{background:red}50%{background:#f55}to{background:red}}@keyframes color-rotation-blue{0%{background:#00f}50%{background:#3949ff}to{background:#00f}}@keyframes color-rotation-green{0%{background:green}50%{background:#81ff27}to{background:green}}@keyframes color-rotation-yellow{0%{background:#ff0}50%{background:#fff7b7}to{background:#ff0}}@media only screen and (max-width:600px){.modal-content{width:95vw!important;margin-inline:1.5vw}.pick-a-color-wheel{height:75vmin}.pick-a-color-wheel button{zoom:.75}#yellow{inset:50% auto auto 9%}#blue{inset:50% 9% auto auto}}.challenge-body{margin:0;height:50vh;width:100%;display:flex;justify-content:space-around;align-items:center;flex-flow:row wrap}.challenge-body button{height:65%;width:45%;font-size:clamp(1.5rem,2vw,3rem)}.challenge-body button:disabled{background:#ccc!important;border:1px solid #999!important;color:#666!important;text-shadow:none!important;box-shadow:none!important;cursor:auto!important}.challenge-body button:first-of-type{box-shadow:inset 0 1px 0 0 #a4e271;background:linear-gradient(180deg,#89c403 5%,#77a809);background-color:#89c403;border-radius:50px;border:1px solid #74b807;display:inline-block;cursor:pointer;color:#fff;padding:6px 24px;text-decoration:none;text-shadow:0 1px 0 #528009}.challenge-body button:first-of-type:hover{background:linear-gradient(180deg,#77a809 5%,#89c403);background-color:#77a809}.challenge-body button:first-of-type:active{position:relative;top:1px}.challenge-body button:last-of-type{box-shadow:inset 0 1px 0 0 #f5978e;background:linear-gradient(180deg,#f24537 5%,#c62d1f);background-color:#f24537;border-radius:50px;border:1px solid #d02718;display:inline-block;cursor:pointer;color:#fff;padding:6px 24px;text-decoration:none;text-shadow:0 1px 0 #810e05}.challenge-body button:last-of-type:hover{background:linear-gradient(180deg,#c62d1f 5%,#f24537);background-color:#c62d1f}.challenge-body button:last-of-type:active{position:relative;top:1px}.post-game{height:70vh;background-image:url(/static/media/confetti.7c62a174.gif);background-size:cover;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:4rem;line-height:120px}.post-game p{font-size:.7em}.post-game strong{animation:rainbow_animation 5s ease-in-out infinite;display:inline-block;background:#000;background:linear-gradient(90deg,red,orange,#ff0,green,#00f,indigo,violet);-webkit-background-clip:text;background-clip:text;color:transparent}@keyframes rainbow_animation{0%,to{background-position:0;background-size:400%}50%{background-position:100%}}@media only screen and (max-width:300px){.post-game p{font-size:.5em}}#screen-disable{position:absolute;width:100vw;height:100vh;inset:0;background:hsla(0,0%,100%,.2);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:100}#uno-game{width:100vw;height:100vh;background-attachment:fixed;background-size:100% 100%;transition:background-image .5s ease;position:relative}.discard-pile{position:absolute;inset:50% auto auto 50%;transform:translate(-45px,-70px)}.draw-pile{inset:15% auto auto 10%;transform:rotate(25deg)}.draw-pile,.opponent-ui,.player-ui{position:absolute}.opponent-ui .player-hand,.player-ui .player-hand{position:relative;width:50vmax;height:160px;display:flex;justify-content:center}.opponent-ui .player-hand span:hover,.player-ui .player-hand span:hover{z-index:50!important}.opponent-ui strong,.player-ui strong{position:fixed;font-weight:bolder;font-size:2rem;-webkit-text-stroke:.3px #ff86bd;text-stroke:.3px #ff86bd;font-family:"Itim",cursive;color:#000;text-shadow:.2rem .2rem #9d9c9d}.opponent-ui strong span,.player-ui strong span{color:#000;font-weight:bolder;text-stroke:0;-webkit-text-stroke:0;text-shadow:.2rem .2rem transparent;text-decoration:underline}.opponent-ui{inset:7% 10% auto auto}.opponent-ui strong{inset:0 2% auto auto}.player-ui{inset:auto auto 7% 20%}.player-ui strong{inset:auto auto 0 2%}.player-ui button{position:fixed;width:100px;height:50px;display:inline-block;cursor:pointer;vertical-align:middle;font-size:1.5rem;text-decoration:none;font-weight:bolder;color:#382b22;background:#fff0f0;border:2px solid #b18597;border-radius:10px;transform-style:preserve-3d;transition:transform .15s ease-out,background .15s ease-out}.player-ui button:before{position:absolute;content:"";width:100%;height:100%;inset:0;background:#f9c4d2;border-radius:inherit;box-shadow:0 0 0 2px #b18597,0 .625rem 0 0 rgba(255,227,226,.1882352941);transform:translate3d(0,.75rem,-1rem);transition:transform .15s ease-out,box-shadow .15s ease-out}.player-ui button:hover{background:#ffe9e9;transform:translateY(.25rem)}.player-ui button:hover:before{box-shadow:0 0 0 2px #b18597,0 .5rem 0 0 rgba(255,227,226,.1882352941);transform:translate3d(0,.5rem,-1rem)}.player-ui button:active{background:#ffe9e9;transform:translateY(.75rem)}.player-ui button:active:before{box-shadow:0 0 0 2px #b18597,0 0 rgba(255,227,226,.1882352941);transform:translateZ(-1rem)}.player-ui button:first-of-type{inset:45% auto auto 30%}.player-ui button:last-of-type{inset:45% 30% auto auto}#goo-loader{position:absolute;right:60px;top:70px}.failed-uno-message{position:fixed;font-size:clamp(2rem,2vmax,3rem);font-weight:bolder;color:#fff;inset:30% auto auto 50%;transform:translate(-50%,-30%)}.animated-not-played .animated-card{animation:shake .5s linear}@keyframes shake{0%{to-webkit-transform:translateZ(0) scale(1.1);transform:translateZ(0) scale(1.1)}10%,50%{transform:translate3d(-5px,0,0) scale(1.1)}30%,70%{transform:translate3d(5px,0,0) scale(1.1)}80%{transform:translate3d(-2.5px,0,0) scale(1.1)}90%{transform:translate3d(2.5px,0,0) scale(1.1)}}@media only screen and (max-width:1050px){.opponent-ui .player-hand,.player-ui .player-hand{position:relative;width:40vmax;height:100px}.opponent-ui button,.player-ui button{font-size:1rem;width:75px;height:35px}.discard-pile{position:absolute;inset:50% auto auto 50%;transform:translate(-32.5px,-50px)}}@media only screen and (max-width:690px){.opponent-ui .player-hand,.player-ui .player-hand{position:relative;width:40vmax;height:100px}.opponent-ui button,.player-ui button{font-size:.9rem;width:50px;height:25px}.opponent-ui button:before,.player-ui button:before{transform:translate3d(0,.55rem,-1rem)}.opponent-ui button:active,.player-ui button:active{transform:translateY(.55rem)}.discard-pile{position:absolute;inset:50% auto auto 50%;transform:translate(-26px,-40px)}.opponent-ui{inset:7% 0 auto 45%}}@media only screen and (max-width:620px){.draw-pile{inset:0 auto auto -10%}.player-ui button{font-size:.7rem}.player-ui button:first-of-type{inset:45% auto auto 20%!important}.player-ui button:last-of-type{inset:45% 20% auto auto!important}}@media only screen and (max-width:555px)and (orientation:portrait){#uno-game{transform:translateY(-100%) rotate(90deg);transform-origin:bottom left;width:100vh;height:100vw;background-attachment:scroll;background-size:100% 100%}.opponent-ui strong,.player-ui strong{font-size:1.5rem}}.failed-uno-message{font-size:15px!important;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}header{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;height:12vh;min-width:350px;padding:0 5%;background:linear-gradient(to left top,#e28901,#ff895b);box-shadow:0 2px 10px 0 #3b8840}header .navbar-logo{height:8vh}header ul{list-style:none;display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;margin:auto}header ul li{position:relative}header ul li .nav-label{position:absolute;top:-10px;left:20px;font-size:1rem}header ul li .nav-data{font-size:2.3rem;font-weight:700}header ul *{padding:0 20px}header ul button{box-shadow:inset 0 1px 0 0 #f5978e;background:linear-gradient(180deg,#f24537 5%,#c62d1f);background-color:#f24537;border-radius:6px;border:1px solid #d02718;display:inline-block;cursor:pointer;color:#fff;font-weight:700;padding:5px 20px;text-decoration:none;text-shadow:0 1px 0 #810e05}header ul button:hover{background:linear-gradient(180deg,#c62d1f 5%,#f24537);background-color:#c62d1f}header ul button:active{transform:translateY(2px)}@media only screen and (max-width:700px){.nav-label{font-size:.5rem!important}.nav-data{font-size:1.4rem!important}header button{font-size:.8rem;padding:2px 10px}header img{zoom:.8}}@media only screen and (max-width:480px){.navbar-logo{height:10vmin!important}ul{width:90vw;padding:0!important}ul li{padding:0}ul .nav-data{font-size:.8rem!important;padding-inline:5px;max-width:100px!important;overflow:hidden}ul button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:5px!important;margin:0}ul .nav-label{padding:0;left:0!important}}.not-found{display:flex;flex-flow:row wrap;justify-content:center;align-items:center;width:70vw;height:100vh;margin:auto;grid-gap:5%;gap:5%}.not-found img{width:80%;height:auto}.not-found div{width:40%;display:flex;flex-flow:row wrap;justify-content:center;align-items:center;flex-direction:column;text-align:center;grid-gap:20px;gap:20px}.not-found div h1{font-size:clamp(3rem,5vw,5rem);font-weight:bolder}.not-found div p{font-size:larger;font-weight:bolder}.not-found-link{color:#000}.not-found-link:hover{color:red}@media only screen and (max-width:930px){.not-found{flex-flow:column wrap}.not-found div{width:95%}.not-found div h4{font-size:1.2rem}.not-found img{width:50%}}#game-choices{grid-gap:10%;gap:10%;height:85vh;min-width:350px;width:100vw;margin-block:1.5vh}#game-choices,.game-type{display:flex;flex-flow:row wrap;align-items:center;justify-content:center}.game-type{--hover-scale:1;--hover-vs-scale:1;--hover-margin:0;height:50%;width:max(37.5%,300px);background-color:#e28901;border-radius:30px;box-shadow:0 20px 15px 2px rgba(0,0,0,.6784313725);transtion:all 1s ease}.game-type:hover{background-color:#f90;--hover-scale:1.2;--hover-vs-scale:1.5;--hover-margin:8px}.game-type .cpu,.game-type .player,.game-type .player2{width:max(28%,80px);margin-inline:var(--hover-margin);transform:scale(var(--hover-scale));transition:all .5s ease-in-out}.game-type .vs{width:max(15%,75px);margin-inline:calc(20px + var(--hover-margin));transform:scale(var(--hover-vs-scale));transition:all .5s ease-in-out}.game-type .player2{transform:scale(calc(var(--hover-scale)*-1),var(--hover-scale))}.game-type-disabled{pointer-events:none!important;filter:grayscale(1)!important}@media only screen and (max-width:1075px){.game-type{height:35%}.game-type:hover{--hover-scale:1.1;--hover-vs-scale:1.25;--hover-margin:0px}.game-type .cpu,.game-type .player,.game-type .player2{width:max(25%,50px)}}@media only screen and (max-width:800px){#game-choices{flex-direction:column;grid-gap:7.5%;gap:7.5%}#game-choices .game-type{height:30%;width:70%}#game-choices .game-type .cpu,#game-choices .game-type .player,#game-choices .game-type .player2{width:max(25%,50px)}}@media only screen and (max-width:400px){#game-choices .game-type{height:30%;width:max(80%,280px)}}
/*# sourceMappingURL=main.76173ced.chunk.css.map */