body{
    background-color: #15181d;
}

/**
 MINIGAME SQUARES
 */
.streaks {
    display: block;
    margin: 60px auto 40px;
    text-align: center;
    font-size: 30px;
    font-family: sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    width: -moz-fit-content;
    width: fit-content;
    background-color: #028000;
    padding: 12px;
    border-radius: 18px;
}
.vault .streaks {
    display: none;
}
.options{
    font-weight: bold;
    text-align: center;
    margin: 0 auto 10px;
}
.vault .options {
    margin-top: 158px;
}
.option{
    display: inline-block;
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    text-align: center;
    width: -moz-fit-content;
    width: fit-content;
    height: 20px;
    background-color: #20282e;
    padding: 10px 20px;
    margin: 0 auto 10px;
    border-radius: 6px;
}
.option.speed input{
    vertical-align: text-top;
}
.speed_value{
    display: inline-block;
    width: 18px;
    text-align: right;
}
.vault .options.settings,
.vault .option.speed {
    display: none;
}
.option.game_mode{
    padding: 0 0 0 20px;
    height: 40px;
    font-size: 0;
}
.option.game_mode span{
    font-size: 16px;
    padding-right: 14px;
}
.option.game_mode .button{
    display: inline-block;
    color: white;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: bold;
    cursor: pointer;
    height: 38px;
    border: none;
    border-left: 1px solid #20282e;
    padding: 0 15px;
    background-color: #2c465e;
}
.option.game_mode .button:last-child{
    border-radius: 0 6px 6px 0;
}
.option.game_mode .button:hover,
.option.game_mode .button.active{
    background-color: #425e79;
}
.option.audio{
    width: 20px;
    padding: 10px;
    cursor: pointer;
}
.option.audio .fa.muted{
    color: red;
}
.option.setting{
    display: inline-flex;
    height: 32px;
    padding: 0;
}
.option.setting label{
    font-size: 12px;
    padding: 6px 10px 6px 6px;
}
.option.setting input{
    vertical-align: middle;
}

.splash{
    display: inline-block;
    width: 100%;
    margin: 310px auto;
    text-align: center;
    color: white;
    font-size: 16px;
}
.splash .hacker{
    font-size: 65px;
    margin-bottom: 30px;
}
.splash .message{
    font-size: 28px;
    font-family: sans-serif;
    font-weight: 900;
    font-variant: small-caps;
}

.minigame{
    margin: 0 auto 20px;
    width: 1850px;
    min-width: 1850px;
    max-width: 1850px;
    height: 756px;
    min-height: 756px;
    max-height: 756px;
    background-color: #20282e;
    position: relative;
}
.groups{
    display: flex;
    justify-content: space-evenly;
    padding-top: 130px;
}
.group{
    width: 280px;
    height: 280px;
    border: 1px black solid;
    position: relative;
}
.group > div {
    position: absolute;
}
.splash .btn_again {
    margin: 100px auto;
    padding: 15px 20px;
    font-weight: bold;
    display: block;
    color: #ffffff;
    background-color: #2c465e;
    border: 1px solid #16181d;
    cursor: pointer;
}
.splash .btn_again:hover {
    background-color: #425e79;
}
.answer .btn_again {
	margin-right: -40px;
    margin-left: 40px;
    padding: 6px 15px;
    font-weight: bold;
}

/**
 TIMER BAR
 */

.timer {
    width: 1805px;
    height: 5px;
    background-color: #5a3817;
    margin: 135px auto 35px auto;
}
.timer-progress {
    background-color: #f4a96b;
    height: 5px;
    margin: auto;
}
.progress-bar{
    width: 100%;
    transition: width 6s linear 0s;
}

/**
 MINIGAME
 */
.real_number{
    background-color: #2c465e;
    height: 280px;
    width: 280px;
    line-height: 280px;
    text-align: center;
    vertical-align: middle;
    font-size: 190px;
    color: white;
    font-family: sans-serif;
    transition: font-size 2s;
}
.text_color,
.text_shape {
    text-align: center;
    font-size: 31px;
    font-family: 'arial black', sans-serif;
    -webkit-text-stroke: 1px black;
    text-transform: uppercase;
    font-weight: bold;
    width: 100%;
}
.text_color {
    top: 82px;
}
.text_shape{
    top: 158px;
}
.invert .text_color{
    top: 158px;
}
.invert .text_shape{
    top: 82px;
}
.number {
    text-align: center;
    font-size: 82px;
    font-family: sans-serif;
    -webkit-text-stroke: 1px black;
    text-transform: uppercase;
    line-height: 82px;
    top: 100px;
    width: 100%;
}

.txt_blue{ color: #2195ee; }
.txt_green{ color: #4cae4f; }
.txt_red{ color: #7b0100; -webkit-text-stroke: 1px #ffffff; }
.txt_orange{ color: #fd9802; }
.txt_yellow{ color: #fceb3d; }
.txt_purple{ color: #9926ac; }
.txt_black{ color: #000000; -webkit-text-stroke: 1px #ffffff; }
.txt_white{ color: #ffffff; }

.bg_blue{ background-color: #2195ee; }
.bg_green{ background-color: #4cae4f; }
.bg_red{ background-color: #7b0100; }
.bg_orange{ background-color: #fd9802; }
.bg_yellow{ background-color: #fceb3d; }
.bg_purple{ background-color: #9926ac; }
.bg_black{ background-color: #000000; }
.bg_white{ background-color: #ffffff; }

.square {
    height: 215px;
    width: 215px;
    border: 1px black solid;
    margin: 32px auto auto 32px;
}
.inner_shape.square{
    height: 50px;
    width: 52px;
    margin: 114px auto auto 112px;
}
.inner_shape.square2{
    height: 32px;
    width: 54px;
    border: 1px black solid;
    margin: 124px auto auto 112px;
}
.rectangle {
    height: 128px;
    width: 216px;
    border: 1px black solid;
    margin: 75px auto auto 32px;
}
.inner_shape.rectangle{
    height: 52px;
    width: 106px;
    margin: 114px auto auto 87px;
}
.inner_shape.rectangle2{
    height: 32px;
    width: 106px;
    border: 1px black solid;
    margin: 124px auto auto 87px;
}
.triangle{
    height: 215px;
    width: 215px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background-color: black;
    margin: 32px auto auto 32px;
}
.triangle:before{
    content: '';
    height: 213px;
    width: 213px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    position: absolute;
    margin: 1px;
}
.inner_shape.triangle{
    height: 72px;
    width: 72px;
    margin: 104px auto auto 104px;
}
.inner_shape.triangle:before{
    height: 70px;
    width: 70px;
}
.triangle.bg_blue:before{ background-color: #2195ee; }
.triangle.bg_green:before{ background-color: #4cae4f; }
.triangle.bg_red:before{ background-color: #7b0100; }
.triangle.bg_orange:before{ background-color: #fd9802; }
.triangle.bg_yellow:before{ background-color: #fceb3d; }
.triangle.bg_purple:before{ background-color: #9926ac; }
.triangle.bg_black:before{ background-color: #000000; }
.triangle.bg_white:before{ background-color: #ffffff; }
.circle {
    height: 218px;
    width: 218px;
    clip-path: circle(108px);
    background-color: black;
    margin: 31px auto auto 31px;
}
.circle:before{
    content: '';
    height: 218px;
    width: 218px;
    clip-path: circle(107px);
    position: absolute;
}
.inner_shape.circle{
    height: 58px;
    width: 58px;
    clip-path: circle(27px);
    margin: 112px auto auto 112px;
}
.inner_shape.circle:before{
    height: 58px;
    width: 58px;
    clip-path: circle(26px);
}
.inner_shape.circle2{
    height: 58px;
    width: 58px;
    clip-path: ellipse(27px 17px);
    background-color: black;
    margin: 112px auto auto 112px;
}
.inner_shape.circle2:before{
    content: '';
    height: 58px;
    width: 58px;
    clip-path: ellipse(26px 16px);
    position: absolute;
}
.circle.bg_blue:before,
.circle2.bg_blue:before{ background-color: #2195ee; }
.circle.bg_green:before,
.circle2.bg_green:before{ background-color: #4cae4f; }
.circle.bg_red:before,
.circle2.bg_red:before{ background-color: #7b0100; }
.circle.bg_orange:before,
.circle2.bg_orange:before{ background-color: #fd9802; }
.circle.bg_yellow:before,
.circle2.bg_yellow:before{ background-color: #fceb3d; }
.circle.bg_purple:before,
.circle2.bg_purple:before{ background-color: #9926ac; }
.circle.bg_black:before,
.circle2.bg_black:before{ background-color: #000000; }
.circle.bg_white:before,
.circle2.bg_white:before{ background-color: #ffffff; }


.question{
    text-align: center;
    font-size: 20px;
    font-family: sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    bottom: 146px;
    position: absolute;
    width: 100%;
}
.answer{
    text-align: center;
    font-size: 20px;
    font-family: sans-serif;
    font-weight: bold;
    color: white;
    bottom: 24px;
    position: absolute;
    width: 100%;
}
.answer label{
    display: block;
    font-size: 12px;
    text-align: left;
    margin-bottom: 8px;
}
.answer-wrapper {
    display:inline-block;
    position: relative;
    width: 222px;
    color: #b7bdc1;
}
.answer-wrapper:after {
    font-family: "Font Awesome 5 Free", sans-serif;
    content: '\f21b';
    position: absolute;
    left: 3px;
    font-size: 18px;
    top: 25px;
}
.answer-wrapper.wrong:before {
    font-family: "Font Awesome 5 Free", sans-serif;
    content: '\f057';
    position: absolute;
    right: -25px;
    bottom: 5px;
    font-size: 18px;
    color:red;
}
.answer-wrapper.right:before {
    font-family: "Font Awesome 5 Free", sans-serif;
    content: '\f058';
    position: absolute;
    right: -25px;
    bottom: 5px;
    font-size: 18px;
    color: green;
}
#answer{
    background-color: transparent;
    border: none;
    border-bottom: 2px solid white;
    padding: 0 0 6px 28px;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: white;
}
.answer-wrapper.wrong #answer {
    border-bottom-color: red;
}
.answer-wrapper.right #answer {
    border-bottom-color: green;
}
#answer::placeholder{
    color: #626a71;
}
#answer:focus{
    outline: none;
}

.solution{
    text-align: center;
    font-size: 20px;
    font-family: sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    width: -moz-fit-content;
    width: fit-content;
    margin: -150px auto auto;
    background-color: green;
    padding: 20px;
    border-radius: 18px;
}

.credits{
    font-family: sans-serif;
    text-align: center;
    color: gray;
}
.credits a{
    color: #ccc;
}
.credits b{
    color: white;
}
.credits .donate{
    margin: 20px 0;
}
.credits .coin{
    font-weight: bold;
    color: white;
}
.credits .wallet{
    font-family: monospace;
    font-size: 20px;
}

.hidden {
    display: none!important;
}