/* TOP AREA */

.top {
    text-transform: uppercase;
    color: var(--top);
    background-color: var(--bg-top);
}

.top > * {
    padding: 0;
}

.top > h1 {
    padding: 10px;
    text-align: left;
    width:300px;
}

.teams {
    flex: 2;
}

.menu {
    width:300px;
}

.teams a, .menu a {
    position: relative;
    display: inline-block;
    height:100%;
    margin: 0 10px;
    padding: 15px;
    text-decoration: none;
    border: 2px solid transparent;
}

.teams a:hover {
    color: var(--top);
    background-color: var(--bg-top);
}

.teams a[data-tid="1"] {
    color: #fff;
    border-color: #0099CC;
    background-color: #0099CC66;
}
.teams a[data-tid="2"] {
    color: #fff;
    border-color: #CC0000;
    background-color: #CC000066;
}
.teams a[data-tid="3"] {
    color: #fff;
    border-color: #CCCC00;
    background-color: #CCCC0066;
}
.teams a[data-tid="4"] {
    color: #fff;
    border-color: #9944CC;
    background-color: #9944CC66;
}

.teams a.active, .teams a:active {
    background-color: #00000033;
    box-shadow: 0px -10px 20px 15px #FFFFFF;
    /*transform: scale(1.5);*/
}

.teams a {
    width: 250px;
}

.teams a span {
    position: absolute;
    top:0;
    right:0;
    height: 100%;
    padding: 1em;
    background-color: #00000033;
}

/* GAME AREA */

.message, .game {
    width: 1200px;
    margin: 0 auto;
    padding: 10px;
    color: var(--color);
    background-color: var(--bg-color);
}

.message {
    padding-top: 5px;
    text-align: center;
    font-size: 2.2em;
}

.game {
    height: 100%;
    max-width: 100%;
}

article {
    margin-top: 1em;
    max-width: 100%;
    transition: all ease 1s;
}


article > h2 {
    margin:0 auto 10px auto;
    color: var(--color);
    background-color: var(--bg-color);
}

article > h2 button {
    margin: 0;
    width: 125px;
    font-size:1em;
}

article > h3 {
    margin:0 auto 10px auto;
    padding: 10px;
    color: var(--color);
    background-color: var(--bg-color);

}



/* CONFIG */

#config {
    margin-top: 1000%;
}

#config.active {
    margin-top:0;
}

#configTeams .row {
    justify-content: flex-end;
}

#config fieldset {
    width: 30%;
    margin: 1%;
}

#config input {
    padding: 5px;
    margin: 5px;
    border:1px solid #111;
}

.config-team {
    color: var(--color);
    background-color: var(--bg-color);
    margin: 5% 2%;
}

.config-team h3 {
    margin:0;
    padding: 0 5px;
    font-size: 0.8em;
}

.config-team input {
    display: inline-block;
    margin: 5px auto;
    width: 90%;
}


#quiz > * {
    padding: 0;
    width: 15%;
    margin: 1%;
}

#quiz > * > * {
    margin-bottom: 10px;
    color: var(--color);
    background-color: var(--bg-color);
}

#quiz h3, #quiz h4 {
    text-align: center;
}

#quiz div {
    padding: 0;
}


#quiz h3 {
    
}

#quiz h4 {
    display: block;
    margin: 0;
    padding: 15px;
    font-size: 1.5em;
    color: var(--color);
    background-color: var(--bg-color);
}

#quiz h4:hover {
    color: var(--bg-color);
    background-color: var(--color);
}

.category > div {
    opacity: 0;
    transition: all ease 6s;
    cursor: default;
}

.category > div.active {
    opacity: 1;
    cursor: pointer;
}


#currentQuestion {
    position:absolute;
    top:0;
    left:0;
    width:100vw;
    height: 100vh;
    overflow: hidden;
    color: #FFF;
    background-color: #000;
}

#currentQuestion > div {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 10%;
    text-align: center;
}

#currentQuestion h2 {
    font-size: 4em;
    margin-bottom: 1em;
}

#currentQuestion button {
    font-size: 2em;
}