:root {
    --cor-autoescola: #FFE500;
    --cor-liberdade: #00FFFF;
    --cor-adrenalina: #E036E3;
    --cor-limitada: red;
    --cor-predominante: black;
    --cor-contrastante: white;

    --font-title: 'Russo One', sans-serif;
}

.container-floating-top {
    position: fixed;
    z-index: 100;
    top: 10px;
    right: 10px;
}

.container-floating-bottom {
    position: fixed;
    z-index: 100;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

button{
    cursor: pointer;
}



/**Styles**/
.style-sombra-adrenalina{
    box-shadow: 10px 10px 0 var(--cor-adrenalina);
}
.style-rebelde-r{
     transform: rotate(2deg);
}
.style-rebelde-l{
     transform: rotate(-2deg);
}

.btn-sombra-adrenalina{
    box-shadow: 6px 6px 0 var(--cor-adrenalina);
}
.btn-autoescola, .btn-liberdade, .btn-adrenalina, .btn-dark, .btn-desabilitado{
    border-radius: 5px;
    border: 2px solid var(--cor-predominante);
    padding: 10px;

    width: fit-content;
    height: fit-content;

    font-family: var(--font-title);
    font-weight: 400;
    font-size: 0.90rem;

    text-align: center;
    justify-content: center;
    text-decoration: none;

    margin: 10px 10px;
}

.btn-autoescola{
    background-color: var(--cor-autoescola);
}
.btn-liberdade{
    background-color: var(--cor-liberdade);
}
.btn-adrenalina{
    background-color: var(--cor-adrenalina);
}
.btn-dark{
    background-color: var(--cor-predominante);
}
.btn-desabilitado{
    background-color: grey;
}


.style-autoescola, .body-autoescola{
    background-color: var(--cor-autoescola);
    color: var(--cor-predominante);
}

.style-dark-autoescola, .body-dark-autoescola {
  background-color: var(--cor-predominante);
  color: var(--cor-autoescola);
}

.style-liberdade, .body-liberdade{
    background-color: var(--cor-liberdade);
    color: var(--cor-predominante);
}

.style-adrenalina, .body-adrenalina{
    background-color: var(--cor-adrenalina);
    color: var(--cor-predominante);
}

.style-dark-adrenalina, .body-dark-adrenalina{
    background-color: var(--cor-predominante);
    color: var(--cor-adrenalina);
}
.style-dark, .body-dark {
    background-color: var(--cor-predominante);
    color: var(--cor-contrastante);
}




.style-autoescola, .style-liberdade, .style-adrenalina, .style-dark{
    border-radius: 20px;
    border: 3px solid var(--cor-predominante);
}
.style-dark-autoescola{
    border-radius: 20px;
    border: 3px solid var(--cor-autoescola);
}
.style-dark-liberdade{
    border-radius: 20px;
    border: 3px solid var(--cor-liberdade);
}
.style-dark-adrenalina{
    border-radius: 20px;
    border: 3px solid var(--cor-adrenalina);
}

/**********/

/** TABLE **/
.table-autoescola {
    border-collapse: separate;
    /* permite espaçamento entre linhas */
    border-spacing: 0px 12px;
    /* gavetas separadas */
    width: 100%;
}

.table-autoescola th {
    font-weight: 600;
    opacity: .85;
    padding: 10px 14px;
}

.table-autoescola tr {
    display: grid;
    grid-template-columns: 1fr 4fr 4fr 2fr;
}

.table-autoescola tbody tr {

    background: var(--cor-autoescola);
    box-shadow:
        4px 4px var(--cor-predominante),
        -4px -4px var(--cor-adrenalina);

    padding: 6px 0px;
    margin: 12px 0;
}

.table-autoescola tbody td {
    text-align: center;
}

/*****************/


@media(orientation: landscape) and (pointer: fine) {

    .container-floating-top {
        right: 30px;
    }

}


@media(orientation: landscape) {

    
    .container-l-side {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: start;
        gap: 10px;
    }

    .container-l-side>* {
        flex: 1;
    }

    .container-l-autoescola {
        border-radius: 20px;
        border: 5px solid var(--cor-predominante);
        background-color: var(--cor-autoescola);
    }

    .hidden-landscape {
        position: fixed !important;
        /* tira do fluxo */
        z-index: -5;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        /* impede scroll */
        clip: rect(0, 0, 0, 0);
        /* recorta */
        white-space: nowrap;
        /* evita quebra de linha */
        border: 0;
    }

    .container-full-body {
        width: 100%;
        height: 50vh;
        margin-top: 25vh;
        box-sizing: border-box;
    }
}

/*MOBILE LANDSCAPE*/
@media(max-width: 900px) and (orientation: landscape) {
    .viewer-off:not(.desktop-landscape) {
        position: fixed !important;
        z-index: -5;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
        box-sizing: unset;
    }
    .container,
    .container-l,
    .container-l-side,
    .container-l-autoescola,
    .container-l-adrenalina {
        width: 70%;
        max-width: 500px;
        margin: 10px auto;
        padding: 10px;
        box-sizing: border-box;
    }

}

/*DESKTOP LANDSCAPE*/
@media(min-width: 900px) and (orientation: landscape) {

    .viewer-off:not(.mobile-landscape) {
        position: fixed !important;
        z-index: -5;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
        box-sizing: unset;
    }
    .container,
    .container-l,
    .container-l-side,
    .container-l-autoescola,
    .container-l-adrenalina {
        width: 80%;
        max-width: 900px;
        margin: 10px auto;
        padding: 10px;
        box-sizing: border-box;
    }
}

@media(orientation: portrait) {

    .container,
    .container-p,
    .container-p-autoescola,
    .container-p-adrenalina,
    .container-p-side {
        width: 95%;
        max-width: 720px;
        padding: 20px;
        margin: 10px auto;
        box-sizing: border-box;
    }
    .space-vertical-p{
        margin-top: 15vh;
        margin-bottom: 15vh;
    }

    .container-p-autoescola,
    .style-p-autoescola {
        border-radius: 20px;
        border: 3px solid var(--cor-predominante);
        background-color: var(--cor-autoescola);
    }

    .container-p-adrenalina,
    .style-p-adrenalina {
        border-radius: 20px;
        border: 3px solid var(--cor-predominante);
        background-color: var(--cor-adrenalina);
    }

    .container-p-dark-adrenalina,
    .style-p-dark-adrenalina {
        border-radius: 20px;
        border: 3px solid var(--cor-adrenalina);
        background-color: var(--cor-predominante);
        color: var(--cor-adrenalina);
    }

    .container-p-side {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: start;
        gap: 5px;
    }

    .hidden-portrait {
        position: fixed !important;
        /* tira do fluxo */
        z-index: -5;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        /* impede scroll */
        clip: rect(0, 0, 0, 0);
        /* recorta */
        white-space: nowrap;
        /* evita quebra de linha */
        border: 0;
    }

    .container-p-floating-top,
    .container-p-floating-bottom {
        position: fixed;
        z-index: 2;
        padding: 5px 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.75);
    }

    .container-p-floating-top {
        top: 10px;
        left: 10px;
        right: 10px;
    }

    .container-p-floating-bottom {
        bottom: 10px;
        left: 10px;
        right: 10px;
    }

    .container-full-body {
        padding: 20px 10px;
        width: 100%;
        margin-top: 25vh;
        box-sizing: border-box;
    }

}