@import url("../lib/default.css");
.mybutton {
    background-color: var(--main-color);
    width:25%;
    font-size:24px;
}
#uber {
    display:flex;
    flex-direction:column;
    align-items: center;
}
#main {
    display:inline-block;
    position:relative;
    text-align:center;
    width:400px;
    border: 1px solid var(--text-color);
    padding-bottom:10px;
    margin-bottom: 20px;
}
.score {
    background-color: var(--main-color);
    display:inline-block;
    color: var(--bg-color);
    width: 100%;
    padding: 10px 0px;
}
.numbers>span:first-child {color: var(--right-color);}
.question {font-size: 150%;}
.reaction {font-size: 200%;}
.reaction.right {color: var(--right-color);}
.reaction.wrong {color: var(--wrong-color);}
#help {margin: auto; width: 550px;height:400px;
       position:relative;margin-left:5px;}
body {text-align:left;}
#help img {width:500px;margin:auto;margin-top:40px;}

#help .header {
    position:absolute;
    cursor: pointer;
    z-index: 1;
    display:inline-block;
    color: var(--bg-color);
}
#help .arrow {
    font-size: 300%;
    top: -18px;
    z-index: 3;
}
#help .title {
    font-size: 24px;
    width:100%;
    z-index:1;
    top:0px;
    margin:0px;
    text-align:center;
}

.mybutton {width:150px;}

.hatted {
    display: inline;
    font-style: italic;
    position: relative;
}
.hatted:after {
    content: "^";
    position: absolute;
    left: -0.05em;
    top: -0.2em;
}

#units {
    list-style-type: none;
    margin:-5px 0px 0 20px;
    padding:0;
    display: inline-block;
}
#units li {
    float: left;
    position: relative;
    margin: 0 5px 0 0;
    width: 80px;
    height: 35px;
    text-align: center;
}
#units label,#units input {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

#units input {opacity:0.01; z-index:100;}
#units input:checked+label {
    background: var(--main-color);
    color: var(--accent-color);
}
#units label {
    cursor: pointer;
    z-index: 90;
    padding: 5px;
    padding-bottom:1px;
    border: 1px solid #CCC;}
#units label:hover {background: #DDD;}