*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}:root{--primary: #1900d8;--secondary: #e3170a;--secondary-light: #e4572e;--gold: #fafa03;--black: #080f0f;--grey: #9aa0a8;--select-border: #777;--select-focus: blue;--select-arrow: var(--select-border)}body{min-height:100vh;background:#080045;background:-moz-linear-gradient(top,#1900d8 0%,#080045 100%);background:-webkit-linear-gradient(top,#1900d8 0%,#080045 100%);background:linear-gradient(to bottom,#1900d8,#080045);transform:translateZ(0);backface-visibility:hidden}@supports (-moz-appearance: none){body{background:#080045;background:-moz-linear-gradient(top,#1900d8 0%,#080045 100%);transform:translateZ(0);backface-visibility:hidden}}h1{color:var(--secondary);-webkit-text-stroke:1px black;font-size:128px;font-family:"Press Start 2P",serif;font-weight:400;font-style:normal}h2{font-family:"Press Start 2P",serif;font-weight:400;font-style:normal;font-size:104px}h3{font-family:Roboto,serif;color:#fff;font-weight:700;font-size:32px;margin-bottom:1rem}h4{font-family:Roboto,serif;color:#fff;font-weight:700;font-size:24px}label{font-family:Roboto,serif;color:var(--black);font-weight:900;font-size:24px}p{font-family:Roboto,serif;font-weight:400;font-style:normal;color:#fff;font-size:24px}button{width:341px;height:100px;background-color:var(--secondary);border:5px solid var(--black);font-family:Roboto,serif;font-weight:500;font-size:32px;padding:1rem 2rem;transition:ease-in-out .3s}a{color:var(--black);text-decoration:none}button:hover{background-color:var(--secondary-light);border:6px solid var(--black);cursor:pointer}.container{height:100vh;display:flex;justify-content:center;align-items:center}header{margin-top:80px;margin-bottom:80px;text-align:center}input{background-color:transparent;border:5px solid var(--black);width:735px;height:100px;margin-bottom:28px;padding-left:1rem;font-size:32px;color:#fff}::placeholder{font-size:32px;color:#fff;opacity:.8}.home-section{width:735px;margin:auto;display:flex;flex-direction:column;justify-content:center;align-items:center}section div{width:100%;display:flex;flex-direction:row;justify-content:space-between}.I{position:absolute;top:10%;left:10%}.O{position:absolute;bottom:7%;right:5%}.L{position:absolute;top:57%;right:15%}.S{position:absolute;top:80%;left:6%}.T{position:absolute;top:5%;right:10%}.Z{position:absolute;top:50%;left:15%}img{width:100px}.modal{display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009}.modalContent{background-color:var(--primary);padding:40px;border-radius:4px;position:relative;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}.close{position:absolute;top:10px;right:10px;cursor:pointer;font-size:24px}h2{margin-bottom:2rem}.layer-list{text-align:center}.player-list ul{display:flex;flex-direction:column;gap:32px}.player{display:flex;justify-content:center;align-items:center;border:3px solid var(--black);width:341px;height:100px;margin:auto;list-style-type:none;font-family:Roboto,serif;font-weight:400;font-style:normal;color:var(--black);font-size:24px}.guest{background-color:var(--grey)}.owner{background-color:var(--gold)}.submit-button{margin-top:32px;text-align:center}.game__settings{cursor:pointer;margin-left:1rem;margin-top:1rem}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;padding:.2em 1em .2em 0;margin:0;font-family:inherit;font-size:inherit;cursor:inherit;line-height:inherit;outline:none;width:100%}select::-ms-expand{display:none}.select{width:100%;min-width:15ch;max-width:30ch;border-radius:.25em;font-size:20px;cursor:pointer;line-height:1.1;background-color:var(--primary);display:grid;grid-template-areas:"select";align-items:center;position:relative}select,.select:after{grid-area:select}.select:after{content:"";width:.8em;height:.5em;background-color:var(--select-arrow);clip-path:polygon(100% 0%,0 0%,50% 100%);justify-self:end}select:focus+.focus{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border:2px solid var(--select-focus);border-radius:inherit}.gameView{display:grid;grid-template-columns:45% 100px 1fr;grid-template-rows:50px 1fr 1fr 100px;gap:32px;justify-items:center;align-items:center}.gameBoard{width:310px;height:600px;background-color:#000;grid-column:1 / 2;grid-row:2 / 4;color:#fff;justify-self:end}.gameSideInfos{grid-column:2 / 3;grid-row:2 / 4;justify-self:stretch;justify-content:space-between;white-space:nowrap}.gameSideInfos .nextPieces{width:155px;height:150px;background-color:red;margin-bottom:180px}.gameSideInfos .controls{width:350px;height:300px}.opponentBoards{grid-column:3 / 4;grid-row:2 / 4;overflow-x:scroll}.opponentBoards .opponent{width:160px;height:300px;margin-bottom:128px}#tetris-grid{display:grid;grid-template-columns:repeat(10,30px);grid-template-rows:repeat(20,30px);gap:1px;background-color:#333}.cell{width:30px;height:30px;background-color:var(--black)}#next-piece-grid{display:grid;grid-template-columns:repeat(6,25px);grid-template-rows:repeat(6,25px);gap:1px;background-color:#333}.cell-mini{width:25px;height:25px;background-color:var(--black)}.opponent-grid{display:grid;grid-template-columns:repeat(10,15px);grid-template-rows:repeat(20,15px);gap:1px;background-color:#333}.opponent-cell{width:15px;height:15px;background-color:var(--black)}.yellow{background-color:#fafa03}.green{background-color:#00c900}.red{background-color:#f00000}.purple{background-color:#650065}.orange{background-color:#f0a000}.dark-blue{background-color:#225a8a}.blue{background-color:#0ff}.grey{background-color:#adafb5}.key{width:50px;height:50px;background-color:var(--black)}.top{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-right:1rem;margin-bottom:1rem;gap:1rem}.middle{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem}.bottom{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}.space-bar{width:200px;height:35px;background-color:var(--black);display:flex;justify-content:center}.space-bar .space-key{border-top:5px solid var(--grey);margin-top:10px;width:75px}.triangle-up{width:0;height:0;border-left:12.5px solid transparent;border-right:12.5px solid transparent;border-bottom:25px solid var(--grey);margin:9px auto auto}.triangle-left{width:0;height:0;border-top:12.5px solid transparent;border-right:25px solid var(--grey);border-bottom:12.5px solid transparent;margin:12px auto auto}.triangle-down{width:0;height:0;border-left:12.5px solid transparent;border-right:12.5px solid transparent;border-top:25px solid var(--grey);margin:14px auto auto}.triangle-right{width:0;height:0;border-top:12.5px solid transparent;border-left:25px solid var(--grey);border-bottom:12.5px solid transparent;margin:14px auto auto}