html { font-size: 1rem; height: 100%; }
body { height: 100%; color: #fff; font-family: Sora, sans-serif; font-size: 1rem; background: #181818; font-weight: 300; }
a { color: #f8e71b; font-weight: 600; }
a:hover { color: #faf93d; }
h1 { font-size: 2rem; }
h3 { font-size: 2em; color: #eee; }
form { margin: 0; }
strong { font-weight: 600; }
.arial { font-family: Arial, sans-serif; }
.no-desktop { display: none; }

.btn { font-family: Sora, sans-serif; }
.btn-link { color: #aaa; }
.btn-link:hover { color: #ccc; }
.btn-yellow { background: #fbe537; color: #111; font-weight: 600; border: none; }
.btn-yellow:hover { background: #fdf759; color: #000; }
.btn-yellow:disabled { background: #a1ad0c; color: #111; }
.btn-red { background: #c11717; color: #111; font-weight: 600; border: none; }
.btn-red:hover { background: #e33939; color: #000; }
.btn-red:disabled { background: #580101; color: #111; }
.btn-grey:disabled { background: #aaa; color: #111; font-weight: 600; border: none; }
.btn-primary { background: #1b9e1b; border: none; font-weight: 600; }
.btn-primary:hover { background: #3dbf3d; }
.btn-secondary { background: #777; color: #222; border: none; font-weight: 600; }
.btn-secondary:hover { background: #999; color: #111; }

header { position: fixed; box-shadow: 0 0 8px rgba(0,0,0,0.1); width: 100%; z-index: 100; height: 3.6rem; top: 0; font-weight: 600; background: #181818; }
header .container { position: relative; }
header .language-menu { display: block; left: 5rem; position: absolute; left: 13rem; top: 0.7rem; }
header .language-menu a { color: #ddd; }
header .language-menu a span { font-size: 0.8rem; position: relative; top: -0.1rem; }
header .language-menu a { opacity: 0.3; }
header .language-menu a:hover { opacity: 0.7; text-decoration: none; }
header .language-menu a.active { opacity: 1; }
header .menu { font-weight: 600; text-transform: uppercase; position: absolute; right: 0; font-size: 0.9rem; /* margin-right: 1rem; */ }
header .menu > * { display: inline-block; position: relative; }
header .menu > a { color: #ddd; display: inline-block; text-transform: uppercase; margin: 1.4em 1.6em 1.4em 0; font-weight: 600; border-bottom: 2px dotted transparent; padding-bottom: 0.2em; }
header .menu > a:hover,
header .menu > a.active { text-decoration: none; border-bottom: 2px solid #edfd0f; color: #edfd0f; }
header .menu > a img { height: 1em; position: relative; vertical-align: middle; top: -0.1em; opacity: 0.8 }
header .menu > a:hover img { opacity: 1 }
header .menu > a.tipeee { color: #edfd0f; border-radius: 0.2em; padding: 0.2em 0.6em; margin: 0 1em 0 0; border: none; }
header .menu > a.tipeee:hover { background-color: #edfd0f; color: #222; }
header .menu > .user-box { margin: 0; padding: 1.4em 1.6em 1.4em 0; color: #ddd; }
header .menu > .user-box span .badge.qi { transition: none; background-color: #ddd; color: #000; text-shadow: none; font-size: 0.9em; margin-left: 0.2rem; top: -0.1rem; font-weight: 600; }
header .menu > .user-box:hover { color: #edfd0f; }
header .menu > .user-box:hover span .badge.qi { background-color: #edfd0f; cursor: pointer; }
header .menu > div.user-box { cursor: default; }
header .menu > div.user-box ul { min-width: 100%; display: none; text-align: center; position: absolute; top: 0; right: 0; background: #181818; margin: 0; padding: 0; list-style: none; }
header .menu > div.user-box ul li a { margin: 1.4em 1.6em 0.8em; display: block; font-weight: 600; padding-bottom: 0.2em; border-bottom: 2px solid #edfd0f; }
header .menu > div.user-box ul li a:hover { text-decoration: none; }
header .menu > div.user-box ul li a::before { content: ""; background: rgba(24,24,24, 0); background: linear-gradient(90deg, rgba(24,24,24,0) 0%, rgba(24,24,24,1) 100%); width: 4em; position: absolute; right: 100%; top: 0; bottom: 0; }
header .menu > div.user-box:hover ul { display: block; }
header .menu > div.user-box.archives { color: #ddd; }
header .menu > div.user-box.archives ul { margin-top: 3.2em; }
header .menu > div.user-box.archives ul li a { margin: 0.8em 1.6em; border-bottom: 2px solid transparent; color: #aaa; }
header .menu > div.user-box.archives ul li a:hover { border-bottom: 2px solid #edfd0f; color: #f8e71b; }
.wrapper { padding-top: 3rem; }
@media screen and (max-width: 640px) {
  body > .container { margin-top: 6rem; ; }
  header { height: 6rem; text-align: center; }
  header .menu { position: relative; right: 0; font-size: 0.8rem; margin-right: 0; }
}

.calmos-container { display: flex; align-items: center; justify-content: center; margin: 0; height: 100%; text-align: center; font-size: 0.8rem; }
.static-container { margin: 4rem auto 0; padding: 2rem; max-width: 60rem; }

.calmos-modal { position: fixed; display: flex; top: 0; align-items: center; justify-content: center; z-index: 200; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
.calmos-modal .modal-content { max-width: 80%; width: auto; background: #1f1f1f; border-color: #333; }
.calmos-modal .modal-content button.modal-close { position: absolute; top: 0; right: 0.1rem; padding: 0.6rem; color: #777; font-size: 1.3rem; z-index: 2; background: none; border:none; }
.calmos-modal .modal-content button.modal-close:hover { color: #999; cursor: pointer; }
.calmos-modal .modal-content .modal-body { overflow: auto; }
.calmos-modal .modal-content .message { margin: 1.2em 2.6em 0em 1.2em; font-weight: bold; font-size: 0.9em; }

.container { margin-bottom: 8em; }
.game { width: 40em; height: 40em; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.game .point { z-index: 9; cursor: pointer; width: 2em; height: 2em; margin-left: -1em; margin-bottom: -1em; display: flex; align-items: center; justify-content: center; position: absolute; border-radius: 10em; }
.game .point .protip-info { display: none; line-height: 1.3; position: absolute; width: 100em; text-align: left; left: 1.7em; bottom: 1.5em; padding-left: 1.3em; font-size: 0.9em; padding-bottom: 0.6em; color: #777; }
.game .point .protip-info .fa-arrow-left-long { position: absolute; left: 0; bottom: 0; transform: rotate(-45deg); }
.game .point .answer { display: none; }
.game .point .answer.solution { color: #4796ee !important; display: none !important; }
.game .point .icon { overflow: hidden; position: relative; font-size: 3em; width: 0.8em; line-height: 0.8em; color: #333; font-family: Arial, sans-serif; }
.game .point .icon.light { position: absolute; color: white; color: #fff; text-shadow: 0 0 0.3em rgba(255,255,255,0.4); opacity: 0; }
.game .point .icon.solution { color: #03528c; display: none; }
.game .point .icon.light.solution { color: #d2ecff; text-shadow: 0 0 0.3em rgba(200,250,255,0.4); display: none; }
.game .point:hover .icon:not(.light) { color: #444; }
.game .point:hover { z-index: 10; }
.game .point:hover .answer { position: absolute; font-size: 0.9em; line-height: 1em; display: block; right: -4em; left: -4em; color: #999; }
.game .point:hover .answer div { display: inline-block; box-shadow: 0 0 0.8em 0.6em #181818; background: #181818; border-radius: 3em; }
.game .point:hover .icon { display: none; }
.game .point.found { color: #1e9e1a; }
.game .point.found:hover .answer { color: #1e9e1a; }
.game .point.found .icon { color: #0c7c08; }
.game .point.found .icon.light { color: #00ff00; text-shadow: 0 0 0.3em rgba(0,255,0,0.4); }

.game > .head { width: 100%; }
.game > .head h1 { color: white; margin: 0; font-size: 3em; margin-bottom: 0.2em; position: relative; }
.game > .head h1 .calmos-logo { width: 50%; }
.game > .head h1 .calmos-logo.absolute { position: absolute;left: 0;right: 0; margin: 0 auto; }
.game > .head h2 { font-weight: 600; margin: 0; font-size: 1.2em; color: #eee; }

.game > .description { font-size: 1.2em; line-height: 1.2; height: 4rem; display: flex; align-items: center; }
.game > .description .verdict { font-size: 1.2em; font-weight: 600; }
.game > .description .verdict.right { color: #1e9e1a; }
.game > .description .verdict.wrong { color: #e41111; }

.game > .action-container { height: 4rem; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
.game > .action-container .btn { font-size: 1.4em; }
.game > .action-container input.answer-input { text-transform: uppercase; font-weight: 600; color: #fff; text-align: center; outline: none; color: white; background: #222; border: none; border-radius: 0.4rem; width: 80%; padding: 0.8rem 1rem; font-size: 1.4em; font-weight: lighter; text-transform: uppercase; }
.game > .action-container input.answer-input::placeholder { text-transform: none; font-weight: 300; font-size: 0.9rem; }

.game > .score { color: #aaa; font-size: 1.4em; line-height: 1.4; margin-top: 0.4em; }
.game > .score strong { color: #fff; }
.game > .score .show-recap { margin-top: 0.4rem; display: inline-block; font-size: 0.8rem; color: #777; }

.game > .controls-container { height: 4rem; display: flex; flex-direction: column; justify-content: flex-end; }
.game > .controls-container .controls { display: inline-block; background: rgba(255,255,255, 0.1); border-radius: 0.3em; padding: 0.7rem 0.5rem; font-size: 1.2em; }
.game > .controls-container .controls .control { text-align: center; display: block; float: left; width: 2rem; }
.game > .controls-container .controls .control i { color: #aaa; cursor: pointer; position: relative; }
.game > .controls-container .controls .control i:hover { color: #fff; }

body.show-solutions .game .point .answer.no-solution { display: none !important; }
body.show-solutions .game .point .icon.no-solution { display: none !important; }
body.show-solutions .game .point:hover .answer.solution { display: block !important; }
body.show-solutions .game .point:hover .icon.solution { display: none; }
body.show-solutions .game .point .icon.solution { display: block; }
.button { outline: none; cursor: pointer; padding: 0.8em 1.2em; border: 1px solid #aaa; color: #111; font-weight: 600; background: #ddd; font-size: 1.4em; border-radius: 0.2em; }
.button.discret { background: #000; color: #777; border-color: #555; font-size: 1.2em; }
.button:hover { background: #111; color: #eee; border-color: #777; }
.button.logout { position: fixed; bottom: 2em; right: 2em; }
.error { color: #e41111; margin-bottom: 2em; }
/*
label { font-size: 1.2em; margin: 0.6em; display: block; }
input { color: #ddd; width: 88%; outline: none; font-size: 1.4em; padding: 0.8em 1.2em; text-align: center; background: #111; border: 1px solid #333; box-shadow: none; }
*/


ul.leaderboard { list-style: none; margin: 1rem auto; padding: 0; width: 30rem; max-width: 100%; color: #ccc; font-size: 1rem; overflow: auto; }
ul.leaderboard li { margin: 0; padding: 0; display: flex; justify-content: space-between; line-height: 1.5; }
ul.leaderboard li .pseudo { flex: 1; display: flex; align-items: flex-end; }
ul.leaderboard li .pseudo .rank { display: inline-block; width: 3rem; text-align: right; margin-right: 0.4rem; font-size: 0.8rem; margin-bottom: 0.1rem; }
ul.leaderboard li .pseudo .name { flex: 1; display: flex; align-items: flex-end; }
ul.leaderboard li .pseudo .name::after { content: ""; border-bottom: 1px dotted #555; flex: 1; font-weight: 100; margin: 0.4rem; }
ul.leaderboard li .points { width: 8rem; }
ul.leaderboard li .points small { font-size: 0.8rem; opacity: 0.5; margin-left: 0.4rem; }

/*
#modal { cursor: pointer; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 20; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 20; }
#modal .modal-content { background: #050505; border: 2px solid #111; padding: 2rem; overflow: auto; min-height: 20rem; }
*/

footer { position: fixed; bottom: 0; left:0; right: 0; padding: 0.8rem; font-size: 0.8rem; color: #555; line-height: 1; text-align: center; background: #181818; z-index: 100; }
footer a { color: #777; }
footer .bulletpoint { font-family: Arial, sans-serif; position: relative; font-size: 1.4rem; padding: 0 0.3rem; bottom: -0.25rem; }
.show-solutions-container { position: absolute; bottom: 0; right: 0; padding: 1rem; }
a.show-solutions { text-decoration: none; color: #03528c; }
a.show-solutions:hover { text-decoration: none; color: #2574ae; }
.loader { display: inline-block; }
.loader:after { content: " "; display: block; margin: 1rem 4rem; width: 3rem; height: 3rem; border-radius: 50%; border: 0.3rem solid #999; border-color: #999 transparent #999 transparent; animation: loader 1.2s linear infinite; }
@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media (max-width: 1100px) {
  html { font-size: 0.9rem; }
}

@media (max-width: 1000px) {
  .show-solutions-container { margin-bottom: 2.2rem; padding: 0.4rem; text-align: center; left: 0; }
}

@media (max-width: 500px) {
  html { font-size: 1rem; }
  .no-mobile { display: none !important; }
  .no-desktop { display: initial; }
  header .menu { margin-top: 0.7em; }
  header .menu > a { margin: 0.7em; border-bottom: none; padding-bottom: 0; }
  header .menu > .user-box { padding: 0.7em; }
  header .menu > .user-box > span { display: none; }
  header .menu > div.user-box ul { min-width: 0; display: inline-block; position: relative; }
  header .menu > div.user-box ul li a { margin: 0; padding: 0; border-bottom: none; }
  header .menu > div.user-box ul li a::before { display: none; }
  .game { font-size: 0.6em; }
  .game > .head { margin-top: 1rem; }
  .game > .description { height: 3rem; font-size: 1.6em; }
  .game > .action-container { height: 3.6rem; }
  .game > .action-container .btn { font-size: 2em; }
  .game > .action-container input.answer-input { height: 3rem; font-size: 1rem; padding: 0.6rem 1rem; }
  .game > .action-container input.answer-input::placeholder { font-size: 0.9em; }
  .game > .score { font-size: 2em; margin-top: 0; }
  .game > .score .show-recap { display: none; }
  .game > .controls-container { height: 2rem; }
  .game > .controls-container .controls { font-size: 2em; background: none; padding: 0; }
  [data-modal=help] .modal-body { font-size: 0.7em !important; }
  ul.leaderboard { font-size: 0.8rem; }
  ul.leaderboard li .pseudo .rank { width: 2.2rem; font-size: 0.7rem; }
  ul.leaderboard li .points { width: 2.4rem; }
  ul.leaderboard li .points small { display: none; }
}