@charset "UTF-8";.navbar{width:100%;padding:20px;display:flex;align-items:center;justify-content:space-between}.navbar .logo{display:flex;align-items:center;gap:10px}.navbar .logo span{font-size:20px;font-weight:600}.navbar .logo img{width:50px;height:50px;border-radius:50%;object-fit:cover}.navbar .logo img:hover{cursor:pointer;box-shadow:0 0 10px #fff}.navbar .user{display:flex;align-items:center;gap:5px}.navbar .user span{font-weight:700;gap:20px;margin-right:auto;align-items:center}.navbar .user span :hover{cursor:pointer}.footer{display:flex;align-items:center;justify-content:space-between;padding:30px}.footer span:first-child{font-weight:700}.footer span:last-child{display:flex;align-items:center;gap:10px;font-size:14px}.footer span:hover{cursor:pointer}.playGround{display:flex;flex-direction:column;justify-content:center}.playGround .returnMenu{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:20px}.playGround .returnMenu button{display:flex;margin:10px;padding:10px;border-radius:10px;background:white;border:none;font-size:20px;font-weight:700;cursor:pointer;transition:background-color .5s ease-in-out;transition:color .5s ease-in-out}.playGround .returnMenu button:hover{background-color:#222bc3;color:#fff}.playGround h1{flex-direction:column;margin:20px}.playGround .error-modal{position:relative;background:#384256;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:10px}.playGround .error-modal p{background:#384256;padding:20px;border-radius:10px;font-size:15px;font-weight:700}.playGround .error-modal button{display:flex;margin:10px;padding:10px;border-radius:10px;background:white;border:none;font-size:20px;font-weight:700;cursor:pointer;transition:background-color .5s ease-in-out;transition:color .5s ease-in-out}.playGround .error-modal button:hover{background-color:#222bc3;color:#fff}.playGround .error-modal .tenor-gif-embed{margin:10px}.playGround .winner-announcement{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center}.playGround .winner-announcement p{background:white;padding:20px;border-radius:10px;font-size:15px;font-weight:700}.playGround .winner-announcement button{display:flex;margin:10px;padding:10px;border-radius:10px;background:white;border:none;font-size:20px;font-weight:700;cursor:pointer;transition:background-color .5s ease-in-out;transition:color .5s ease-in-out}.playGround .winner-announcement button:hover{background-color:#222bc3;color:#fff}.playGround .connect-four-board{display:flex;flex-direction:column;justify-content:center;max-width:100%;margin-top:10px}.playGround .connect-four-board .row{display:flex;justify-content:center}.playGround .connect-four-board .slot{border:none;border-radius:50%;margin:5px;max-width:80px;max-height:80px;width:10vw;height:10vw;background-color:#fff;transition:background-color .3s ease-in-out}@media screen and (max-width: 920px){.playGround .connect-four-board .slot .connect-four-board .slot{width:4vw;height:4vw;max-width:20px;max-height:20px}}.playGround .connect-four-board .slot:hover{background-color:gray}.playGround .connect-four-board .slot.red{background-color:red}.playGround .connect-four-board .slot.red:hover{background-color:#8b0000}.playGround .connect-four-board .slot.yellow{background-color:#ff0}.playGround .connect-four-board .slot.yellow:hover{background-color:#b8860b}.gameStats{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:15px}.gameStats .heading{display:flex;flex-direction:row;justify-content:space-between;font-size:15px;font-weight:700;margin-bottom:1rem}.gameStats .actualPlayer{font-weight:700;margin-bottom:50px}.gameStats .actualPlayer h3{display:flex;justify-content:center;color:red}.gameStats .lastSteps{display:flex;flex-direction:column;align-items:center;font-weight:700;margin-bottom:1rem;max-height:20rem;overflow-y:auto}.gameStats .lastSteps::-webkit-scrollbar{width:8px}.gameStats .lastSteps::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.gameStats .lastSteps::-webkit-scrollbar-thumb{background:#888;border-radius:10px}.gameStats .lastSteps::-webkit-scrollbar-thumb:hover{background:#555}.gameStats .lastSteps ul{display:flex;flex-direction:column;padding:20px;border-left:2px solid #384256}.gameStats .lastSteps ul li{justify-content:space-between;width:100%;margin-bottom:.5rem}.gameStats .lastSteps ul li:not(:first-child){animation-delay:.01s}.gameStats .lastSteps ul li.new-entry{animation:fadeIn .5s ease-in-out}.gameStats .lastSteps ul li:last-child{margin-bottom:2px}.game{display:grid;gap:20px;grid-template-columns:repeat(5,1fr);grid-auto-rows:minmax(170px,auto);justify-content:center}.game .box{padding:20px;border-radius:10px;border:1px solid #384256;margin:auto}.game .box:hover{box-shadow:0 0 10px #fff}.game .box1{grid-column:span 2;grid-row:span 4}.game .box2{grid-column:span 3;grid-row:span 4}@media screen and (max-width: 1240px){.game{grid-template-columns:repeat(2,1fr)}.game .box1,.game .box2{grid-column:span 2}.game .box2{grid-row:1/3}}@media screen and (max-width: 480px){.game{grid-template-columns:1fr;padding:10px}.game .box1,.game .box2{grid-column:span 1;grid-row:span 2}.game .box2{grid-row:1/3}}.menu{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%}.menu .menu-title{font-size:30px;font-weight:700;margin-bottom:20px}.menu .menu-buttons{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}@media (max-width: 820px){.menu .menu-buttons{flex-direction:row;justify-content:space-around}}.menu .menu-buttons .menu-button{margin:10px;width:100%;height:50px;border-radius:10px;background-color:#f5f5f5;border:1px solid #e0e0e0;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:700;color:#000;cursor:pointer}.menu .menu-buttons .menu-button:hover{background-color:#e0e0e0}@media (max-width: 820px){.menu .menu-buttons .menu-button{width:auto;padding:0 10px}}.home{display:grid;gap:20px;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(170px,auto);padding:20px}.home .box{border-radius:10px;border:1px solid #384256;grid-column:span 1;grid-row:span 4}.home .box:hover{box-shadow:0 0 10px #fff}.home .box1,.home .box2{grid-column:span 2;grid-row:span 4}@media (max-width: 820px){.home{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(8vw,auto)}.home .box,.home .box1,.home .box2{grid-column:span 2}}@media (max-width: 480px){.home{grid-template-columns:1fr;grid-auto-rows:minmax(12vw,auto)}.home .box,.home .box1,.home .box2{grid-column:span 1}}.newGame{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%}.newGame .heading{display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:700;cursor:pointer}.newGame .input{display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:20px;font-weight:700;cursor:pointer}.newGame .input label{margin-right:10px}.newGame .start button{background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:10px;color:#000;cursor:pointer;font-size:20px;font-weight:700;height:50px;margin-top:20px;width:100%;display:flex;justify-content:center;align-items:center}.newGame .start button:disabled{background-color:#e0e0e0;color:#9e9e9e;cursor:not-allowed}.newGame .start button:hover{background-color:#e0e0e0}.joinGame{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:30px;padding-bottom:20px;height:100%;width:100%}.joinGame .heading{display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:700;cursor:pointer}.joinGame .input{display:flex;flex-direction:column;align-items:center;margin-bottom:1rem}.joinGame button{background-color:#f5f5f5;border:1px solid #e0e0e0;border-radius:10px;color:#000;cursor:pointer;font-size:20px;font-weight:700;height:50px;margin-top:20px;width:100%;padding:0 20px;margin-bottom:1rem}.joinGame button:disabled{background-color:#e0e0e0;color:#9e9e9e;cursor:not-allowed}.joinGame .joinGame__error{color:red;font-size:1rem}.scoreBoard{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:20px 0 0}.scoreBoard .scores{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:20px;width:100%;max-width:800px;margin:0 auto}.scoreBoard .scores .score{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;margin:10px;border-radius:10px;border:1px solid #384256}.scoreBoard .scores .score:hover{box-shadow:0 0 10px #fff}.about{background-color:#f5f5f5;height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.about .about-section{font-family:Arial,sans-serif;max-width:800px;margin:auto;padding:20px}.about .about-section h2{color:#333;margin-bottom:10px}.about .about-section p{color:#555;line-height:1.6;margin-bottom:20px}*{margin:0;padding:0;box-sizing:border-box}a{text-decoration:none;color:inherit}.main{display:flex;flex-direction:column;min-height:100vh;font-family:Inter,sans-serif;background-color:#191919;color:#fff}.container{display:flex;flex:1;overflow:hidden}@media (max-width: 820px){.container{flex-direction:column;align-items:center}}.menuContainer{width:250px;padding:5px 20px;border-right:2px solid #384256}@media (max-width: 820px){.menuContainer{width:20%;border-right:none;border-bottom:2px solid #384256}}.contentContainer{margin:auto;padding:5px 20px;width:100%;flex-grow:1;overflow:auto}@media (max-width: 820px){.contentContainer{width:100%}}