* {
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

:root {
    --color1: rgb(136, 255, 0);
    --branco: white;
}

.yellow_text {
    --branco: yellow;
}

.dark_text {
    --branco: black;
}

html {
    scroll-behavior: smooth;
}

/*Inicio do header e as opcoes de escola do usuário*/
header {
    background-image: url(https://i.redd.it/yvyj7hwc4pv31.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

.red_header {
    background-image: url(https://wallpapers.com/images/hd/outer-space-red-4k-5zkp4cz70pjaxdfx.jpg);
}

.dark_header {
    background-image: url(https://wallpapercat.com/w/full/5/c/0/2117697-3840x2160-desktop-4k-dark-wallpaper.jpg);
}

.parte_superior_opcoes {
    padding: 15px 20px;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.icone_canto {
    transition: 0.5s;
    font-size: 40px;
    color: white;
    filter: drop-shadow(0 0 10px white);
}

.opcoes_header {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.links_header {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    filter: drop-shadow(0 0 5px white);
    text-decoration: none;
    color: var(--branco);
}

.tit {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 25vh;
}

.texto_tit {
    text-decoration: none;
    font-size: 60px;
    color: var(--branco);
    filter: drop-shadow(0 0 5px white);
}

.start {
    transition: 0.3s;
    color: var(--branco);
    filter: drop-shadow(0 0 5px rgb(0, 0, 0));
    display: flex;
    padding: 4px;
    font-size: 30px;
    border-radius: 50%;
    border: 2px solid;
    animation: botao_start 2s linear infinite;
}

@keyframes botao_start {
    0% {
        color: white;
    }

    50% {
        color: black;
    }

    100% {
        color: white;
    }
}

.start:hover {
    transition: 0.3s;
    background: rgba(0, 0, 0, 0.274);
    filter: drop-shadow(0 0 5px black);
    border: 2px solid black;
    color: rgb(255, 255, 255);
}

/*Caixas de informações*/
.nav_sections {
    background: url(https://wallpapers.com/images/high/blue-and-purple-background-qzpfve3ir237isr5.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.div_section1 {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.red {
    background-image: url(https://wallpaperbat.com/img/450093-red-phone-wallpaper-top-free-red-phone-background.jpg);
}

.dark {
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSWEcABCs6DD0sEmONfpnKMjsS2FtaCa7U3Pg&s);
}

.blur {
    backdrop-filter: blur(10px);
}

.caixa {
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 2px solid rgba(255, 0, 0, 0);
    padding: 20px;
    border-radius: 10px;
    width: 250px;
    margin: auto;
    height: 120px;
    box-shadow: 0 0 20px black;
    backdrop-filter: blur(20px);
}

.caixa:hover {
    transition: 0.3s;
    box-shadow: 0 0 10px rgb(255, 255, 255);
}

.parte_superior {
    display: flex;
    justify-content: space-between;
}

.icon_dev {
    filter: drop-shadow(0 0 4px rgb(255, 255, 255));
    display: flex;
    gap: 10px;
    font-size: 25px;
}

.font_icon_caixa {
    font-size: 25px;
    color: var(--color1);
    filter: drop-shadow(0 0 5px rgb(0, 0, 0));
}

.section_caixas {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    padding: 20px;
}

.cor_fonte_caixa {
    color: var(--branco);
    filter: drop-shadow(0 0 10px black);
}

.cor_branca_texto {
    color: var(--branco);
}

.caixa_de_texto_inicial {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 60%;
    margin: auto auto;
    align-items: center;
}

.animacao_cor {
    filter: drop-shadow(0 0 5px black);
    animation: animar 10s linear infinite;
}

@keyframes animar {
    0% {
        color: rgb(255, 255, 58);
    }

    25% {
        color: rgb(81, 255, 58);
    }

    50% {
        color: rgb(58, 166, 255);
    }

    75% {
        color: rgb(133, 58, 255);
    }

    100% {
        color: rgb(255, 255, 58);
    }
}

/*Botões de interatividade*/
.caixa_botoes {
    box-shadow: 0 0 10px black;
    padding: 10px 10px;
    backdrop-filter: blur(10px);
    border-radius: 30px;
    border: 2px solid rgba(255, 0, 0, 0);
    filter: drop-shadow(0 0 5px black);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: auto auto;
    margin: auto auto;
}

.botao_inicio {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 6px;
    border-radius: 50%;
    border: 2px solid white;
}

/*Parte do conteúdo adicional*/
.imagem_1 {
    width: 200px;
    height: 200px;
}

.nav_sections_2 {
    padding: 20px 20px;
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 0, 0, 0);
    border-radius: 20px;
    box-shadow: 0 0 20px black;
    filter: drop-shadow(0 0 10px black);
    display: flex;
    width: 90%;
    flex-wrap: wrap;
}

.ul_1 {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    justify-content: center;
    gap: 10px;
}

.tit_lista_1 {
    width: 2 100%;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lista_info_1 {
    justify-content: center;
    padding: 20px 40px;
    width: auto auto;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    align-items: center;
}

.info_texto_1 {
    display: flex;
    gap: 10px;
    align-items: center;
    filter: drop-shadow(0 0 5px black);
}

.icone_tamanho_1 {
    font-size: 25px;
}

.espaco_1 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.imagem_2 {
    filter: drop-shadow(0 0 5px rgb(255, 255, 255));
    width: 100px;
    height: 100px;
}

.caixa_1 {
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: 0.3s;
    box-shadow: 0 0 20px black;
    border-radius: 15px;
    width: 40%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.caixa_1:hover {
    transition: 0.3s;
    box-shadow: 0 0 5px whitesmoke;
}

.section-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.filtro_preto {
    filter: drop-shadow(0 0 5px black);
}

/*Mensagem*/
.botoes_caixa_mensagem {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.input_1 {
    background: linear-gradient(to right, rgba(153, 0, 255, 0.5), rgba(0, 0, 0, 0));
    padding: 5px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 0 10px black;
    color: var(--branco);
}

input::placeholder {
    color: rgb(51, 255, 0);
}

.caixa_mensagem {
    backdrop-filter: blur(10px);
    border: none;
    padding: 30px;
    box-shadow: 0 0 20px black;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    background: linear-gradient(0deg, rgba(119, 0, 255, 0.301), rgba(153, 0, 255, 0));
}

.botao_2 {
    transition: 0.3s;
    font-size: 20px;
    padding: 6px;
    display: flex;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0);
    color: var(--branco);
    border: 2px solid white;
    filter: drop-shadow(0 0 5px rgb(255, 255, 255));
}

.enviar:hover {
    transition: 0.3s;
    color: rgb(81, 255, 0);
    border: 2px solid rgb(60, 255, 0);
    filter: drop-shadow(0 0 5px rgb(30, 255, 0));
}

.fechar:hover {
    transition: 0.3s;
    color: rgb(255, 0, 0);
    border: 2px solid rgb(255, 0, 0);
    filter: drop-shadow(0 0 5px rgb(255, 0, 0));
}

.lado_mensagem {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 60%;
    border: 2px solid rgba(255, 0, 0, 0);
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 20px black;
    backdrop-filter: blur(10px);
}

.ultima_caixa {
    justify-content: center;
    display: flex;
    gap: 20px;
    width: 100%;
    flex-wrap: wrap;
}

/*Footer*/
.img_footer {
    width: 30px;
    height: 30px;
}

.footer_link {
    transition: 0.3s;
    text-decoration: none;
    color: rgb(0, 0, 0);
    display: flex;
    align-items: center;
    filter: drop-shadow(0 0 1px rgb(0, 0, 0));
    gap: 10px;
}

.footer_link:hover {
    transition: 0.3s;
    padding: 0px 5px;
    filter: drop-shadow(0 0 5px rgb(30, 255, 0));
}

.footer {
    background: rgb(255, 255, 255);
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
}

.cor_icon_botoes_1 {
    color: var(--branco);
    filter: drop-shadow(0 0 5px rgb(255, 255, 255));
    background: rgba(0, 0, 0, 0);
}

.cor_icon_botoes {
    color: var(--branco);
    filter: drop-shadow(0 0 5px rgb(255, 255, 255));
    background: rgba(0, 0, 0, 0);
    box-shadow: 0 0 5px rgb(255, 255, 255);
}

/*Opcoes do inicio*/
.bibli {
    position: fixed;
    height: 100vh;
    padding: 20px;
    border: 2px solid rgba(255, 0, 0, 0);
    border-bottom-right-radius: 10px;
    box-shadow: 0 0 10px black;
    backdrop-filter: blur(7px);
    z-index: 5;
    filter: drop-shadow(0 0 5px black);
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: linear-gradient(-45deg, rgba(119, 0, 255, 0.329), rgba(255, 255, 255, 0));
}

.color_text {
    animation: animar_text 10s linear infinite;
}

@keyframes animar_text {
    0% {
        color: rgb(0, 136, 255);
    }

    25% {
        color: rgb(238, 255, 0);
    }

    50% {
        color: rgb(162, 0, 255);
    }

    76% {
        color: rgb(0, 255, 115);
    }

    100% {
        color: rgb(0, 136, 255);
    }
}

.ul_drives {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.botao_bibli {
    font-size: 15px;
    border: none;
    background: rgba(76, 0, 130, 0);
}

.nome_bibli {
    animation: nome_bibli 3s linear infinite;
}

@keyframes nome_bibli {
    0% {
        color: aliceblue;
    }

    50% {
        color: aquamarine;
    }

    100% {
        color: aliceblue;
    }
}

/*contato*/
.cont {
    left: 0px;
    transition: 1s;
    opacity: 1;
    padding: 20px;
    position: absolute;
    z-index: 5;
    top: 35vh;
    backdrop-filter: blur(7px);
    border: none;
    box-shadow: 0 0 10px black;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.ul_cont {
    color: var(--branco);
    filter: drop-shadow(0 0 5px black);
    display: flex;
    flex-direction: column;
    gap: 20px;

}

.cont2 {
    left: -500px;
    transition: 1s;
    opacity: 0;
}

/*icone master mind*/
.icone_mm {
    background: rgba(190, 136, 97, 0);
    border: none;
    cursor: pointer;
    font-size: 40px;
    color: var(--branco);
}

/*sidebar*/
.sidebar {
    transition: 1s;
    position: fixed;
    z-index: 6;
    border: none;
    backdrop-filter: blur(10px);
    height: 100dvh;
    box-shadow: 0 0 15px;
    width: 300px;
    padding-top: 20px;
    padding-right: 20px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.fechar_sidebar {
    position: fixed;
    margin-left: 280px;
    margin-top: 85px;
}

.sidebar::-webkit-scrollbar {
    background-color: rgba(205, 92, 92, 0);
}

.link_sidebar {
    transition: 0.3s;
    padding: 6px;
    text-decoration: none;
    color: white;
    filter: drop-shadow(0 0 5px white);
    display: flex;
    gap: 20px;
    border-radius: 10px;
}

.link_sidebar:hover {
    transition: 0.3s;
    background: rgba(255, 255, 255, 0.289);
}

.but_dev:hover {
    transition: 0.3s;
    background: rgba(255, 255, 255, 0.289);
}

.dev {
    margin-top: 50px;
    display: flex;
    gap: 20px;
    color: white;
    border: none;
}

.but_dev {
    padding: 6px;
    border-radius: 10px;
    width: 150px;
    margin: auto;
    transition: 0.3s;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    color: white;
    filter: drop-shadow(0 0 5px white);
    border: none;
    background: rgba(250, 235, 215, 0);
}

.invi{
    transition: 0.5s;
    opacity: 0;
}

.but_conf {
    transition: 0.3s;
    border: none;
    display: flex;
    gap: 20px;
    align-items: center;
    color: #ffffff;
    filter: drop-shadow(0 0 5px white);
    cursor: pointer;
    background: rgba(240, 248, 255, 0);
    padding: 5px;
    border-radius: 10px;
}

.but_conf:hover {
    transition: 0.3s;
    background: rgba(255, 255, 255, 0.293);
}

/*configurações*/
.conf {
    transition: 1s;
    opacity: 1;
    align-items: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: fixed;
    margin-top: 30vh;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 10px black;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: 7;
}

.lado_conf {
    transition: 1s;
    margin-left: -580px;
    opacity: 0;
}

.fechar_conf {
    width: 100%;
    display: flex;
    justify-content: end;
}

.mov_sidebar {
    z-index: 7;
    transition: 1s;
    margin-left: -350px;
}

/*temas*/
.img_conf {
    width: 50px;
    border-radius: 20px;
    height: 50px;
    box-shadow: 0 0 15px black;
}

.lista_temas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.but_tem {
    cursor: pointer;
    color: var(--branco);
    filter: drop-shadow(0 0 5px white);
    background: rgba(240, 248, 255, 0);
    border: none;
    padding: 3px 5px;
    border-radius: 10px;
    box-shadow: 0 0 5px black;
    backdrop-filter: blur(10px);
    transition: 0.3s;
}

.dark_hover:hover {
    transition: 0.4s;
    background: rgba(0, 0, 0, 0.572);
    color: var(--branco);
}

.red_hover:hover {
    transition: 0.4s;
    background: rgba(255, 0, 0, 0.582);
    color: var(--branco);
}

.purple_hover:hover {
    transition: 0.4s;
    background: rgba(106, 0, 255, 0.605);
    color: var(--branco);
}

.button_text {
    transition: 0.3s;
    padding: 3px 5px;
    border-radius: 10px;
    box-shadow: 0 0 5px black;
    border: none;
    background: rgba(255, 255, 255, 0);
}

.text1:hover {
    transition: 0.3s;
    background: rgba(255, 255, 0, 0.458);
}

.text2:hover {
    transition: 0.3s;
    background: rgba(0, 0, 0, 0.435);
}

.text3:hover {
    transition: 0.3s;
    background: rgba(255, 255, 255, 0.418);
}

.align_li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.tema_text {
    color: var(--branco);
}

/*Modo dev*/
.modo_dev {
    transition: 1s;
    z-index: 3;
    margin-top: 40vh;
    border: none;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 0 10px black;
    backdrop-filter: blur(10px);
    padding: 20px;
    text-align: center;
    position: fixed;
    background: linear-gradient(-45deg, rgba(1, 109, 250, 0.342), rgba(0, 0, 0, 0));
}

.form-dev {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.in-dev {
    transition: 0.5s;
    color: var(--branco);
    padding: 5px;
    border: none;
    box-shadow: 0 0 5px black;
    background: rgba(240, 248, 255, 0);
    border-radius: 10px;
}

.but-dev {
    cursor: pointer;
    padding: 4px;
    color: var(--branco);
    box-shadow: 0 0 5px black;
    border: none;
    background: linear-gradient(90deg, rgba(0, 0, 255, 0.73), rgba(83, 0, 128, 0.463));
}

.welcome {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.451), rgba(255, 255, 255, 0));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    transition: 1s;
    z-index: 2;
    position: fixed;
    border: none;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    backdrop-filter: blur(10px);
    padding: 20px;
    text-align: center;
    margin-top: 35vh;
    box-shadow: 0 0 10px black;
}

.wel_space {
    margin-left: -380px;
}

.cor_tema {
    color: var(--branco);
}

.div_form_login{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    position: fixed;
    z-index: 5;
    padding: 20px;
    margin-top: 20vh;
    backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 0 15px black;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    background: linear-gradient(-45deg, rgba(3, 150, 255, 0.653), rgba(0, 0, 0, 0));
}

.form_login{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.login_inp{
    background: linear-gradient(90deg, rgba(0, 255, 17, 0.379),  rgba(255, 72, 157, 0.624));
    border: none;
    color: var(--branco);
    box-shadow: 0 0 5px black;
    padding: 5px;
    border-radius: 6px;
    width: 100%;
    font-size: 20px;
}

.login_button{
    cursor: pointer;
    width: 100%;
    font-size: 20px;
    color: var(--branco);
    background: rgba(255, 255, 255, 0.311);
    padding: 3px;
    border: none;
    box-shadow: 0 0 5px black;
}