:root{--height-header: 60px;--max-width-left: 220px;--width-left-st: 70px;--width-left-nd: 100px;--width-left-rd: 100px;--width-left-th: 100px;--max-width-right: 400px;--width-right-st: 200px;--width-right-nd: 100px;--width-right-rd: 100px;--width-right-th: 100px}html,body{position:relative;margin:0;width:100%;height:100%;background-color:#000;color:#fff;font-family:Roboto,sans-serif;overflow-x:hidden}*,*:before,*:after{box-sizing:border-box}header{width:100%;position:fixed;height:var(--height-header);display:flex;flex-direction:row;text-align:center;justify-content:center;align-items:center;background-color:#494949;z-index:10;.menu-nav{cursor:pointer;width:50px;height:50px;img{width:40px;height:40px;margin:5px 0 0 10px;background-color:#6d6d6d;border:1px solid black;border-radius:5px}}a{margin-left:20px;img{height:60px;width:auto;padding:2px}}.none{flex:1}ul{display:flex;flex-direction:row;list-style:none;margin:0;padding:0}ul li{margin:0 10px}button{cursor:pointer;padding:6px 24px;font-size:22px;margin-right:20px;border-radius:10px;border:0px;background-color:#b7faff}button:hover{background-color:#a3d2ff;color:#000102}}.ul-nav{list-style:none;padding:20px 0 0;margin:0;width:100%;background-color:#000;display:flex;flex-direction:column;height:100%;border-right:1px solid white;overflow:hidden;transition:width .3s ease;li{margin-top:5px;a{padding:0 0 0 10px;display:flex;text-align:left;align-items:center;position:relative;cursor:pointer;text-decoration:none;.icon{border-radius:10px;width:50px;height:50px}span{height:max-content;flex:1;color:#fff;transition:transform .3s ease;padding-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:8px}&:hover span{transform:translate(10px)}}div{padding:0 0 0 10px;border-left:5px solid rgb(94,255,0);display:flex;text-align:left;align-items:center;position:relative;cursor:pointer;text-decoration:none;.icon{border-radius:10px;width:50px}span{height:max-content;flex:1;color:#fff;transition:transform .3s ease;padding-left:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}}}@media (max-width: 1600px){.ul-nav:hover{width:var(--max-width-left)}.ul-nav:hover+footer{width:var(--max-width-left)}}@media (max-width: 500px){.ul-nav:hover{width:100%}.ul-nav:hover+footer{width:100%}}.footer-mini{position:absolute;bottom:0;background-color:#333;color:#fff;text-align:center;padding:5px 0;width:calc(100% - 1px);transition:width .3s ease}.footer-full{margin:20px 10px;.container-top{display:flex;flex-direction:row;.about{flex:1;margin-right:5%;p{color:#8d8d8d;text-align:justify}}.other{flex:1;display:flex;div{flex:1;ul{padding:0;list-style:none;li{a{color:#8d8d8d;text-decoration:none}a:hover{color:#d1d1d1}}}}}}.container-bottom{display:flex;position:relative;margin-top:10px;div{flex:1}.copyright{p{color:#8d8d8d}}.contact{display:flex;flex-direction:row;justify-content:flex-end;a{img{width:32px;height:32px;padding:4px;background-color:#fff;margin:4px;border-radius:6px}}}}.container-bottom:before{position:absolute;top:0;left:0;content:"";display:block;width:100%;height:1px;background-color:#8d8d8d;margin-top:-10px}}@media (max-width: 900px){.footer-full{.container-top{flex-direction:column;.about{margin:0}}}}@media (max-width: 500px){.footer-full{.container-bottom{flex-direction:column;.contact{justify-content:center}}}}.title-aside{display:block;width:100%;text-align:center;padding:5px 0 20px;font-size:30px;cursor:pointer}.title-aside:hover{color:#0ff}.aside{list-style-type:none;width:calc(var(--max-width-right));margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:7px;padding:0 5px 0 0;li{width:100%;position:relative;aspect-ratio:16 / 9;display:block;img{position:absolute;width:100%;height:100%;border-radius:8px}spam{position:absolute;display:none;top:50%;left:50%;transform:translate(-50%,-50%);width:max-content;color:#000;z-index:2;background-color:#fff;border:1px dashed black;padding:4px 7px;border-radius:4px}video{display:none;position:absolute;width:100%;height:100%;object-fit:cover;border-radius:8px;border:1px solid rgb(0,255,213)}&:hover{img{display:none}spam{display:block}video{display:block}}}li:nth-child(n+15){display:none}}@media (max-width: 1500px){.aside{grid-template-columns:repeat(1,1fr);width:calc(var(--width-right-st));li:nth-child(n+8){display:none}}.title-aside{font-size:24px}}@media (max-width: 1200px){.title-aside{text-align:left;justify-items:center;margin-left:20px;font-size:26px}.title-aside:hover{color:#fff}.aside{width:100%;padding:0;grid-template-columns:repeat(4,1fr);li:nth-child(n+8){display:block}li:nth-child(n+13){display:none}}}@media (max-width: 900px){.title-aside{font-size:22px}.aside{grid-template-columns:repeat(3,1fr)}}@media (max-width: 600px){.title-aside{font-size:18px}.aside{grid-template-columns:repeat(2,1fr);li:nth-child(n+7){display:none}}}.main-layout{position:relative;top:calc(var(--height-header) + 20px);display:flex;.main-game{flex:1;margin-left:calc(5px + var(--max-width-left));margin-right:calc(var(--max-width-right) + 5px);transition:margin-left .3s ease-in-out}nav{position:fixed;width:var(--max-width-left);height:calc(100% - var(--height-header));margin-top:-20px;z-index:5;transition:transform .3s ease-in-out}aside{position:fixed;right:15px;top:calc(var(--height-header) + 20px);height:calc(100% - var(--height-header) - 20px)}}@media (max-width: 1600px){.main-layout{.main-game{margin-left:calc(5px + var(--width-left-st))}nav{width:var(--width-left-st)}}}@media (max-width: 1500px){.main-layout{.main-game{margin-right:calc(var(--width-right-st) + 5px)}}}@media (max-width: 1200px){.main-layout{.main-game{margin-right:5px}aside{display:none}}}@media (max-width: 500px){.main-layout{.main-game{margin-left:5px}nav{display:none;width:100%}}}.iframe-box{width:100%;.main-iframe{position:relative;width:calc(100% - 2px);aspect-ratio:16 / 9;div{width:100%;height:100%;position:absolute;cursor:pointer;display:flex;justify-content:center;align-items:center;flex-direction:column;div{z-index:1;position:absolute;top:1px;left:1px;width:calc(100% - 2px);height:calc(100% - 6px);background-color:#000000b3}video{position:absolute;top:1px;left:1px;width:calc(100% - 1px);height:calc(100% - 6px);filter:blur(5px)}img{width:20%;z-index:2;border-radius:10px}h2{margin:1%;z-index:2}button{background-color:#26292e;z-index:2;color:#fff;border:none;padding:1.5% 2%;border-radius:5px;font-size:1.2rem;cursor:pointer;transition:background-color .3s ease,color .3s ease,padding .3s ease,font-size .3s ease}button:hover{background-color:#2b2b2b;color:#fff;padding:1.7% 2.2%;font-size:1.4rem}}iframe{width:100%;height:100%;border:1px solid #ffffff}}.control{display:flex;align-items:center;justify-content:space-between;background-color:#26292e;padding:10px;.title{display:flex;align-items:center;width:max-content;img{width:30px;height:30px;margin:0 10px;border-radius:8px}}.buttons{position:relative;display:flex;align-items:center;svg{cursor:pointer}.text-help{width:300px;height:180px;position:absolute;right:20px;bottom:calc(30px + 100%);background-color:#26292e;border-radius:5px;padding:10px;display:none;z-index:5;button{position:absolute;top:10px;right:inherit;background-color:#4e4e4e;color:silver;border:1px solid rgb(255,255,255);border-radius:2px;cursor:pointer}ul{height:100px;list-style:none;padding:0 20px;overflow-y:auto;&::-webkit-scrollbar{width:2px}&::-webkit-scrollbar-thumb{background-color:#585858;border-radius:10px}&::-webkit-scrollbar-track{background-color:#f1f1f1;border-radius:10px}li{text-align:justify;margin:5px 0}}}.hover-controls{position:absolute;display:none;right:20px;width:max-content;bottom:calc(10px + 100%);background-color:#1f1f1f;border-radius:5px;padding:10px 15px;z-index:5;ul{list-style:none;li{margin:5px 0}}}.help{height:30px;width:30px;fill:#fff}.help-click{height:30px;width:30px;path{fill:#b30000}}.help:hover path{fill:#7e7e7e}.active-help{display:block}.help:hover~.hover-controls{display:block}.full-screen{height:30px;width:30px;fill:#727272;margin-left:10px}.active-full{fill:#fff}.active-full:hover{fill:#7e7e7e}}}}@media (max-width: 600px){h2{font-size:1rem}h1{font-size:1.8rem}}@media (max-width: 400px){h2{font-size:.8rem}h1{font-size:1.5rem}}.aside-main{display:none}@media (max-width: 1200px){.aside-main{display:block;background-color:#202020;padding:10px 20px 20px 10px;border:1px solid rgb(255,255,255);border-radius:10px}}.info-game{display:block;width:100%;background-color:#202020;padding:10px 5%;margin:20px 0%;border:1px solid rgb(255,255,255);border-radius:10px;.game-info{margin-top:10px;margin-left:3%;border-collapse:collapse;width:100%;tr{th,td{padding:8px;text-align:left}}}.info-full{list-style-type:none;padding-left:20px;li{div{font-size:22px;font-style:bold}p,video{margin-left:20px}video{margin-top:10px;border-radius:10px;border:1px solid rgb(255,255,255);width:calc(100% - 60px)}}}p{text-align:justify}}@media (max-width: 500px){.info-game{.info-full{padding-left:14px;li{div{font-size:18px}p,video{margin-left:10px}video{width:calc(100% - 44px)}p{font-size:16px}}}}}