:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.App{text-align:center}a{color:#fff}.game-button{position:relative;top:0;cursor:pointer;text-decoration:none!important;outline:none!important;font-family:Carter One,sans-serif;font-size:15px;line-height:1.5em;letter-spacing:.1em;text-shadow:2px 2px 1px #0066a2,-2px 2px 1px #0066a2,2px -2px 1px #0066a2,-2px -2px 1px #0066a2,0px 2px 1px #0066a2,0px -2px 1px #0066a2,0px 4px 1px #004a87,2px 4px 1px #004a87,-2px 4px 1px #004a87;border:none;margin:15px 15px 30px;background:repeating-linear-gradient(45deg,#3ebbf7,#3ebbf7 5px,#45b1f4 5px,#45b1f4 10px);border-bottom:3px solid rgba(16,91,146,.5);border-top:3px solid rgba(255,255,255,.3);color:#fff!important;border-radius:8px;padding:8px 15px 10px;box-shadow:0 6px #266b91,0 8px 1px 1px #0000004d,0 10px 0 5px #12517d,0 12px 0 5px #1a6b9a,0 15px 0 5px #0c405e,0 15px 1px 6px #0000004d}.Homepage{background-image:url(../Landing-Page.gif);background-size:cover;margin:0;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center}.homepage-menu{position:relative;top:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.homepage-menu img{margin-bottom:30px;width:200px}.main{display:flex;flex-direction:column;justify-content:center;align-items:center}.play-button{font-size:2rem;border:solid rgb(255,221,0) 3px;background:#fa0;color:#fff;padding:.5rem 2rem;margin-bottom:1rem;cursor:pointer;transition:background-color .3s ease,transform .3s ease}.play-button:hover{background-color:#ff8c00;transform:scale(1.05)}.player{font-size:2rem;margin-bottom:20px}.playerno{display:flex;align-items:center;justify-content:center;margin-bottom:20px}.playerno select{font-size:1.5rem;padding:10px;border-radius:5px;border:2px solid #ccc;background-color:#fff;cursor:pointer;width:150px;transition:background-color .3s ease}.playerno select:focus{border-color:#f60;background-color:#fffbe6}.multiplayer{display:flex;justify-content:center;align-items:center;flex-direction:column}.multi{margin-bottom:20px}.input{margin-right:5px;font-size:1.5rem;padding:.5rem;width:250px;margin-bottom:20px;border-radius:5px;border:2px solid #ccc;background-color:#fff;transition:border-color .3s ease,background-color .3s ease}.input:focus{border-color:#f60;background-color:#fffbe6}.homepage-create,.homepage-join-button{display:flex;justify-content:center;margin-top:20px}.homepage-join>button{font-size:1.5rem;margin-top:10px;padding:.5rem 2rem;border-radius:5px;background-color:#f60;color:#fff;cursor:pointer;transition:background-color .3s ease}.homepage-join>button:hover{background-color:#e65c00}@media (max-width: 768px){.play-button{font-size:1.5rem;padding:.5rem 1.5rem}.input{width:80%}.homepage-menu img{width:150px}}.Game{background-size:cover;margin:0;width:100vw;height:100vh;z-index:0}.backgroundColorR{background-image:url(../backgrounds/bgR.png)}.backgroundColorG{background-image:url(../backgrounds/bgG.png)}.backgroundColorB{background-image:url(../backgrounds/bgB.png)}.backgroundColorY{background-image:url(../backgrounds/bgY.png)}.gameover{position:absolute;width:100vw;top:0;height:100vh;background-image:url(../W9k1.gif);color:#fff}.gameover h1{margin-top:10rem}.gameover h2{color:#fff;margin-bottom:1rem}.turn{position:relative;top:10%;left:20%;font-size:2rem;color:#fff;width:140px;height:50px}.selectingcolor{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;height:100vh;background-color:#000c;z-index:100;padding:0;margin:0;position:fixed;top:0;left:0}.selectingcolortext{font-size:2em;font-weight:700;color:#fff;margin-bottom:20px}.selectingcolorbtn{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;align-items:center;justify-items:center}.selectingcolorbtn button{width:20vw;height:20vw;max-width:120px;max-height:120px;border:none;cursor:pointer;transition:transform .2s ease;box-shadow:0 4px 8px #0000004d}.selectingcolorbtn button:hover{transform:scale(1.15)}.selectingcolorbtn .r{background-color:#ff4c4c}.selectingcolorbtn .b{background-color:#4c6eff}.selectingcolorbtn .g{background-color:#4cff6e}.selectingcolorbtn .y{background-color:#fff54c}.Card{width:6rem;margin:-15px;cursor:pointer;transition:transform .3s ease,z-index 0s;z-index:1}.up{margin-bottom:2rem}.Card:hover{transform:scale(1.2);z-index:10}.topInfo{display:flex;flex-direction:row;justify-content:space-between;padding:0 60px;height:100px}.topInfo>img{width:7%;margin:0;padding:0}.topInfo>h1{margin-top:10px;font-size:1.8rem;padding-top:2%}.topInfoText{font-size:2rem;margin:0}.playerDeck>img{transition:transform .35s}.playerDeck>img:hover{transform:scale(1.08);opacity:1}.player1Deck{display:flex;flex-direction:row;align-items:center;justify-content:center;position:absolute;bottom:10%;left:50%;transform:translate(-50%)}.player2Deck{display:flex;flex-direction:row;align-items:center;justify-content:center;position:absolute;top:10%;left:50%;transform:translate(-50%)}.player3Deck{display:flex;flex-direction:column;align-items:center;position:absolute;right:5%;top:50%;transform:translateY(-50%)}.player4Deck{display:flex;flex-direction:column;align-items:center;position:absolute;left:5%;top:50%;transform:translateY(-50%)}.playerDeckText{font-size:2rem;margin:0 20px;color:#fff}.middleInfo{display:flex;flex-direction:row;justify-content:center;position:absolute;top:40%;left:40%}.middleInfo img{margin:2rem}.middleInfo>button{align-self:center}.game-button{position:relative;top:0;cursor:pointer;text-decoration:none!important;outline:none!important;font-family:Carter One,sans-serif;font-size:15px;line-height:1.5em;letter-spacing:.1em;text-shadow:2px 2px 1px #0066a2,-2px 2px 1px #0066a2,2px -2px 1px #0066a2,-2px -2px 1px #0066a2,0px 2px 1px #0066a2,0px -2px 1px #0066a2,0px 4px 1px #004a87,2px 4px 1px #004a87,-2px 4px 1px #004a87;border:none;margin:15px 3rem 30px;background:repeating-linear-gradient(45deg,#3ebbf7,#3ebbf7 5px,#45b1f4 5px,#45b1f4 10px);border-bottom:3px solid rgba(16,91,146,.5);border-top:3px solid rgba(255,255,255,.3);color:#fff!important;border-radius:8px;padding:8px 15px 10px;box-shadow:0 6px #266b91,0 8px 1px 1px #0000004d,0 10px 0 5px #12517d,0 12px 0 5px #1a6b9a,0 15px 0 5px #0c405e,0 15px 1px 6px #0000004d}.game-button:hover{top:2px;box-shadow:0 4px #266b91,0 6px 1px 1px #0000004d,0 8px 0 5px #12517d,0 10px 0 5px #1a6b9a,0 13px 0 5px #0c405e,0 13px 1px 6px #0000004d}.game-button:before{content:"";height:10%;position:absolute;width:40%;background:#fff;right:13%;top:-3%;border-radius:99px}.game-button:after{content:"";height:10%;position:absolute;width:5%;background:#fff;right:5%;top:-3%;border-radius:99px}.game-button.orange{background:repeating-linear-gradient(45deg,#ffc800,#ffc800 5px,#ffc200 5px,#ffc200 10px);box-shadow:0 6px #b76113,0 8px 1px 1px #0000004d,0 10px 0 5px #75421f,0 12px 0 5px #8a542b,0 15px 0 5px #593116,0 15px 1px 6px #0000004d;border-bottom:3px solid rgba(205,102,0,.5);text-shadow:2px 2px 1px #e78700,-2px 2px 1px #e78700,2px -2px 1px #e78700,-2px -2px 1px #e78700,0px 2px 1px #e78700,0px -2px 1px #e78700,0px 4px 1px #c96100,2px 4px 1px #c96100,-2px 4px 1px #c96100}.game-button.orange:hover{top:2px;box-shadow:0 4px #b76113,0 6px 1px 1px #0000004d,0 8px 0 5px #75421f,0 10px 0 5px #8a542b,0 13px 0 5px #593116,0 13px 1px 6px #0000004d}.game-button.red{background:repeating-linear-gradient(45deg,#ff4f4c,#ff4f4c 5px,#ff4643 5px,#ff4643 10px);box-shadow:0 6px #ae2725,0 8px 1px 1px #0000004d,0 10px 0 5px #831614,0 12px 0 5px #a33634,0 15px 0 5px #631716,0 15px 1px 6px #0000004d;border-bottom:3px solid rgba(160,25,23,.5);text-shadow:2px 2px 1px #d72d21,-2px 2px 1px #d72d21,2px -2px 1px #d72d21,-2px -2px 1px #d72d21,0px 2px 1px #d72d21,0px -2px 1px #d72d21,0px 4px 1px #930704,2px 4px 1px #930704,-2px 4px 1px #930704}.game-button.red:hover{top:2px;box-shadow:0 4px #ae2725,0 6px 1px 1px #0000004d,0 8px 0 5px #831614,0 10px 0 5px #a33634,0 13px 0 5px #631716,0 13px 1px 6px #0000004d}.game-button.green{background:repeating-linear-gradient(45deg,#54d440,#54d440 5px,#52cc3f 5px,#52cc3f 10px);box-shadow:0 6px #348628,0 8px 1px 1px #0000004d,0 10px 0 5px #2a6d20,0 12px 0 5px #39822e,0 15px 0 5px #1d4c16,0 15px 1px 6px #0000004d;border-bottom:3px solid rgba(40,117,29,.5);text-shadow:2px 2px 1px #348628,-2px 2px 1px #348628,2px -2px 1px #348628,-2px -2px 1px #348628,0px 2px 1px #348628,0px -2px 1px #348628,0px 4px 1px #1d4c16,2px 4px 1px #1d4c16,-2px 4px 1px #1d4c16}.game-button.green:hover{top:2px;box-shadow:0 4px #348628,0 6px 1px 1px #0000004d,0 8px 0 5px #2a6d20,0 10px 0 5px #39822e,0 13px 0 5px #1d4c16,0 13px 1px 6px #0000004d}.loader,.loader:before,.loader:after{border-radius:50%;width:2.5em;height:2.5em;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:load7 1.8s infinite ease-in-out;animation:load7 1.8s infinite ease-in-out}.loader{color:#fff;font-size:5px;margin:0 50px;position:relative;text-indent:-9999em;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.loader:before,.loader:after{content:"";position:absolute;top:0}.loader:before{left:-3.5em;-webkit-animation-delay:-.32s;animation-delay:-.32s}.loader:after{left:3.5em}.notification{position:fixed;top:20px;left:50%;transform:translate(-50%);background-color:#000c;color:#000;padding:10px 20px;border-radius:5px;box-shadow:0 4px 8px #0000004d;font-size:1rem;font-weight:500;z-index:1000;transition:opacity .3s ease;opacity:1}.notification-exit{opacity:0}.red{background-color:#fa7b7b}.green{background-color:#c8f8c8}.rules-container{width:100vw;font-family:Arial,sans-serif;background-color:#f5f5f5;border-radius:8px;box-shadow:0 4px 8px #0000001a;padding:20px 20px 20px 5%;font-size:1rem}.title{text-align:center;color:#333;font-size:3rem}.section{margin-bottom:20px;justify-content:center;text-align:left}h2{color:#444;font-size:1.5rem;margin-bottom:10px}ul{padding-left:20px}ul li{margin-bottom:8px}ul li strong{color:#2a7df0}p{line-height:1.6;color:#555}.multiGame{background-size:cover;margin:0;width:100vw;height:100vh;color:#f0f8ff}.backgroundColorR{background-image:url(../backgrounds/bgR.png)}.backgroundColorG{background-image:url(../backgrounds/bgG.png)}.backgroundColorB{background-image:url(../backgrounds/bgB.png)}.backgroundColorY{background-image:url(../backgrounds/bgY.png)}.multiCard{width:5.5rem;cursor:pointer;margin:-15px;transition:transform .3s ease,z-index 0s;z-index:1}.multiCard:hover{transform:scale(1.2);z-index:10}.topInfo{color:#f0f8ff;display:flex;flex-direction:row;justify-content:space-between;padding:0 60px;height:100px}.multitopInfo>img{width:7%;margin:0;padding:0}.multitopInfo>h1{margin-top:1rem;font-size:1.8rem;padding-top:2%}.multitopInfoText{font-size:2rem;margin:0}.multiplayer1Deck{width:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;margin-bottom:0}.multiplayer1Deck>img{transition:transform .35s}.multiplayer1Deck>img:hover{transform:scale(1.08);opacity:1}.multiplayer2Deck{width:100%;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;margin:0rem}.multiplayer2Deck>img{transition:transform .35s}.multiplayer2Deck>img:hover{transform:scale(1.08);opacity:1}.multiplayerDeckText{color:#f0f8ff;font-size:1.5rem;margin:0 20px}.multimiddleInfo{display:flex;flex-direction:row;justify-content:space-around;margin:5rem 0rem}.multiMiddleInfo>button{align-self:center}.multiLoader,.multiLoader:before,.multiLoader:after{border-radius:50%;width:2.5em;height:2.5em;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:load7 1.8s infinite ease-in-out;animation:load7 1.8s infinite ease-in-out}.multiLoader{color:#fff;font-size:5px;margin:0 50px;position:relative;text-indent:-9999em;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}.multiLoader:before,.multiLoader:after{content:"";position:absolute;top:0}.multiLoader:before{left:-3.5em;-webkit-animation-delay:-.32s;animation-delay:-.32s}.multiLoader:after{left:3.5em}.multiend{margin:0}@-webkit-keyframes load7{0%,80%,to{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em}}@keyframes load7{0%,80%,to{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em}}.chat-box{position:absolute;bottom:0;background:#fff;width:355px;border-radius:5px 5px 0 0;z-index:100;left:20px}.chat-box-player1{right:20px}.chat-box-player2{left:20px}.chat-head{width:inherit;height:auto;background:#2c3e50;border-radius:5px 5px 0 0;color:#1e8e11}.chat-head h2{color:#fff;display:inline-block}.chat-head span{cursor:pointer;float:right;width:25px;margin:10px}.chat-body{display:none;height:205px;width:inherit;overflow:hidden auto;margin-bottom:45px}.chat-text{position:fixed;bottom:0;height:45px;width:inherit}.chat-text input{width:inherit;height:inherit;box-sizing:border-box;border:1px solid #bdc3c7;padding:10px;resize:none;outline:none}.chat-text input:active,.chat-text input:focus,.chat-text input:hover{border-color:#4169e1}.msg-send{background:#406a4b}.msg-receive{background:#595080}.msg-send,.msg-receive{width:285px;height:35px;padding:5px 5px 5px 10px;margin:5px auto;border-radius:3px;line-height:30px;position:relative;color:#fff}.msg-receive:before{content:"";width:0px;height:0px;position:absolute;border:15px solid;border-color:transparent #595080 transparent transparent;left:-29px;top:7px}.msg-send:after{content:"";width:0px;height:0px;position:absolute;border:15px solid;border-color:transparent transparent transparent #406a4b;right:-29px;top:7px}.msg-receive:hover,.msg-send:hover{opacity:.9}