:root{--mujaffa-blaa: #34ffff;--mujaffa-bakgrunn-mork: #333366;--mujaffa-skrift-mork: #000032;--mujaffa-modal-bakgrunn: #006699}html,body{height:100%;width:100%;margin:0;display:flex;justify-content:center;align-items:center;background-color:#000;overflow-y:hidden}#root{height:100%;width:100%;justify-content:center;align-items:center;box-sizing:border-box;display:grid;grid-template-columns:1fr minmax(0,calc(100vh - 1px)) 1fr;grid-template-rows:100vh;height:100vh}#app{width:100%}#player-container{grid-column:2;grid-row:1;height:100%;width:100%;display:block;position:relative}#player-container>*{position:relative;height:100%;width:100%}.info-container-shown #player{width:calc(100% - 300px)}table,td{border:1px solid}table{width:100%;border-collapse:collapse}th{background-color:#09c}#test-button{position:absolute;top:0;left:0;width:150px;height:35px;background-color:#0000;border:none;z-index:9999;display:block;border:solid red;color:#fff;cursor:pointer}#test-button2{position:absolute;top:10%;left:0;width:150px;height:35px;background-color:#fff;border:2px solid white;z-index:9999;display:block;border:solid black;cursor:pointer}#overlay-button{position:absolute;top:96%;left:2.5%;transform:translateY(-45%);width:20%;height:4%;z-index:9999;display:none;background-color:#0000;cursor:pointer;border:none}#play-again-overlay{position:absolute;top:96%;left:80%;transform:translateY(-45%);width:20%;height:5%;z-index:9999;display:none;background-color:#0000;cursor:pointer;border:none}#myModal{display:none;position:fixed;z-index:10000;left:0;top:0;width:100%;height:100%;overflow:hidden;overflow-y:hidden;background-color:#000;background-color:#0006}#modal-content{background-color:var(--mujaffa-modal-bakgrunn);position:static;left:20%;margin:1rem auto;padding:20px;border:3px solid #000;width:80%;border-radius:30px;box-shadow:10px 5px 5px;font-family:sans-serif;font-size:x-large}#my-score-modal{display:none;position:fixed;z-index:10000;left:0;top:0;width:100%;height:100%;overflow:hidden;overflow-y:hidden;background-color:#000;background-color:#0006}#myModal table th,#myModal table td{text-align:center}#myModal table th:nth-child(1),#myModal table td:nth-child(1){width:5%}#myModal table th:nth-child(2),#myModal table td:nth-child(2){width:35%}#myModal table th:nth-child(n+3),#myModal table td:nth-child(n+3){width:20%}#close{color:#aaa;float:right;font-size:28px;font-weight:700}#close:hover,#close:focus{color:#000;text-decoration:none;cursor:pointer}.scoreboard-text{position:absolute;color:#34ffff;width:100%;text-align:center;transform:translateY(-50%);margin:10px 0}.keys{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center}.first-row{display:flex;justify-content:center}.midle-row{display:flex;justify-content:space-between}.last-row{display:flex;justify-content:center}.arr{cursor:pointer;width:80px;height:80px;border-radius:50%;background:gray;display:inline-block;margin:5px;transition:all .05s linear;-webkit-user-select:none;user-select:none}.arr:hover{box-shadow:0 0 20px 20px #000}.arr div{position:absolute;height:30px;width:30px;border-top:8px solid #202020;border-left:8px solid #202020;transform:rotate(45deg);left:21px;top:28px}.up{transform:rotate(0)}.right{transform:rotate(90deg)}.left{transform:rotate(-90deg)}.down{transform:rotate(180deg)}.buttons{width:100%;height:100%;display:flex;justify-content:center;align-items:center;margin-bottom:100px}.button{cursor:pointer;width:80px;height:80px;border-radius:50%;background:gray;display:inline-block;margin:5px 5px 0;transition:all .05s linear;-webkit-user-select:none;user-select:none}.X-button{display:flex;justify-content:center;align-items:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:xx-large;font-size:3em;font-weight:700;margin-bottom:50px}.Z-button{display:flex;justify-content:center;align-items:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:xx-large;font-size:3em;font-weight:700;margin-top:50px}.keys,.buttons{display:none}@media only screen and (max-width: 768px){.arr{width:80px;height:80px;margin:10px 30px 0 0}.button{width:80px;height:80px}.X-button{font-size:3em}.arr div{position:absolute;height:25px;width:25px;border-top:8px solid #202020;border-left:8px solid #202020;transform:rotate(45deg);left:24px;top:30px}}@media only screen and (max-width: 400px){.arr{width:65px;height:65px;margin:10px 30px 0 0}.button{width:60px;height:60px}.X-button{font-size:3em}.arr div{position:absolute;height:20px;width:20px;border-top:8px solid #202020;border-left:8px solid #202020;transform:rotate(45deg);left:19px;top:22px}.midle-row{display:flex;justify-content:space-around}}@media (pointer: coarse){@media (orientation: portrait){#root{grid-template-columns:1fr 1fr 1fr;grid-template-rows:60% 40%}#player-container{grid-column:1 / 4;grid-row:1}.keys{grid-column:1 / 3;grid-row:2;display:block}.buttons{grid-column:3;grid-row:2;display:flex}}@media (orientation: landscape){.keys{order:1;display:flex;float:left}#player-container{order:2;float:left}.buttons{order:3;display:flex;float:right}@media only screen and (max-width: 750px){.arr{width:60px;height:60px;margin:0}.arr div{position:absolute;height:20px;width:20px;border-top:8px solid #202020;border-left:8px solid #202020;transform:rotate(45deg);left:16px;top:20px}.button{width:60px;height:60px}.X-button{font-size:3em}}}}