html,body,.main{width:99vw;height:98vh;background:#000;color:#fff}*{margin:0;padding:0;font-family:Poppins;font-weight:500;box-sizing:border-box}.login{display:flex}.login-left,.login-right{height:100vh;flex-basis:50%}.login-left{display:flex;justify-content:center;align-items:center}.login-right{background-color:#404258;border-radius:2rem 0 0 2rem;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}.login-head{display:flex;flex-direction:column;justify-content:center;align-items:center}.login-head h1{font-size:64px;font-weight:600;letter-spacing:7px}.login-head h5{font-size:16px;font-weight:300;letter-spacing:2px}.inline{display:flex;flex-direction:column;gap:10px}.login-inputs{width:500px;display:flex;flex-direction:column;position:relative}.l-img{width:30px;position:absolute;top:7px;left:7px;opacity:50%}.l-input{width:100%;padding:10px 50px;border-radius:10px;background-color:#474e68;outline:none;color:#fff;border:2px solid white;font-size:16px}.l-other{display:flex;justify-content:space-between;align-items:center}.l-checkbox{display:flex;justify-content:center;align-items:center;gap:12px}.l-checkbox input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;background-color:#474e68;border:2px solid #fff;border-radius:5px;cursor:pointer;display:inline-block;position:relative}.l-checkbox input[type=checkbox]:checked{background-color:#474e68}.l-checkbox input[type=checkbox]:before{content:"👍";position:absolute;left:50%;top:50%;width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:2px;transform:translate(-50%,-50%);opacity:0}.l-checkbox input[type=checkbox]:checked:before{opacity:1}.l-checkbox p{font-size:16px;font-weight:300}.l-forgot p{font-size:16px;font-weight:400;text-decoration:underline;cursor:pointer}.login-bottom{display:flex;justify-content:center;align-items:center;gap:20px;flex-direction:column;width:500px}.l-btn{width:100%;padding:15px 0;background-color:#4e888f;display:flex;align-items:center;justify-content:center;border-radius:20px;letter-spacing:2px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:.1s ease-in}.l-btn:hover{background-color:#55a0a8;border-radius:10px}.l-btn p{width:500px;height:100%;font-size:16px;text-align:center}.l-register p a{text-decoration:underline;cursor:pointer;-webkit-user-select:none;user-select:none}.nav{width:100vw;height:7rem;background-color:#404258;border-radius:0px 0px 1.5rem 1.5rem;display:flex;justify-content:space-between;align-items:center}.nav-header{display:flex;flex-direction:column;justify-content:center;align-items:center}.nav-header :first-child{font-size:3rem;font-weight:800;line-height:1.2}.nav-header :nth-child(2){font-size:1.3rem;font-weight:500}.nav-profile{display:flex;align-items:center;padding-right:3.5rem;gap:1rem}.nav-profile img{width:4rem;border-radius:50%}.nav-profile :nth-child(3){width:2.5rem}#root1{width:100%;height:88.7%;display:flex;justify-content:space-evenly;align-items:center}.left{position:relative;height:95%;flex-basis:49%;background-color:#2c3639;border-radius:1rem}.submit-btn{position:absolute;width:150px;height:60px;display:flex;justify-content:center;align-items:center;background-color:#76abae;border-radius:.5rem;bottom:.4rem;right:1rem;cursor:pointer;-webkit-user-select:none;user-select:none}.submit-btn h2{color:#000;font-weight:600}.wrapper{height:10%;display:grid;place-items:center}.typing-demo{width:400px;animation:typing 3s steps(23),blink .3s step-end infinite alternate;animation:typing 3s steps(23) infinite alternate,blink 1s step-end infinite;white-space:nowrap;overflow:hidden;border-right:3px solid;font-size:2em}@keyframes typing{0%{width:0}}@keyframes blink{50%{border-color:transparent}}.code{flex:1;min-height:80%;max-height:80%;overflow-y:auto;border-radius:5px;position:relative}.code::-webkit-scrollbar{width:8px}.code::-webkit-scrollbar-thumb{background-color:#666;border-radius:4px}.code::-webkit-scrollbar-track{background-color:#333}.code textarea,.code pre{font-family:Fira Code,monospace;font-size:16px;color:#f8f8f2;background:transparent;line-height:1.5;padding:10px;border:none;outline:none;width:100%;min-height:100%;resize:none;white-space:pre-wrap;word-break:break-word}.code,.code textarea,.code pre,.code code{font-family:Fira Code,monospace;font-size:16px!important;line-height:1.5;background:transparent;color:#f8f8f2;white-space:pre-wrap;word-break:break-word}.code ::selection{background:#add8e680;font-size:16px}.right{height:95%;flex-basis:49%;background-color:#474e68;border-radius:1rem;padding:1rem 2rem;overflow:auto;box-sizing:border-box}.right ::selection{background:#add8e680}.right::-webkit-scrollbar{width:8px}.right::-webkit-scrollbar-track{background:#222;border-radius:10px}.right::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#444,#666);border-radius:10px}.right::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#555,#777)}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:#79c0ff}.hljs-regexp,.hljs-string,.hljs-meta .hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-comment,.hljs-code,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}