@import 'config';
@import 'funcoes_auxiliares.scss';


body {
    background: black;
    margin: 0;
    padding: 0;
    font-family: $fonte;
}

#gameArea{
    > div{
        pointer-events:none!important;
    }
}

#glossarioArea{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba($corPreto,.6);
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 20;
    
    display: none;
    
    
    .janela{
        background-color: #07989B;
        border-radius: 10px;
        border: 10px solid #9362C4;
        width: 100%;
        height: 100%;
        max-width: 800px;
        max-height: 600px;
        padding: 15px;
        
        overflow: auto;
    }
    
    table{
        width: 100%;
        border-collapse: collaplse;
        
        thead{
            th{
                font-weight: 700;
                background-color: rgba($corBranco,.8);
                padding: 5px;
            }
        }
        
        td{
            color: $corPreto;
            padding: 5px;
            background-color: rgba($corBranco,0.2);
        }
        td:nth-child(1){
            font-weight: 700;
            min-width: 250px;
        }
        
        tr:nth-child(even) td{
            background-color: rgba($corBranco,0.5);
        }
        
        tr.active td{
            font-weight: 700;
            color: $corBranco;
            background-color: #9362C4;
        }
    }
}
#glossarioArea.open{
    display: flex; 
}

#levelArea{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: $corPreto;
    z-index: 10;
    display: none;
     
    iframe{
        position: relative;
        z-index: 1;
        border: 0px;
        width: 100%;
        height: 100%;
    }
    
    .btQuiz,
    .btClose{
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 2;
        padding: 5px 10px;
        border-radius: 8px;
        background-color: $corBranco;
        color: $corPreto; 
        cursor: pointer;
    }
    
    .btQuiz{
        display: none;
        right: 50px;
    }
}


@import 'formularios';