/* TypeCircuit.com  - All rights reserved. */

*,html{margin:0;box-sizing:border-box;}
::selection{background:#fff;color:#000}
::moz-selection{background:#fff;color:#000}
html,body{height:100vh;}
body{background:#000;color:#ccc; font-family: "Fira Code", monospace; font-optical-sizing: auto; font-style: normal;}

.wrapper{max-width:1800px;width:100%;padding:0 10px;margin:auto;position:relative;}
.header{border-bottom:1px solid #2E2E2E;font-size:15px;position:relative;z-index:2;}
.header .container{display:flex;flex-direction:row;justify-content: space-between;align-items:center;height:55px;}
.header .container .block:first-child,
.header .container .block:last-child{flex-grow: 1;flex-basis: 0;}
.header .right{text-align:right;}
.header .logo{text-decoration:none;line-height:0;}
.header .logo .icon svg{width:70px;height:auto;}
.header .logo .icon svg path,
.header .logo .icon svg circle{transition:0.2s;}
.header .logo:hover .icon svg path,
.header .logo:hover .icon svg circle{stroke:#fff;}
.header .logo:hover .name{margin-left:2.5px;}
.header .logo .icon{display:inline-block;vertical-align:middle;}
.header .logo .name{color:#fff;text-transform:italic;transition:0.2s;}
.header .logo .name img{display:inline-block;vertical-align:middle;max-width:150px;height:auto;}
.header #about{display: inline-block;vertical-align: middle;margin-left:10px;background:none;border:none;cursor:pointer;}
.header #about .name{color:#ccc;text-transform:lowercase;font-size:15px;}
.header #about:hover .icon{transform:scale(1.1);transition:0.2s;}
.header #about:hover svg{stroke:#fff}
.main{position:relative;}
.main p b{display:block;margin-bottom:5px;}
.main button,.main .btn{cursor:pointer;display:inline-block;padding:10px 20px;font-size:20px;margin-top:20px;border:2px solid #777;color:#777;background:none;transition:0.2s;}
.main button:hover,.main .btn:hover{background:#fff;border-color:#fff;color:#000;opacity:0.9;}
#main-btn-container{}
.reset-btn:hover .reset-text{text-transform:uppercase;}
.reset-btn:hover .reset-text{color:rgb(255, 0, 43);}
.reset-btn.active{border-color:#fff;animation:border-anim 0.5s forwards;}
button,input,textarea,select{font-family: "Fira Code", monospace;}
hr{padding-bottom:15px;height:1px;display:block;border:none;border-top:1px solid rgba(255,255,255,.2);}
ul{padding:0 0 0 15px;}
ol{margin:0;padding-left:30px;}
li a{text-decoration:none;}
p a{color:#fff;}
p a:hover{text-decoration:none;}
#game{margin:auto;max-width:1300px;height:calc(100vh - 110px);min-height:550px;position:relative;z-index:1;padding:40px;}
#targetSentence { font-size: 38px; margin-bottom: 10px; position: relative;}
#targetSentence span{display:inline-block;}
#progress{color:#999999;font-size:22px;letter-spacing:15px;}
#progress.highlight{animation:highlight 0.75s forwards;}
.progress-container{display:flex;gap:25px;align-items:baseline;margin-bottom:20px;}
.source-container{display:flex;gap:25px;align-items:baseline;}
#source .author{font-size:30px;}
#source .author:before{}
.type-icon{width:35px;height:35px;display:inline-block;vertical-align:middle;margin-right:10px;border-radius:150px;padding:2px;}
.type-icon svg{display:block;width:100%;height:100%;}
.type-icon svg path,.type-icon svg g{fill:#666}
#source .from{font-size:30px;}
#inputField { font-size: 18px; padding: 15px; width: 400px;border:1px solid #333;color:#999;width:100%;background:none;font-size:30px;border-radius:5px;margin-top:15px;caret-color: transparent;}
#inputField:focus{border-color:#999;outline:1px solid #999;}
#result {font-size: 20px; }
#result.final{ display:block;padding:20px;border-radius:10px;background:rgba(255,255,255,.3) }
#sentenceWrapper{position:relative;}
#countdown{color:cyan;font-size:22px;}
#source{margin:5px 0 10px;font-size:24px;}

.letter{position:relative;color:#ccc;border-bottom: 2px solid transparent;}
.correct { color: #35E86A; }
.incorrect { color: #FF0000; }
.mistyped { color: #FF0000; opacity: 0.9; border-bottom: 2px solid #FF0000; }
.moving-line { position: absolute; background: #aaa; width:2px; margin-top:5px; height: 33px; visibility: hidden; transition: left 0.1s ease, top 0.1s ease;pointer-events: none;z-index:4;}
.blinking { animation: blink 1s step-start infinite;animation-delay:0.5s;}
.stats-live{list-style-type:none;display:flex;justify-content:space-between;padding:0;margin-top:50px;}
.stats-live li{text-align:center;width:150px;height:150px;position:relative;line-height:100%;}
.stats-live li .amount{display:block;font-size:48px;color:#fff;margin-top:10px;}
.stats-live li .name{display:block;color:rgba(255,255,255,.5);font-size:23px;margin-top:25px;}
.stats-live .spacing{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);line-height:100%;display: flex;flex-direction: column;}
.stats-live #wpm-live,.stats-live .wpm-meter{border-radius:150px;}
.stats-live .wpm-meter{width:150px;height:150px;}
.stats-live .wpm-meter-background {stroke-opacity: 0.25;}
.stats-live .wpm-meter-progress {stroke-opacity: 0.5;transition: stroke-dashoffset 0.3s;}
.result-icon{position:relative;z-index:2;cursor:default;}
/*.result-icon:hover{background:rgba(255,255,255,.25)}*/
.result-amount{position: absolute;left: 50%;transform:translateX(-50%);top: -35px;font-size:20px;border-radius: 5px;background: rgba(255, 255, 255, .95);padding: 5px 10px;display:none;z-index:3;pointer-events:none;color:#000;}
.result-amount:after{content:"";border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid rgba(255, 255, 255, .95);width:0px;height:0px;position:absolute;bottom:-5px;left:50%;transform:translateX(-50%)}
.result-icon:hover .result-amount{display:block;}


.results-screenshot { position: relative; width: 750px; height: 346px;display:none;}
#textCanvas { position: absolute; top: 0; left: 0; z-index: 1; }
#image { position: absolute; top: 0; left: 0; z-index: 2; }


.day-container{display:inline-flex;gap:5px;cursor:help;}
.day-container .circuitText{display:none;}
.day-container .circuitDate{display:none;}
.day-container:hover .circuitText{display:block}
.modal{position: fixed;left: 0;top: 0;width:100%;height:100%;z-index:3;animation:appear 0.5s forwards;opacity:0;}
.modal-content{position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);border-radius:10px;text-align:left;background:#2B2B2B;color:#CCCCCC;z-index:3;padding:30px;text-align:left;width:90%;max-width:750px;}
.modal h2{font-size:38px;font-weight:700;margin-bottom: 15px;text-align:center;}
.modal h5{font-size:38px;font-weight:400;font-size:24px;margin-bottom:20px;}
.modal .endResults-stats{list-style-type:none;text-align:left;margin:20px 0;background: rgba(0,0,0,.5);padding: 10px;border-radius: 10px;}
.modal ol{margin:0;padding-left:30px;}
.modal li{margin-bottom:15px;line-height:140%}
.modal p{text-align:left;line-height:140%}
.legend{display:flex;flex-direction:row;list-style-type:none;padding:0;margin-top:10px;gap:25px;}
.legend li{text-align:center;}
.modal .endResults-stats li{font-size:24px;color:#fff;line-height:100%;}
.modal .btn-container{display:flex;justify-content:center;gap:20px;}
.modal .close-modal{position:absolute;right:20px;top:20px;background:none;border:none;width:20px;height:20px;line-height:0;margin:0;padding:5px;cursor:pointer;}
.modal .close-modal:after{content:"\00D7";color:#ccc;font-size:42px;font-weight:400;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.modal .close-modal:hover{background:none;border:none;}
.modal .close-modal:hover:after{color:#fff;}
.modal .btn{background:#000;border-radius:15px;color:#fff;text-transform:capitalize;border:3px solid #fff;font-size:27px;}
.modal-bg{background:rgba(0,0,0,.8);position:fixed;top:0;left:0;width:100%;height:100%;z-index:2;animation:fadein 0.5s forwards;opacity:0;}
.warning{display:none;border-radius: 150px; padding: 5px; font-weight: 600; color: yellow;animation:fadein 0.2s forwards;opacity:0;line-height:0;}
.warning:before{content:"⚠️CAPS LOCK ON";}
.stats-container{display:flex; flex-direction:column;padding:0;margin-bottom:5px;display:none;}
.stats-container li{display:flex; flex-direction:row; gap: 20px; list-style-type:none;padding:0;margin-bottom:5px;}
.stats-container li span{display:inline-block;}
.stage-stats { display:flex; flex-direction:row; }
.btn-container{display:flex;gap:20px;justify-content:center;}

.dropdown-content{display: none; position: absolute; left:0; bottom:calc(100% - 20px);min-width: 300px; text-align:left; padding:0; z-index: 5;border-radius:5px;overflow:hidden;}
.dropdown-content .link{display:block;background:#000;border-bottom:1px solid #ccc;color:#fff;padding:10px;font-size:24px;cursor:pointer;text-transform:capitalize;}
.dropdown-content .link:hover{background:#fff;color:#000;}
.dropdown-content .link:last-child{border-bottom:0;}
.btn-tooltip-container{position:relative;margin-left:-25px;}
.btn-tooltip{background:red;cursor:default;border-top-left-radius:0;border-bottom-left-radius:0;}
.btn-tooltip:after{content:"\25BC";}
.btn-tooltip:hover + .dropdown-content,
.dropdown-content:hover{ display: block; }
.share-btn-container{position:relative;}
.share-btn-container .btn.copy{border-top-right-radius:0;border-bottom-right-radius:0;}
.share-btn-container .btn-tooltip{border-top-left-radius:0;border-bottom-left-radius:0;}

.game-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;margin-top:0px;}
.game-footer .btn-container{min-width:260px;justify-content:center;flex-direction:row;width:100%;}
.settings-btn-container{position:relative;}
.settings{width:100%;transition:0.4s;}
.settings.disabled{opacity:0.6;}
.settings-btn{color:#fff;display:flex;align-items:center;color:#fff;position:relative;}
.main button .icon{display:inline-block;vertical-align:middle;margin-right:10px;transition:0.3s;transform-origin:50% 50%;width:25px;height:25px;margin-top:-5px;}
.main button .icon svg{width:100%;height:100%;stroke:#777;}
#view-endResults .icon svg{stroke:#fff;}
.main button:hover .icon svg{stroke:#000 !important;}
.settings-btn .new{display:none;vertical-align:top;height:20px;width:auto;margin-left:7.5px;margin-top:-2.5px;}
.settings-btn .new:after{content:"New";text-transform:uppercase;background:#fff;color:#000;padding:0px 3.5px;line-height:0;border-radius:2px;font-size:14px;font-weight:600;border:1px solid transparent;}
.settings-btn:hover .new:after{border-color:#000;opacity:0;}
.settings-btn.opened{opacity:1;}
.settings-btn.opened .icon{transform:rotate(90deg)}
.settings-btn.opened .icon svg{stroke:#fff;}
.settings-btn .icon:before{}
.settings .container{color:#ccc;display:flex;justify-content:center;padding:5px;border-radius:10px;align-items:stretch;gap:20px;width:100%;position:relative;background:#171717;}
.settings-btn.opened:after{content:"";display:inline-block;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:15px solid #171717;position:absolute;top:calc(100% + 15px);left:50%;transform:translateX(-50%);width:0;height:0;}
.settings .title{color:#777;transform:translate(0,50px);}
.settings .block{display:flex;flex-grow:1;flex-direction:column;justify-content:stretch;padding:10px;position:relative;max-width:240px;}
.settings .block:after{content:"";height:100%;width:2px;position:absolute;right:10px;top:0;border-right:1px solid rgba(255,255,255,.1);}
.settings .block:last-child:after{border:none;}
.settings .block h4{font-size:16px;text-transform:uppercase;font-weight:400;margin-bottom:15px;}
.settings .checkbox-container{margin-bottom:15px;width:100%;position:relative;}
.settings .label{cursor:pointer;padding:5px 0;font-size:16px;}
.settings .label:before{content:"";color:#fff;display:inline-block;vertical-align:middle;margin-right:10px;width:25px;height:25px;line-height:25px;font-weight:600;text-align:center;font-size:20px;border-radius:5px;border:1px solid #ccc;background:#000;}
.settings .checkbox{width:0px;height:0px;border:none;margin:0;overflow:hidden;position:absolute;transition:0.2s;}
.settings .label:hover,
.settings .label:active{color:#fff;}
.settings .label:hover:before{outline:2px solid #ccc;}
.settings .checkbox-container:focus-within .label:before{outline:2px solid #ccc;}
.settings .checkbox:checked + .label:before{background: #000 url('images/icon-checkmark.svg') no-repeat;background-size:24px 24px;background-position:50% 50%;}
.settings .checkbox:disabled + .label{opacity:0.5}
button.close-settings{position:absolute;right:15px;top:5px;border:none;background:none;border-radius:150px;width:30px;height:30px;line-height:20px;padding:0;margin:0;transition:0.1s;}
button.close-settings:after{content:"\00D7";color:#777;font-size:34px;font-weight:400;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:0.1s;}
button.close-settings:hover:after{color:#fff;}
button.close-settings:hover{background:none;transform:scale(1.1)}

.page-content{padding:40px 0;}

.footer{border-top:1px solid #2E2E2E;font-size:15px;}
.footer .container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:50px;}
.footer .copyright{font-size:12px;color:#707070}
.footer-nav ul{display:flex;gap:35px;justify-content:right;padding:0;}
.footer li{list-style-type:none;}
.footer li a{text-decoration:none;color:#ccc;}
.footer li a:hover{color:#fff;}

@keyframes appear {
  0%{opacity:0;transform:translateY(20px);-webkit-transform:translateY(20px)}
  100%{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px)}
}
@keyframes fadein {
  0%{opacity:0;}
  100%{opacity:1;}
}
@keyframes blink {
  50% { opacity: 0; }
}
@keyframes highlight{
  0%{transform:scale(1.2);-webkit-transform:scale(1.2);color:#fff;}
  100%{transform:scale(1);-webkit-transform:scale(1);}
}
@keyframes border-anim{
  0%{border-color:#fff}
  100%{border-color:#777;}
}

@media screen and (max-height:850px){
  #game{height:auto;}
}
@media screen and (max-width:790px){
  #targetSentence {font-size: 30px;line-height: 120%;}
  #progress{font-size:18px;}
  .game-footer{flex-wrap:wrap;}
  .game-footer .btn-container{display:block;margin:5px auto;text-align:center;min-width:100%;}
  .settings .container{flex-direction:column;width:100%;}
  .settings .container .block{display:block;border-bottom:1px solid #666;width:100%;max-width:100%;}
  .settings .container .block:after{display:none;}
  .settings .container .block:last-child{border-bottom:none;}
  .settings .block{display:block;width:100%;}
  .settings-btn.opened:after{top:calc(100% + 20px)}

}
@media screen and (max-width:640px){
  #targetSentence{font-size:26px;}
  #game{height:auto;min-height:300px}
  .modal p{font-size:14px;}
  .header .logo .icon svg{max-width:55px;}
  .header .logo .name img{max-width:100px;}
  .stats-live{flex-wrap: wrap;}
  .stats-live li{flex:0 0 49%;}
  .stats-live li .amount{font-size:34px;}
  #game{height:auto;}
}
@media screen and (max-width:450px){
  .slogan{display:none}
  #targetSentence{font-size:24px;}
}