/* ==========================================
   RESET
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Tahoma, Arial, sans-serif;
}

body{
    background:#bfeec7;
}

/* ==========================================
   CONTAINER
========================================== */

.container{

    width:1300px;

    margin:20px auto;

}

/* ==========================================
   CABEÇALHO
========================================== */

header{

    background:#009640;

    border:2px solid #006d2d;

    padding:12px;

}

.titulo{

    text-align:center;

    color:#ffff00;

    font-size:30px;

    font-weight:bold;

}

/* ==========================================
   TÍTULOS
========================================== */

.tituloSecao{

    background:#009640;

    color:#ffff00;

    padding:8px;

    font-size:18px;

    font-weight:bold;

    margin-bottom:10px;

}

/* ==========================================
   REFERÊNCIA
========================================== */

.referencia{

    background:#ffffff;

    border:1px solid #999;

    margin-top:15px;

    padding:10px;

}

#linhaReferencia{

    display:grid;

    grid-template-columns:repeat(10,55px);

    gap:5px;

}

.ref{

    width:55px;

    height:32px;

    border:1px solid #999;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f8f8f8;

    font-weight:bold;

}

/* ==========================================
   CONTEÚDO
========================================== */

.conteudo{

    display:flex;

    margin-top:20px;

}

.esquerda{

    width:450px;

}

.direita{

    flex:1;

    margin-left:40px;

}

/* ==========================================
   VOLANTE
========================================== */

#volante{

    display:grid;

    grid-template-columns:repeat(10,40px);

    gap:10px;

}

.bola{

    width:34px;

    height:34px;

    border-radius:50%;

    border:2px solid #222;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    font-size:13px;

    transition:.2s;

}

.bola:hover{

    background:#ffff00;

}

.bola.selecionada{

    background:#ff0000;

    color:#fff;

}

/* ==========================================
   BOTÃO
========================================== */

#limpar{

    margin-top:25px;

    width:120px;

    height:40px;

    font-size:16px;

    cursor:pointer;

}

/* ==========================================
   INPUTS
========================================== */

.entrada{

    display:flex;

    gap:10px;

    margin-top:20px;

}

.entrada input{

    width:60px;

    height:55px;

    text-align:center;

    font-size:24px;

    font-weight:bold;

}

.info{

    margin-top:20px;

    color:#444;

    line-height:22px;

}

/* ==========================================
   MATRIZ
========================================== */

.matriz{

    margin-top:25px;

}

#resultado{

    background:#ffffff;

    border:1px solid #999;

    padding:10px;

    min-height:400px;

}

/* ==========================================
   JOGOS
========================================== */

.jogo{

    display:flex;

    flex-wrap:wrap;

    gap:5px;

    border-bottom:1px dashed #ccc;

    margin-bottom:10px;

    padding-bottom:10px;

}

.numero{

    width:32px;

    height:26px;

    border:1px solid #aaa;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

    background:#f5f5f5;

}

/* ==========================================
   RESPONSIVO
========================================== */

@media(max-width:1200px){

.container{

    width:98%;

}

.conteudo{

    flex-direction:column;

}

.direita{

    margin-left:0;

    margin-top:20px;

}

}