@font-face {
    font-family: Covanro;
    src: url(fonts/Covanro.otf);

    font-family: NordBook;
    src: url(fonts/Nord-Book.ttf);

    font-family: NordLight;
    src: url(fonts/Nord-Light.ttf);

    font-family: QurovaLight;
    src: url(fonts/Qurova-Light.otf);
}

@media (min-aspect-ratio: 1/1) {

    * {
        margin: 0;
    }

    html {
        height: 100%;
    }

    body {

        background-color: rgb(10, 8, 15);
        background-image: linear-gradient(rgb(10, 8, 15), rgb(16, 12, 27));

        cursor: url('icons/cursor-normal.png'), auto;

        height: 100%;
        display: grid;
    }

    .nav-filtroTipos {
        display: grid;
        grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto;
        gap: 1.5vh;

        display: flex;
        align-items: center;
        justify-content: center;

        margin: 2.5vh 0 5vh 0;

        transform: 0.25s;
    }

    .div-filtroTipos {
        width: 12.5vh;
        height: 5vh;

        text-align: center;
        align-content: center;

        border-bottom: 0.1vh solid transparent;
        transition: all 0.3s;
        border-radius: 2.5vh;
        box-sizing: border-box;

        font-family: 'QurovaLight';
        color: #fff;
        font-size: 1.25vh;

        cursor: url('icons/cursor-click.png'), auto;
    }

    .div-filtroTipos:hover {
        border-bottom: 0.1vh solid currentColor;
        transform: scale(1.1);
    }

    .filtroNaoMetais:hover {
        border-color: #ff8000;
        color: #FF8000;
        box-shadow: #ff800050 inset 0 -1vh 1vh;
    }

    .filtroAlcalinoTerrosos:hover {
        border-color: #FFCC00;
        color: #FFCC00;
        box-shadow: #ff800050 inset 0 -0.5vw 0.5vw;
    }

    .filtroMetaisTransicao:hover {
        border-color: #FF4040;
        color: #FF4040;
        box-shadow: #FF404050 inset 0 -1vh 1vh;
    }

    .filtroMetaisPosTransicao:hover {
        border-color: #00EEFF;
        color: #00EEFF;
        box-shadow: #00EEFF50 inset 0 -1vh 1vh;
    }

    .filtroSemimetais:hover {
        border-color: #00FF9D;
        color: #00FF9D;
        box-shadow: #00FF9D50 inset 0 -1vh 1vh;
    }

    .filtroAmetais:hover {
        border-color: #4BFF33;
        color: #4BFF33;
        box-shadow: #4BFF3350 inset 0 -1vh 1vh;
    }

    .filtroGasesNobres:hover {
        border-color: #8800FF;
        color: #8800FF;
        box-shadow: #8800FF50 inset 0 -1vh 1vh;
    }

    .filtroPropriedadesDesconhecidas:hover {
        border-color: #D5D5D5;
        color: #D5D5D5;
        box-shadow: #D5D5D550 inset 0 -1vh 1vh;
    }

    .filtroLantânidos:hover {
        border-color: #FF51CB;
        color: #FF51CB;
        box-shadow: #FF51CB50 inset 0 -1vh 1vh;
    }

    .filtroActinídeos:hover {
        border-color: #DF61FF;
        color: #DF61FF;
        box-shadow: #DF61FF50 inset 0 -1vh 1vh;
    }

    .filtroTodos:hover {
        border-color: #ffffff;
        color: #ffffff;
        box-shadow: #ffffff50 inset 0 -1vh 1vh;
    }


    #filtro-NaoMetais:checked~.section-tabelaPeriodica .table-elemento:not(.tipoAlcalinos),
    #filtro-AlcalinoTerrosos:checked~.section-tabelaPeriodica .table-elemento:not(.tipoAlcalinoTerrosos),
    #filtro-MetaisTransicao:checked~.section-tabelaPeriodica .table-elemento:not(.tipoMetaisTransicao),
    #filtro-MetaisPosTransicao:checked~.section-tabelaPeriodica .table-elemento:not(.tipoMetaisPosTransicao),
    #filtro-Semimetais:checked~.section-tabelaPeriodica .table-elemento:not(.tipoSemimetais),
    #filtro-Ametais:checked~.section-tabelaPeriodica .table-elemento:not(.tipoAmetais),
    #filtro-GasesNobres:checked~.section-tabelaPeriodica .table-elemento:not(.tipoGasesNobres),
    #filtro-PropriedadesDesconhecidas:checked~.section-tabelaPeriodica .table-elemento:not(.tipoPropriedadesDesconhecidas),
    #filtro-Lantânidos:checked~.section-tabelaPeriodica .table-elemento:not(.tipoLantânidos),
    #filtro-Actinídeos:checked~.section-tabelaPeriodica .table-elemento:not(.tipoActinídeos) {
        filter: brightness(25%);
    }

    #filtro-NaoMetais:checked~.section-tabelaPeriodica .table-grupo:not(.tipoAlcalinos),
    #filtro-AlcalinoTerrosos:checked~.section-tabelaPeriodica .table-grupo:not(.tipoAlcalinoTerrosos),
    #filtro-MetaisTransicao:checked~.section-tabelaPeriodica .table-grupo:not(.tipoMetaisTransicao),
    #filtro-MetaisPosTransicao:checked~.section-tabelaPeriodica .table-grupo:not(.tipoMetaisPosTransicao),
    #filtro-Semimetais:checked~.section-tabelaPeriodica .table-grupo:not(.tipoSemimetais),
    #filtro-Ametais:checked~.section-tabelaPeriodica .table-grupo:not(.tipoAmetais),
    #filtro-GasesNobres:checked~.section-tabelaPeriodica .table-grupo:not(.tipoGasesNobres),
    #filtro-PropriedadesDesconhecidas:checked~.section-tabelaPeriodica .table-grupo:not(.tipoPropriedadesDesconhecidas),
    #filtro-Lantânidos:checked~.section-tabelaPeriodica .table-grupo:not(.tipoLantânidos),
    #filtro-Actinídeos:checked~.section-tabelaPeriodica .table-grupo:not(.tipoActinídeos) {
        filter: brightness(25%);
    }

    /*



    #filtro-NaoMetais:hover~.section-tabelaPeriodica .table-elemento:not(.tipoAlcalinos),
    #filtro-AlcalinoTerrosos:hover~.section-tabelaPeriodica .table-elemento:not(.tipoAlcalinoTerrosos),
    #filtro-MetaisTransicao:hover~.section-tabelaPeriodica .table-elemento:not(.tipoMetaisTransicao),
    #filtro-MetaisPosTransicao:hover~.section-tabelaPeriodica .table-elemento:not(.tipoMetaisPosTransicao),
    #filtro-Semimetais:hover~.section-tabelaPeriodica .table-elemento:not(.tipoSemimetais),
    #filtro-Ametais:hover~.section-tabelaPeriodica .table-elemento:not(.tipoAmetais),
    #filtro-GasesNobres:hover~.section-tabelaPeriodica .table-elemento:not(.tipoGasesNobres),
    #filtro-PropriedadesDesconhecidas:hover~.section-tabelaPeriodica .table-elemento:not(.tipoPropriedadesDesconhecidas),
    #filtro-Lantânidos:hover~.section-tabelaPeriodica .table-elemento:not(.tipoLantânidos),
    #filtro-Actinídeos:hover~.section-tabelaPeriodica .table-elemento:not(.tipoActinídeos),
    #filtro-NaoMetais:hover~.section-tabelaPeriodica .tipoAlcalinos,
    #filtro-AlcalinoTerrosos:hover~.section-tabelaPeriodica .tipoAlcalinoTerrosos,
    #filtro-MetaisTransicao:hover~.section-tabelaPeriodica .tipoMetaisTransicao,
    #filtro-MetaisPosTransicao:hover~.section-tabelaPeriodica .tipoMetaisPosTransicao,
    #filtro-Semimetais:hover~.section-tabelaPeriodica .tipoSemimetais,
    #filtro-Ametais:hover~.section-tabelaPeriodica .tipoAmetais,
    #filtro-GasesNobres:hover~.section-tabelaPeriodica .tipoGasesNobres,
    #filtro-PropriedadesDesconhecidas:hover~.section-tabelaPeriodica .tipoPropriedadesDesconhecidas,
    #filtro-Lantânidos:hover~.section-tabelaPeriodica .tipoLantânidos,
    #filtro-Actinídeos:hover~.section-tabelaPeriodica .tipoActinídeos {
        filter: brightness(100%);
    }

*/

    #filtro-NaoMetais:checked~.nav-filtroTipos .filtroNaoMetais {
        color: #FF8000;
        border-bottom: 0.1vh solid #FF8000;
        transform: scale(1.1);
    }

    #filtro-AlcalinoTerrosos:checked~.nav-filtroTipos .filtroAlcalinoTerrosos {
        color: #FFCC00;
        border-bottom: 0.1vh solid #FFCC00;
        transform: scale(1.1);
    }

    #filtro-MetaisTransicao:checked~.nav-filtroTipos .filtroMetaisTransicao {
        color: #FF4040;
        border-bottom: 0.1vh solid #FF4040;
        transform: scale(1.1);
    }

    #filtro-MetaisPosTransicao:checked~.nav-filtroTipos .filtroMetaisPosTransicao {
        color: #00EEFF;
        border-bottom: 0.1vh solid #00EEFF;
        transform: scale(1.1);
    }

    #filtro-Semimetais:checked~.nav-filtroTipos .filtroSemimetais {
        color: #00FF9D;
        border-bottom: 0.1vh solid #00FF9D;
        transform: scale(1.1);
    }

    #filtro-Ametais:checked~.nav-filtroTipos .filtroAmetais {
        color: #4BFF33;
        border-bottom: 0.1vh solid #4BFF33;
        transform: scale(1.1);
    }

    #filtro-GasesNobres:checked~.nav-filtroTipos .filtroGasesNobres {
        color: #8800FF;
        border-bottom: 0.1vh solid #8800FF;
        transform: scale(1.1);
    }

    #filtro-PropriedadesDesconhecidas:checked~.nav-filtroTipos .filtroPropriedadesDesconhecidas {
        color: #D5D5D5;
        border-bottom: 0.1vh solid #D5D5D5;
        transform: scale(1.1);
    }

    #filtro-Lantânidos:checked~.nav-filtroTipos .filtroLantânidos {
        color: #FF51CB;
        border-bottom: 0.1vh solid #FF51CB;
        transform: scale(1.1);
    }

    #filtro-Actinídeos:checked~.nav-filtroTipos .filtroActinídeos {
        color: #DF61FF;
        border-bottom: 0.1vh solid #DF61FF;
        transform: scale(1.1);
    }

    #filtro-NaoMetais:checked~.section-tabelaPeriodica .tipoAlcalinos {
        box-shadow: #ff800050 inset 0 -2vh 2.5vh;
    }

    #filtro-AlcalinoTerrosos:checked~.section-tabelaPeriodica .tipoAlcalinoTerrosos {
        box-shadow: #FFCC0033 inset 0 -2vh 2.5vh;
    }

    #filtro-MetaisTransicao:checked~.section-tabelaPeriodica .tipoMetaisTransicao {
        box-shadow: #FF404050 inset 0 -2vh 2.5vh;
    }

    #filtro-MetaisPosTransicao:checked~.section-tabelaPeriodica .tipoMetaisPosTransicao {
        box-shadow: #00EEFF33 inset 0 -2vh 2.5vh;
    }

    #filtro-Semimetais:checked~.section-tabelaPeriodica .tipoSemimetais {
        box-shadow: #00FF9D33 inset 0 -2vh 2.5vh;
    }

    #filtro-Ametais:checked~.section-tabelaPeriodica .tipoAmetais {
        box-shadow: #4BFF3333 inset 0 -2vh 2.5vh;
    }

    #filtro-GasesNobres:checked~.section-tabelaPeriodica .tipoGasesNobres {
        box-shadow: #8800FF33 inset 0 -2vh 2.5vh;
    }

    #filtro-PropriedadesDesconhecidas:checked~.section-tabelaPeriodica .tipoPropriedadesDesconhecidas {
        box-shadow: #D5D5D533 inset 0 -2vh 2.5vh;
    }

    #filtro-Lantânidos:checked~.section-tabelaPeriodica .tipoLantânidos {
        box-shadow: #DF61FF33 inset 0 -2vh 2.5vh;
    }

    #filtro-Actinídeos:checked~.section-tabelaPeriodica .tipoActinídeos {
        box-shadow: #DF61FF33 inset 0 -2vh 2.5vh;
    }

    .section-tabelaPeriodica {
        width: 100%;

        position: relative;
    }

    table {
        border-spacing: 1vh;

        margin-left: auto;
        margin-right: auto;
    }

    .table-espaco {
        height: 1.5vh;
    }

    .table-vazio {
        width: 7.5vh;
        height: 7.5vh;
    }

    .table-elemento {
        transform: scale(1);
        width: 7.5vh;
        height: 7.5vh;

        border: 0.1vh solid white;
        border-radius: 0.75vh;
        box-sizing: border-box;

        color: white;
        padding: 0.75vh;

        /* background-color: rgb(10, 8, 15, 0); */

        backdrop-filter: blur(1px);

        transition: 0.3s linear;

        position: relative;
        z-index: 1;

        aspect-ratio: 1/1;

        cursor: url('icons/cursor-click.png'), auto;

        box-shadow: color-mix(in srgb, currentColor 0%, transparent) inset 0 -2vh 2.5vh, 0 0 2.5vh 1vh rgb(10, 8, 15, 0);
    }

    .table-elemento:hover {
        transform: scale(1.75);
        border-radius: calc(0.75vh/1.25);
        box-shadow: color-mix(in srgb, currentColor 25%, transparent) inset 0 -2vh 2.5vh, 0 0 2.5vh 1vh rgb(10, 8, 15);
        z-index: 2;

        /*  background-color: rgb(10, 8, 15); */

        backdrop-filter: blur(2px);
    }

    .table-elemento h1 {
        font-family: 'Covanro';
        font-size: 2vh;

        margin-bottom: 0.25vh;

        position: relative;

        text-align: center;
    }

    .table-elemento h2 {
        font-family: 'QurovaLight';
        font-size: 0.75vh;

        margin-bottom: 0.5vh;

        position: relative;

        text-align: center;
    }

    .table-elemento h3 {
        font-family: 'Nord';
        font-weight: 300;
        font-size: 0.6vh;

        position: relative;

        text-align: center;
    }

    .table-elemento h4 {
        font-family: 'Nord';
        font-size: 0.75vh;

        position: relative;

        margin-bottom: 0.5vh;
    }

    .table-grupo {
        transform: scale(1);
        width: 7.5vh;
        height: 7.5vh;

        border: 0.1vh solid white;
        border-radius: 0.75vh;
        box-sizing: border-box;

        color: white;
        padding: 0.75vh;

        /* background-color: rgb(10, 8, 15, 0); */

        backdrop-filter: blur(1px);

        transition: 0.3s linear;

        position: relative;
        z-index: 1;

        aspect-ratio: 1/1;

        cursor: url('icons/cursor-normal.png'), auto;

        box-shadow: color-mix(in srgb, currentColor 0%, transparent) inset 0 -2vh 2.5vh, 0 0 2.5vh 1vh rgb(10, 8, 15, 0);
    }

    .table-grupo h1 {
        font-family: 'Covanro';
        font-size: 2vh;

        margin-bottom: 0.25vh;

        position: relative;

        text-align: center;
    }

    .tipoAlcalinos {
        border-color: #FF8000;
        color: #FF8000;
    }

    .tipoAlcalinoTerrosos {
        border-color: #FFCC00;
        color: #FFCC00;
    }

    .tipoMetaisTransicao {
        border-color: #FF4040;
        color: #FF4040;
    }

    .tipoMetaisPosTransicao {
        border-color: #00EEFF;
        color: #00EEFF;
    }

    .tipoSemimetais {
        border-color: #00FF9D;
        color: #00FF9D;
    }

    .tipoAmetais {
        border-color: #4BFF33;
        color: #4BFF33;
    }

    .tipoGasesNobres {
        border-color: #8800FF;
        color: #8800FF;
    }

    .tipoPropriedadesDesconhecidas {
        border-color: #D5D5D5;
        color: #D5D5D5;
    }

    .tipoLantânidos {
        border-color: #FF51CB;
        color: #FF51CB;
    }

    .tipoActinídeos {
        border-color: #DF61FF;
        color: #DF61FF;
    }

    .classeLantânido,
    .classeActinídeos {
        opacity: 0.75;
        border: 0;
    }

    .classeLantânido h1,
    .classeActinídeos h1 {
        font-family: 'Nord';
        font-weight: 300;
        font-size: 1.6vh;

        text-align: center;
    }

    /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /* Menu de Informações */

    div {
        width: auto;
        height: auto;
    }

    #menu {
        width: 50vh;
        height: auto;

        position: fixed;
        bottom: 2.5vh;
        left: 2.5vh;

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 2.5vh;
        grid-row-gap: 0.5vh;

        padding: 2vh 1vh 0.5vh 1vh;

        opacity: 0;

        max-width: 25%;

        background-color: rgb(10, 8, 15, 0.5);
        box-shadow: color-mix(in srgb, #fff 25%, transparent) inset 0 -2vh 2.5vh, 0 0 2.5vh 1vh rgb(10, 8, 15);

        backdrop-filter: blur(10px);

        border-radius: 15vh;
        border-bottom: #fff solid 0.25vh;

        transition: 0.5s;
        z-index: 30;
    }

    #div1 {
        grid-area: 1 / 1 / 2 / 3;
        text-align: center;
        display: flex;
        align-items: end;
        justify-content: center;
        height: auto;
    }

    #div2 {
        grid-area: 2 / 1 / 3 / 2;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: right;
        height: auto;
    }

    #div3 {
        grid-area: 2 / 2 / 3 / 3;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: left;
        height: auto;
    }

    #div4 {
        grid-area: 3 / 1 / 4 / 2;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: right;
        height: auto;
    }

    #div5 {
        grid-area: 3 / 2 / 4 / 3;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: left;
        height: auto;
    }

    #div6 {
        grid-area: 4 / 1 / 5 / 3;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
    }

    #menu h1 {
        font-family: 'Covanro';
        font-size: 3.5vh;

        color: #fff;

        margin-bottom: 0.5vh;
    }

    #menu h2 {
        font-family: 'QurovaLight';
        font-size: 1.5vh;
        font-weight: 100;

        color: #fff;

        height: auto;
    }

    #menu h3 {
        font-family: 'Nord';
        font-size: 1.5vh;
        font-weight: 100;

        color: #fff;

        height: auto;
    }

    #menu.ativo {
        opacity: 1;
        z-index: 3;

    }

    .legendaMenu {
        display: flex;
        align-items: baseline;
        gap: 0.5vh;
    }

    .table-elemento.ativo {
        transform: scale(3);
        border-radius: calc(0.75vh/2.5);
        box-shadow: color-mix(in srgb, currentColor 25%, transparent) inset 0 -2vh 2.5vh, 0 0 2.5vh 1vh rgb(10, 8, 15);
        z-index: 3;

        /*  background-color: rgb(10, 8, 15, 0.5); */

        cursor: url('icons/cursor-normal.png'), auto;

        backdrop-filter: blur(1.5px);
    }

    .table-elemento.ativo.tipoActinídeos {
        transform: scale(3) translateY(-1.25vh) !important;
    }
}

.conteudoElemento {
    justify-content: center;
    align-items: center;
}

.Eletroesfera {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    place-items: center;

    z-index: -5;
}

@keyframes rotacaoCamada {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.svgEletrosfera {
    position: absolute;
    width: 7.5vh;
    height: 7.5vh;
}

.svgEletrosfera g.eletron {
    transform-origin: center;
    opacity: 0;
}

.table-elemento.ativo .svgEletrosfera g.eletron {
    animation: rotacaoCamada linear infinite;
    opacity: 0.5;
    transition: 2.5s;
}

/*animation: rotacaoCamada linear infinite; */

.table-elemento.ativo .svgEletrosfera g.eletron:nth-child(1) {
    animation-duration: 30s;
}

.table-elemento.ativo .svgEletrosfera g.eletron:nth-child(2) {
    animation-duration: 27.5s;
}

.table-elemento.ativo .svgEletrosfera g.eletron:nth-child(3) {
    animation-duration: 25s;
}

.table-elemento.ativo .svgEletrosfera g.eletron:nth-child(4) {
    animation-duration: 22.5s;
}

.table-elemento.ativo .svgEletrosfera g.eletron:nth-child(5) {
    animation-duration: 20s;
}

.table-elemento.ativo .svgEletrosfera g.eletron:nth-child(6) {
    animation-duration: 17.5s;
}

.table-elemento.ativo .svgEletrosfera g.eletron:nth-child(7) {
    animation-duration: 15s;
}

.fadeInSite {
    position: absolute;
    inset: 0;
    opacity: 1;
    animation: fadeIn 3.75s ease forwards;
    width: 100%;
    height: 100%;
}

@keyframes fadeIn {
    from {
        opacity: 1;
        z-index: 10;
        background: rgb(0, 0, 0);
    }

    to {
        opacity: 0;
        z-index: -10;
        background: rgb(10, 8, 15);
    }
}