#login{box-sizing:border-box;width:100%;padding:0;font-size:160%}#login div{margin-bottom:4%}#login div input{display:block;margin:1% 0 0;width:100%;border:1px solid var(--mint);box-shadow:0 2px 0 0 var(--mint-shadow);border-radius:5px}#login button,#login div input{box-sizing:border-box;padding:2%;font-size:inherit}#login button{color:var(--black);width:33%;border:none;border-radius:5px;background-color:var(--mint);box-shadow:0 8px 0 0 var(--mint-shadow);cursor:pointer;margin:2% auto;transform:translateY(-8px);transition:transform .3s cubic-bezier(.45,.08,.06,1.7),box-shadow .3s cubic-bezier(.45,.08,.06,1.7),background-color .3s ease-in-out}#login button:disabled,#login button:hover{transform:translateY(-4px);box-shadow:0 4px 0 0 var(--mint-shadow)}#login button:disabled{background-color:var(--mint-shadow);cursor:not-allowed}#login div.passwordBox{display:flex}#login div.passwordBox input{border-radius:5px 0 0 5px;margin:0;padding:2% 4%}#login div.passwordBox button{border-radius:0 5px 5px 0;padding:2% 4%;border:1px solid var(--mint);margin:0}#login div.passwordBox button,#login div.passwordBox button:hover{transform:none;box-shadow:0 2px 0 0 var(--mint-shadow)}#register{box-sizing:border-box;width:100%;padding:0;font-size:160%}#register div{margin-bottom:4%}#register div input{display:block;margin:1% 0 0;box-sizing:border-box;width:100%;padding:2%;border:1px solid var(--mint);box-shadow:0 2px 0 0 var(--mint-shadow);font-size:inherit;border-radius:5px}#register div input:disabled{background-color:var(--mint);color:transparent;cursor:not-allowed}#register button{color:var(--black);box-sizing:border-box;width:33%;padding:2%;border:none;font-size:inherit;border-radius:5px;background-color:var(--mint);box-shadow:0 8px 0 0 var(--mint-shadow);cursor:pointer;margin:2% auto;transform:translateY(-8px);transition:transform .3s cubic-bezier(.45,.08,.06,1.7),box-shadow .3s cubic-bezier(.45,.08,.06,1.7),background-color .3s ease-in-out}#register button:disabled,#register button:hover{transform:translateY(-4px);box-shadow:0 4px 0 0 var(--mint-shadow)}#register button:disabled{background-color:var(--mint-shadow);cursor:not-allowed}#register div.passwordBox{display:flex}#register div.passwordBox input{border-radius:5px 0 0 5px;margin:0;padding:2% 4%}#register div.passwordBox button{border-radius:0 5px 5px 0;padding:2% 4%;border:1px solid var(--mint);margin:0}#register div.passwordBox button,#register div.passwordBox button:hover{transform:none;box-shadow:0 2px 0 0 var(--mint-shadow)}@media screen and (orientation:portrait){#register button{width:auto}}#connect{box-sizing:border-box;width:90%;margin:0 auto;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(5,1fr);grid-template-areas:"a a b Center Center Center Center Center p j j j " "a a c Center Center Center Center Center q j j j " "e d d Center Center Center Center Center r j j j " "f d d Center Center Center Center Center k k l n " "g h i Center Center Center Center Center k k m o ";justify-content:space-evenly;align-content:space-evenly;justify-items:stretch;align-items:stretch}#connect>.letter{aspect-ratio:1/1;background-color:var(--sun-yellow);border-radius:10px;display:flex;justify-content:center;align-items:center;border:2px solid var(--yellow-shadow);margin:.7vw}#connect>.letter img{width:90%}.a{grid-area:a}.b{grid-area:b}.c{grid-area:c}.d{grid-area:d}.e{grid-area:e}.f{grid-area:f}.g{grid-area:g}.h{grid-area:h}.i{grid-area:i}.j{grid-area:j}.k{grid-area:k}.l{grid-area:l}.m{grid-area:m}.n{grid-area:n}.o{grid-area:o}.p{grid-area:p}.q{grid-area:q}.r{grid-area:r}.center{grid-area:Center;box-sizing:border-box;width:100%;padding:0 7.5%}.center #toggle{-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;font-size:120%;text-decoration:underline}@media screen and (orientation:portrait){#connect{display:block;width:100%}#connect>.letter{display:none}}