body{margin:0;overflow:hidden;background-color:#eee;font-family:'Righteous'}*{box-sizing:border-box}main{height:calc(100vh - 60px);overflow-y:auto;padding-bottom:60px}h1{font-size:30px;text-align:center;color:#777;font-weight:normal;margin-block-start:0;margin-block-end:0}a{text-decoration:none;color:initial}input{padding:8px;font-family:'Righteous';font-size:16px;border:1px solid #aaa;border-radius:2px}.overlay{padding:30px;background-color:white;border:1px solid lightgrey;box-shadow:4px 4px 5px 0px #aaa}span.tag{padding:2px 5px;background-color:#ffe5c4;font-family:monospace;border:1px solid #aaa;border-radius:20px;white-space:nowrap}span.tag>a:hover{text-decoration:underline}.center-message{display:flex;justify-content:center;flex-direction:column;align-items:center;height:100%;color:#777;font-size:25px;text-align:center}.center-message .flag{font-size:80px;margin-bottom:40px}.center-message .learn-link{background-color:#000080;color:white;border-radius:20px;padding:5px 15px}.center-message .learn-link:hover{background-color:#0080ff}.center-message>h1{font-size:80px}.sub-header{display:flex;align-items:center;color:#777;font-size:18px;margin:20px 50px;padding:10px 5px;border-top:1px solid #aaa;border-bottom:1px solid #aaa}.sub-header>*{flex:1}.sub-header>h1{flex:5}.sub-header .sub-header-right{display:flex;justify-content:flex-end;align-items:center}.sub-header a.icon-button{margin:0 10px}.sub-header a.sub-header-link{color:#777;margin-right:50px}.sub-header a.sub-header-link:hover{text-decoration:underline}@media (max-width: 1000px){.sub-header{margin-left:0px;margin-right:0px;flex-wrap:wrap;row-gap:0.5em}.sub-header>h1{order:1;min-width:100%}.sub-header .sub-header-left{order:2}.sub-header .sub-header-right{order:3}}span.highlight{background-color:yellow}span.toast{color:white;border-radius:0.5em;padding:0.1em 0.5em;font-size:0.8em}span.toast-red{background-color:red}span.toast-green{background-color:green}span.toast-grey{background-color:grey}.btn{padding:8px;border:none;border-radius:2px;font-size:16px;font-family:inherit;text-align:center;cursor:pointer}.btn:hover{transform:scale(1.05)}.btn-primary{color:white;background-color:#000080}.btn-primary:hover{background-color:#0080ff}.btn-secondary{color:#000080;border:1px solid #000080}.btn-green{color:white;background-color:limegreen}.btn-green:hover{background-color:lightgreen}.btn-red{color:white;background-color:red}.btn-red:hover{background-color:#ff7070}.icon-button{display:flex;justify-content:center;align-items:center;width:2.2em;max-width:2.2em;height:2.2em;color:#777;background-color:white;border:none;border-radius:50%;box-shadow:2px 2px 4px 1px #ccc;cursor:pointer}.icon-button:hover{transform:scale(1.05)}.icon-button-primary{background-color:#000080;color:white}.icon-button-primary:hover{background-color:#0080ff}.icon-button-warning{background-color:red;color:white}.icon-button-warning:hover{background-color:#ff7070}.icon-button-success{background-color:limegreen;color:white}.icon-button-success:hover{background-color:lightgreen}.card{overflow:auto;width:500px;height:280px;padding:20px;border:1px dashed #aaa;box-shadow:4px 4px 5px 0px #aaa;background-color:white;font-family:'Comic Neue';font-size:18px;text-align:center}.card pre{text-align:left;margin-bottom:0;padding:0.1em;border:1px dashed #ccc;background-color:#eee;color:#777}.card pre,.card tt{font-size:16px}.card ul{display:inline-block;text-align:left;margin-block:0;white-space:normal}.card .card-content-wrapper{display:table;width:100%;height:100%}.card .card-content-wrapper .card-content{display:table-cell;vertical-align:middle;white-space:pre-line}header{display:flex;align-items:center;height:60px;padding:0 40px;font-size:30px;background-color:#000080;color:white}@media (max-width: 1000px){header{padding:0 15px}}header .header-left-desktop,header .header-right{display:flex;align-items:center;flex:2;font-size:18px}@media (max-width: 1000px){header .header-left-desktop{display:none}}@media (max-width: 1500px){header .header-left-desktop .nav-item-text{display:none}}header .header-left-desktop .nav-item:hover:not(.disabled){transform:scale(1.1)}header .header-left-desktop .nav-item-learn:not(.disabled):hover{background-color:lightgreen;transform:none}header .header-left-mobile{display:none}header .header-left-mobile details summary{list-style:none;cursor:pointer;position:relative}header .header-left-mobile details summary .summary-queue-size{position:absolute;background-color:limegreen;border-radius:36px;padding:0px 5px;font-size:12px;top:0px;right:-10px}header .header-left-mobile details[open] .summary-queue-size{display:none}header .header-left-mobile nav{display:flex;flex-direction:column;position:absolute;width:100%;padding:5px 10px;left:0;top:60px;background-color:white;border-bottom:1px solid #aaa;box-shadow:0px 4px 5px 0px #aaa}header .header-left-mobile nav .nav-item{border-radius:0px;font-size:20px;color:#777}header .header-left-mobile nav .nav-item .nav-item-icon,header .header-left-mobile nav .nav-item .nav-item-text{display:inline-block;transform:translateX(0px);transition:transform 0.2s}header .header-left-mobile nav .nav-item .nav-item-icon{width:1.25em}header .header-left-mobile nav .nav-item:hover:not(.disabled) .nav-item-icon,header .header-left-mobile nav .nav-item:hover:not(.disabled) .nav-item-text{transform:translateX(5px);transition:transform 0.2s}header .header-left-mobile nav .nav-item:not(:last-child){border-bottom:1px solid #ccc;margin-right:0px}header .header-left-mobile nav .nav-item-learn{color:#777;background-color:white}header .header-left-mobile nav .nav-item-learn.disabled{color:#bbb}header .header-left-mobile nav .nav-item-learn .queue-size{position:absolute;right:20px;color:white;background-color:limegreen;padding:0px 8px;font-size:14px}@media (max-width: 1000px){header .header-left-mobile{display:flex;flex:2}}header .header-center{flex:1;text-align:center}header .header-center .app-title{margin:0 20px;color:white}header .header-right{justify-content:flex-end}header .header-right .search-form{margin-right:20px}@media (max-width: 1000px){header .header-right .search-form{margin-right:10px}header .header-right .search-form input{display:none}}header .header-right a{display:flex;align-items:center;color:white}header .header-right .fa-sign-out-alt{margin-left:10px;font-size:20px}@media (max-width: 1000px){header .header-right .header-item{padding:5px 0px}header .header-right .logout-text{display:none}header .header-right .fa-sign-out-alt{margin-left:0px;font-size:25px}}header .header-item:hover{transform:scale(1.1)}header .nav-item,header .header-item{color:white;padding:5px 15px;border-radius:5px}header .nav-item:not(:last-child){margin-right:5px}header .nav-item .nav-item-icon{margin-right:3px}header .nav-item.nav-item-learn{background-color:limegreen;display:flex;align-items:center}header .nav-item.nav-item-learn .queue-size{margin-left:7px;background-color:white;color:limegreen;border-radius:10px;padding:0px 5px;font-size:12px}header .nav-item .nav-item-learn-label{margin-left:7px}header .nav-item.disabled{background-color:#aaa}header .nav-item.disabled.nav-item-learn-label{cursor:default}header .search-form{display:flex;align-items:center}header .search-form .search-icon{cursor:pointer;font-size:24px;margin-right:10px}header .search-form .search-icon:hover{transform:scale(1.1)}header .search-form input{width:250px}@media (max-width: 1000px){header.search-focused .header-left-mobile{flex:0}header.search-focused input#searchInput{display:block;width:100%}header.search-focused .search-form{justify-content:flex-end;flex:1;padding-left:20px;padding-right:5px}header.search-focused .search-form form{animation:expand 0.5s ease-in-out;width:100%}@keyframes expand{from{width:0%}to{width:100%}}header.search-focused .header-center{display:none}}.notification{display:flex;position:absolute;left:100vw;width:300px;top:200px;padding:20px;align-items:center;text-align:center;border:1px solid #aaa;border-left:5px solid;border-radius:3px;box-shadow:4px 4px 5px 0px #aaa;background-color:white;animation-duration:0.75s, 1.5s, 0s;animation-name:slidein, fadeout, slideout;animation-delay:0s, 4s, 5.5s;animation-fill-mode:forwards;animation-timing-function:ease-out}.notification .notification-icon{margin:auto 15px auto 0px;font-size:25px}.notification.error{border-left-color:red}.notification.error .notification-icon{color:red}.notification.success{border-left-color:lightgreen}.notification.success .notification-icon{color:lightgreen}@keyframes slidein{from{transform:translateX(0px)}to{transform:translateX(-400px)}}@keyframes fadeout{from{opacity:1}to{opacity:0}}@keyframes slideout{from{transform:translateX(-400px)}to{transform:translateX(0px)}}.learn-button{display:block;margin:50px auto;padding:10px 20px;font-size:24px}.login-wrapper{margin:100px auto;width:360px}.login-wrapper .row{margin-bottom:20px}.login-wrapper label{display:block;margin-bottom:5px}.login-wrapper input{width:100%;margin-top:5px}.login-wrapper button{width:100%;margin-top:20px}.list{box-shadow:4px 4px 5px 0px #aaa;background-color:white;padding:10px;padding-top:0px}.list .list-item{display:flex;align-items:center;font-size:14px;background-color:white;border-bottom:1px solid #ddd}.list .list-item.list-header{font-size:16px;border-bottom:none;background-color:#000080;color:white;box-shadow:10px 0 0 0 #000080, -10px 0 0 0 #000080}.list .list-item:not(.list-header):hover{background-color:#eee}.list .list-item .cell{padding:10px 10px;flex:1;flex-wrap:wrap;text-align:center}.empty-list{display:flex;justify-content:center;margin-top:300px;color:#777;font-size:25px}.card-list{margin:15px 50px}@media (max-width: 1000px){.card-list{margin:15px auto}}.card-list .cell:nth-child(1),.card-list .cell:nth-child(2){flex:2}.card-list .list-item .tags{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:4px;font-size:11px;overflow:hidden}.card-list .list-item .tags .tag:not(:last-child){margin-right:6px}#cardForm{max-width:1100px;margin:0 auto}@media (max-width: 500px){#cardForm .card{height:calc(0.56 * 100vw)}}#cardForm label{margin-right:15px}#cardForm input{width:100%}#cardForm textarea{width:500px;font-size:16px;resize:none}#cardForm section{margin-bottom:1em;padding-bottom:2em;border-bottom:1px solid #aaa}#cardForm .card-form-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2em 2em}#cardForm .button-row{display:flex;justify-content:center;column-gap:50px}#cardForm .button-row .btn{width:100px}#cardForm .icon{color:#777;margin-right:0.5em}.list.tag-list{max-width:500px;margin:0 auto}.list.tag-list .cell.tag-cell{flex:5;overflow:hidden;text-overflow:ellipsis}.learn .card{margin:70px auto;margin-bottom:20px;transition:transform 0.8s linear}.learn .card span{font-family:inherit}@media (max-width: 500px){.learn .card{margin-left:10px;margin-right:10px;width:initial;height:calc(0.56 * 100vw)}}.learn .card.turning{transform:rotate3d(0, 1, 0, 180deg)}.learn .card:not(.turned) div.back-text{display:none}.learn .card.turned{box-shadow:-4px 4px 5px 0px #aaa}.learn .card.turned div.front-text{display:none}.learn .card.turned div.back-text{transform:rotateY(180deg)}.learn .tags{display:flex;justify-content:center;align-items:flex-start;gap:1em;flex-wrap:wrap;margin:2em 0;min-height:1.5em}.learn #learnForm{display:flex;margin:0 auto;justify-content:center}.learn #learnForm .icon-button{margin:0 1em;font-size:24px}.card-row,.stats{margin:20px auto;max-width:1100px;padding:10px}.card-row{display:flex;justify-content:space-between;align-items:center}@media (max-width: 1000px){.card-row{flex-direction:column}.card-row .card{margin-bottom:20px}}@media (max-width: 500px){.card-row .card{width:100%;margin-left:10px;margin-right:10px;height:calc(100vw * 0.56)}}.stats{color:#777;flex-direction:column}.stats .row{display:flex}.stats .row:not(:last-child){border-bottom:1px solid #aaa;margin-bottom:10px}.stats .tag:not(:last-child){display:inline-block;margin-right:10px}.stats .stat-row-item{display:flex;flex-direction:column;align-items:center;flex:1;padding:10px}.stats .stat-row-item:not(:last-child){border-right:1px solid #aaa}.stats .label{display:flex;align-items:center;margin-bottom:5px;color:black}.stats .label .icon{color:#666;font-size:18px;margin-right:0.4em}@media (max-width: 1000px){.stats .label{margin-bottom:0px}.stats .row{flex-direction:column}.stats .row:not(:last-child){margin-bottom:0px}.stats .stat-row-item{flex-direction:row;justify-content:space-between}.stats .stat-row-item:not(:last-child){border-bottom:1px solid #aaa;border-right:none}}.profile-overlay{max-width:360px;margin:100px auto}.profile-overlay section:not(:last-child){margin-bottom:3em}.profile-overlay h2.profile-attribute-heading{display:flex;align-items:center;column-gap:1em;font-size:1.25em;font-weight:normal}.profile-overlay .profile-attribute-value{color:#777;overflow:hidden;text-overflow:ellipsis}.profile-overlay .profile-attribute-value .mathjax-enabled{color:limegreen}.profile-overlay .profile-attribute-value .mathjax-disabled{color:red}.profile-overlay .password-change-link{font-size:14px;color:blue}.profile-overlay .password-change-link:hover{text-decoration:underline}.profile-overlay .password-change-link .change-icon{margin-right:0.4em}.profile-overlay input{width:100%}.profile-overlay .button-row{display:flex;justify-content:center;column-gap:1em}.profile-overlay .button-row>*{flex:1}.profile-overlay .profile-row{display:flex;justify-content:space-between;align-items:center;padding:0 0.5em}.profile-overlay .profile-row label{color:#777}.change-password-overlay{margin:100px auto;width:360px}.change-password-overlay .row{margin-bottom:40px}.change-password-overlay label{display:block;margin-bottom:10px}.change-password-overlay input{width:100%}.change-password-overlay .button-row{display:flex;column-gap:1em}.change-password-overlay .button-row>*{flex:1}.toggle{display:flex;width:2em;height:1.2em;background-color:lightgrey;border-radius:0.6em;position:relative;align-items:center}.toggle input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0;z-index:1}.toggle input:checked~.handle{right:-0.35em;background-color:#000080;border-color:#000080}.toggle input:checked~.handle .toggle-icon{display:block;color:white}.toggle input:checked:hover~.handle{box-shadow:0px 0px 1px 1px #000060}.toggle input:hover~.handle{box-shadow:0px 0px 1px 1px #777}.toggle .handle{position:absolute;display:flex;justify-content:center;align-items:center;width:1.4em;height:1.4em;border:1px solid grey;background-color:white;border-radius:100%;right:0.85em;transition:right 0.5s, background-color 0.5s, border-color 0.5s}.toggle .handle .toggle-icon{width:60%;height:60%;display:none}