index.css

*{font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#eee;border:none;box-sizing:border-box}#about,#about-page-flex,#code-area,#coding-screen,#contact,#contact div,#explorer,#home,#host-code-area,#host-coding-screen,#host-line-numbers,#host-matches,#host-ranking-screen,#host-waiting-screen,#is-auth,#is-join,#line-numbers,#loader-container,#not-auth,#ranking-screen,#settings,#waiting-screen,.left-container,.right-container,body,html{height:100%}#about,#contact,#home,#host-matches{position:relative}#explorer,#host-waiting-screen,.left-container,.right-container{padding:20px;padding-top:0}#about-page-flex,#contact div,#host-ranking-screen,#loader-container,#not-auth,#ranking-screen,#settings,#waiting-screen{display:flex;align-items:center;justify-content:center}#console,#explorer-bar div,#explorer-bar select,#explorer-bar span,#host-line-numbers,#host-ranking-screen th,#line-numbers,#match-id,#match-id-bar,#output-bar span,#problem,#problem div,#scoreboard th,#test-cases td,.editor-bar span,input,textarea{color:#444}#explorer-bar,#explorer-bar select,#host-ranking-screen thead,#match-id-bar,#new-problem-form tr:not(:first-child) td:first-child,#output,#problem,#scoreboard thead,.editor-area,.editor-bar,input,textarea{background-color:#eee}#back-to-explorer,#cancel-match,#cancel-new-problem,#end-match,#leave-ranking-screen,#new-problem-form td:last-child,#sign-out,#start-match,#submit-new-problem,#table-drop-down,#tutorial,#username,input[type=button],input[type=submit]{background-color:#888;color:#eee}#about-page-logo,#attempts,#match-id,#runtime,#time,label{font-size:40px}#attempts-rank,#completed-count,#people-count,#public-description,#runtime-rank,#time-rank{font-size:12px}#code-area,#console,#host-code-area,#host-line-numbers,#line-numbers,#new-problem-form table input,#test-cases td:not(:last-child){font-family:monospace}#back-to-explorer,#cancel-match,#cancel-new-problem,#console-button,#end-match,#files span,#host-files span,#leave-ranking-screen,#scoreboard tbody tr,#sign-out,#start-match,#submit-new-problem,#table-drop-down div,#test-cases-button,#tutorial,#username,.clickable,input[type=button],input[type=submit]{cursor:pointer}#main{height:calc(100% - 68px);width:100%}body{background-color:#444;margin:0;-ms-overflow-style:none;scrollbar-width:none}body::-webkit-scrollbar{display:none}#header{height:68px;padding:20px}#header-logo{display:inline-block;font-size:24px;letter-spacing:2px}#header-nav{float:right;margin-top:5px}#header-nav span:not(:last-child){margin-right:40px}#contact-form,#reset-password-form,#sign-in-form,#sign-up-form{width:300px}#join-form{width:175px;margin-left:20px}input,textarea{display:block;width:100%;outline:0;padding:10px}::placeholder{color:#888;font-family:Arial,Helvetica,sans-serif}#explorer-bar input:focus::placeholder,#join-form input:focus::placeholder,#reset-password-form input:focus::placeholder{color:transparent}input[type=button],input[type=submit]{width:35%;margin:auto}#join-form input,#reset-password-form input{width:100%;text-align:center}#sign-in-form input[type=submit],#sign-up-form input[type=submit]{float:right}input[type=button]{float:left;text-align:left;padding-left:0;background-color:transparent;color:#888}textarea{resize:none;height:150px}form :not(:last-child){margin-bottom:20px}#join-form :not(:last-child){margin-bottom:10px}label{display:block;text-align:center}#host-ranking-screen,#ranking-screen{justify-content:space-around;text-align:center}#ranking-screen div{width:200px}#cancel-match,#end-match,#leave-ranking-screen,#sign-out,#start-match,#tutorial,#username{position:absolute;bottom:20px;padding:10px}#cancel-match{left:20px}#start-match,#tutorial,#username{right:20px}.left-container{float:left;width:60%;padding-right:10px}.right-container{float:right;width:40%;padding-left:10px}#problem{height:calc(40% - 10px);margin-bottom:20px;overflow:scroll;padding:10px;white-space:pre-wrap}#problem div{text-align:center}#output{height:calc(60% - 10px)}#output-bar,.editor-bar{padding:10px;height:38px}#output-area,.editor-area{height:calc(100% - 38px)}#output-area{overflow:scroll;padding:10px;padding-top:0}#actions{float:right;word-spacing:10px}#files,#host-files{display:inline-block;width:100%;height:18px;white-space:nowrap;overflow:scroll}#files{width:calc(100% - 50px)}#files span,#host-files span,#output-bar span{margin-right:10px;display:inline-block}#host-line-numbers,#line-numbers{float:left;width:39px;text-align:right;color:#888;overflow:hidden;padding-bottom:10px}#code-area,#host-code-area{float:right;width:calc(100% - 39px);tab-size:4;padding:10px;padding-top:0}#test-cases{width:100%;text-align:center;table-layout:fixed;word-wrap:break-word}#test-cases td:last-child{width:20px}#console{white-space:pre}#host-ranking-screen table{width:300px;border-collapse:collapse}#host-ranking-screen thead,#scoreboard thead{position:sticky;position:-webkit-sticky;top:0}#host-ranking-screen th,#scoreboard th{padding:10px}#explorer-area td,#host-ranking-screen td,#scoreboard td{padding-top:20px}.scrollable-table{height:235px;overflow:scroll}#host-waiting-screen{text-align:center}#match-id-bar{padding:10px;height:84px}#name-container{height:calc(100% - 136px);display:flex;flex-wrap:wrap;justify-content:space-around;align-content:flex-start}#name-container div{width:200px;height:min-content;margin-top:10px}#name-container div:hover{text-decoration:line-through}#explorer-bar{padding:0 20px;height:42px}#explorer-bar select{width:135px;outline:0;appearance:none;-moz-appearance:none;-webkit-appearance:none}#explorer-bar div{width:20px;display:inline-block}#explorer-bar input{display:inline;text-align:center;width:calc(100% - 325px)}#explorer-bar span{width:125px;margin-left:25px;display:inline-block;text-align:right}#explorer-area{height:calc(100% - 90px);overflow:scroll}#explorer-area table{width:calc(100% - 40px);margin:20px;text-align:left;border-spacing:5px 0}#explorer-area td:last-child{position:relative;top:-5px;text-align:right}#explorer-area td:last-child span{font-weight:900}#host-container{height:calc(100% - 58px);margin-bottom:20px;overflow:scroll}#scoreboard{width:100%;border-collapse:collapse;text-align:center}#host-coding-screen .right-container div:not([id]){text-align:center}#back-to-explorer,#cancel-new-problem,#submit-new-problem{display:inline-block;height:38px;padding:10px}#cancel-new-problem{float:left}#submit-new-problem{float:right}#new-problem-form table{width:100%;border-spacing:0 10px;margin-top:-10px;margin-bottom:10px}#new-problem-form table tr:first-child td:first-child{padding-top:10px;font-size:24px}#new-problem-form table input{margin:0}#new-problem-form td:last-child{width:40px;text-align:center;font-weight:900}#public-label{text-align:left;display:inline-block;height:32px}#new-problem-form input[type=checkbox]{display:inline;width:auto;position:relative;top:-8px}#loader-container,#settings{background-color:rgba(0,0,0,.5);width:100%;position:fixed;top:0}#loader{border:2px solid #888;border-top-color:#eee;border-radius:50%;width:20px;height:20px;animation:spin 1s linear infinite}#table-drop-down{text-align:right;padding:10px;position:absolute}#table-drop-down div:not(:last-child){margin-bottom:5px}#about-page-container{text-align:center;width:50%}#about-page-logo{padding:20px}#tree{position:absolute;bottom:0;z-index:-1}a{text-decoration:none}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes leftIn{0%{right:100vw;opacity:0}100%{right:0;opacity:1}}@keyframes leftOut{0%{right:0;opacity:1}100%{right:100vw;opacity:0}}@keyframes rightIn{0%{left:100vw;opacity:0}100%{left:0;opacity:1}}@keyframes rightOut{0%{left:0;opacity:1}100%{left:100vw;opacity:0}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@media (max-width:670px){#header-logo{display:block;text-align:center}#header{padding:5px;height:55px}#main{height:calc(100% - 55px)}#header-nav span:not(:last-child){margin-right:10px}#header-nav{width:100%;text-align:center;white-space:nowrap;overflow:scroll;margin-top:0}#ranking-screen{flex-direction:column;height:calc(100% - 58px)}#join-form{margin:auto}#tutorial{right:50%;transform:translate(50%)}#about-page-container{width:100%;padding:10px}}@media (max-width:950px){#host-ranking-screen{flex-direction:column;height:calc(100% - 90px);overflow:scroll;justify-content:start}.scrollable-table{margin-top:20px;flex-shrink:0;height:auto}#host-ranking-screen div:first-child{margin-top:0}#main{overflow:scroll}}@media (max-width:500px){#explorer{padding:5px;padding-top:0}#explorer-bar{padding:10px}#explorer-bar span{margin-left:calc(100% - 295px)}#explorer-bar input{display:none}#explorer-area table{margin:10px;width:calc(100% - 20px)}}@media (max-width:780px){#coding-screen,#host-coding-screen{display:flex;flex-direction:column}#coding-screen{overflow-y:scroll}.left-container{order:2}.right-container{order:1}.left-container,.right-container{width:100%;padding:5px;padding-top:0}#problem{height:calc(50% - 2.5px);margin-bottom:5px}#output{height:calc(50% - 2.5px)}#new-problem-form *{margin-bottom:5px}#new-problem-form table{margin-bottom:5px;border-spacing:0 5px}#new-problem-form-description{margin-bottom:10px}}#about,#back-to-explorer,#coding-screen,#console,#contact,#host-coding-screen,#host-matches,#host-ranking-screen,#host-waiting-screen,#is-auth,#is-join,#loader-container,#match-history,#my-problems,#ranking-screen,#scoreboard,#settings,#sign-up-form,#table-drop-down{display:none}