:root{--header_height:5rem;--footer_height:3.5rem;--small-gap:1rem;--normal-gap:2rem;--black:#000;--white:#fff;--lightgray:#dadada;--green:#008a61;--gold:gold;--background_color:#f0f0f0}*,:before,:after{box-sizing:border-box;margin:0;padding:0;font-family:monospace;font-size:1em;text-decoration:none;list-style:none}body{background-color:var(--black);width:100%;height:100dvh}main{width:100%;height:calc(100% - var(--header_height) - var(--footer_height));background-color:var(--background_color);flex-direction:row;justify-content:space-evenly;align-items:center;display:flex}h1{font-size:2.5rem}a:hover{text-decoration:underline}header{width:100%;height:var(--header_height);color:var(--white);background-color:var(--black);flex-direction:row;justify-content:space-between;align-items:center;padding:0 2rem;display:flex}nav{justify-content:center;align-items:center;gap:var(--small-gap);z-index:999;flex-direction:row;display:flex}#logo_container{justify-content:center;align-items:center;gap:var(--normal-gap);flex-direction:row;display:flex}#logo_container img{width:25px;height:25px}#logo_container a{color:var(--white);text-decoration:none}#informations_menu_container{justify-content:center;align-items:center;gap:var(--small-gap);flex-direction:row;display:flex}#informations_menu_container li a{text-transform:uppercase;color:var(--white)}#game_mode_menu_container{background-color:var(--white);border-radius:2rem;flex-direction:row;justify-content:center;align-items:center;padding:.5rem;display:flex}#game_mode_menu_container .game_mode_button input{display:none}#game_mode_menu_container .game_mode_button span{text-transform:uppercase;color:var(--black);cursor:pointer;border-radius:2rem;flex-direction:row;justify-content:center;align-items:center;padding:.5rem 1rem;display:flex}#game_mode_menu_container .game_mode_button span.disabled_button{color:var(--lightgray);cursor:not-allowed}#game_mode_menu_container .game_mode_button input:checked+span{color:var(--white);background-color:var(--black);font-weight:800}#restart_button{cursor:pointer;background-color:#0000;border:none;flex-direction:row;justify-content:center;align-items:center;transition:all .1s ease-in-out;display:flex}#restart_button img{height:2rem}#restart_button:hover{transform:scale(1.1)}#hamburger_icon{cursor:pointer;z-index:9999;width:25px;height:25px;display:none;position:relative}.bar{background-color:var(--white);border-radius:2.5px;width:100%;height:2px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#hamburger_icon .bar:last-child{top:25%}#hamburger_icon .bar:nth-last-child(3){top:75%}#hamburger_icon.active .bar:last-child{top:50%;transform:translate(-50%,-50%)rotate(45deg)}#hamburger_icon.active .bar:nth-last-child(2){opacity:0}#hamburger_icon.active .bar:nth-last-child(3){top:50%;transform:translate(-50%,-50%)rotate(-45deg)}#othello_game_board_border{border:15px solid var(--black);border-radius:10px;box-shadow:25px 25px 35px #00000080}#othello_game_container{position:relative}#othello_game_container:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 25px #000}#game_board_layer{background-color:var(--black);width:100%;height:100%;position:absolute;top:0;left:0}.disc{border-radius:50%;width:65px;height:65px;box-shadow:2.5px 2.5px 5px #00000080}.disc.black{background:radial-gradient(circle at 30% 30%, #333, var(--black) 70%);border:.5px solid #3c3c3c}.disc.white{background:radial-gradient(circle at 30% 30%, var(--white), #ccc 70%);border:1px solid #c9c9c9}.highlighted_disc{outline:2px solid var(--gold)}.score_container{justify-content:center;align-items:center;gap:var(--normal-gap);text-transform:uppercase;flex-direction:column;width:175px;height:250px;display:flex}.score{font-size:5rem;font-weight:900;line-height:1}.lobby-container{width:100%;max-width:800px;margin:0 auto;padding:2rem}.lobby-header{justify-content:space-between;align-items:center;margin-bottom:2rem;display:flex}.lobby-actions{flex-wrap:wrap;gap:1rem;display:flex}.btn{cursor:pointer;text-transform:uppercase;border:none;border-radius:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:700;transition:all .2s}.btn-primary{background-color:var(--green);color:var(--white)}.btn-primary:hover{background-color:#006d4e}.btn-secondary{background-color:var(--white);color:var(--black);border:2px solid var(--black)}.btn-secondary:hover{background-color:var(--lightgray)}.game-list{flex-direction:column;gap:1rem;display:flex}.game-item{background-color:var(--white);border-radius:.5rem;justify-content:space-between;align-items:center;padding:1rem;display:flex;box-shadow:0 2px 4px #0000001a}.room-code{color:var(--green);font-family:monospace;font-size:1.25rem;font-weight:700}.room-code-form{align-items:center;gap:.5rem;display:flex}.room-code-input{text-transform:uppercase;letter-spacing:.25rem;border:2px solid var(--black);text-align:center;border-radius:.5rem;width:10rem;padding:.75rem 1rem;font-family:monospace;font-size:1.25rem}.modal-overlay{z-index:10000;background-color:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content{background-color:var(--white);border-radius:1rem;width:90%;max-width:400px;padding:2rem}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.modal-close{cursor:pointer;background:0 0;border:none;font-size:1.5rem}.form-group{margin-bottom:1rem}.form-group label{margin-bottom:.5rem;font-weight:700;display:block}.form-group input{border:2px solid var(--lightgray);border-radius:.5rem;width:100%;padding:.75rem;font-size:1rem}.form-group input:focus{border-color:var(--green);outline:none}.oauth-buttons{flex-direction:column;gap:.5rem;margin-top:1rem;display:flex}.divider{align-items:center;margin:1.5rem 0;display:flex}.divider:before,.divider:after{content:"";background-color:var(--lightgray);flex:1;height:1px}.divider span{color:var(--lightgray);padding:0 1rem}.game-status{text-align:center;padding:1rem;font-size:1.25rem;font-weight:700}.game-status.waiting{color:var(--gold)}.game-status.your-turn{color:var(--green)}.game-status.opponent-turn{color:var(--lightgray)}footer{width:100%;height:var(--footer_height);color:var(--white);background-color:var(--black);flex-direction:row;justify-content:center;align-items:center;display:flex}@media (width<=1200px){#hamburger_icon{display:block}nav{background-color:#000000e6;flex-direction:column;gap:50px;width:100%;height:100%;transition:all .3s ease-in-out;position:fixed;top:0;left:-100%}@supports (backdrop-filter:blur(5px)){nav{-webkit-backdrop-filter:blur(5px);background-color:#000c}}nav.active{left:0}nav span{display:none}#informations_menu_container{flex-direction:column;gap:50px;font-size:2rem}#game_mode_menu_container{border-radius:0;flex-direction:column;gap:25px;width:100%;font-size:2rem}#restart_button img{width:50px;height:50px}}@media (width<=992px){#othello_game_board_border{border:13px solid var(--black);border-radius:9px;box-shadow:23px 23px 33px #00000080}}@media (width<=768px){main{flex-direction:column}#othello_game_board_border{border:12px solid var(--black);border-radius:8px;box-shadow:21px 21px 30px #00000080}.score_container{flex-direction:row;transform:scale(.8)}}@media (width<=576px){#othello_game_board_border{border:7px solid var(--black);border-radius:6px;box-shadow:15px 15px 22px #00000080}}@media (height<=400px){main{flex-direction:row}nav{gap:5px}#informations_menu_container,#game_mode_menu_container{gap:5px;font-size:1.5rem}#othello_game_board_border{border:5.5px solid var(--black);border-radius:4px;box-shadow:10px 10px 14px #00000080}.score_container{transform:scale(.8)}}