/**classes padrao**/
.inline {
    display: inline-flex;
}

.flex {
    display: flex;
}

.wrap {
    flex-wrap: wrap;
}

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

.align-start {
    align-content: flex-start;
}

.justify {
    justify-content: center;
}

.justify-start {
    justify-content: flex-start;
}

.w100{
    width: 100%;
}

.h100{
    height: 100%;
}

img::selection,
a::selection,
p::selection,
ul::selection,
span::selection,
li::selection,
button::selection,
input::selection,
marquee::selection,
h2::selection,
h6::selection,
nav::selection{
    background: none;
    color: #ff0000;
}

/**cursor e rolagem**/

body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background: repeating-linear-gradient(0deg, orangered, deeppink, violet, cyan, violet, deeppink, orangered 30%);
}

body::-webkit-scrollbar-thumb {
    background-color: white;
    border-radius: 20px;
    border: 2px solid #ff6cc2;
}

body {
    background: url(../imagens/imagens-blog/fundo.webp);
    background-size: cover;
    width: 100vw;
    height: 1400px;
    min-width: 1360px;
    position: relative;
    overflow-x: hidden;
}

.cursor{
    cursor: url(../imagens/imagens-blog/enter-void.webp), default;
}

.pointer{
    cursor: url(../imagens/imagens-blog/enter-void-link.webp), pointer;
}

.container{
    width: 1092px;
    height: 95%;
    position: relative; 
}

header{
    height: 200px;
}

#header{
    position: absolute;
    right: 40px;
    width: 800px;
    height: 200px;
    background: url(../imagens/imagens-blog/logo.webp);
    background-size: cover;
}

.datas{
    width: 200px;
    height: 300px;
    position: absolute;
    left: 0px;
    top: 100px;
}

#page{
    height: 1000px;
}

.scroll-block{
    overflow: hidden;
}

.texto-inicio{
    position: fixed;
    font-size: 50px;
    color: #f00000;
    text-decoration: none;
}

.texto-inicio:hover{
    text-decoration: underline;
}

#sair{
    left: 30px;
    top: 430px;
}

#entrar{
    right: 30px;
    top: 140px;
}

#sparkle{
    width: 500px;
    height: 500px;
    background: url(../imagens/imagens-blog/sparkle3.webp);
    position: fixed;
    top: -30px;
    left: 410px;
}

#escada{
    width: 400px;
    position: fixed;
    top: 305px;
    left: 405px;
    transform: rotate(-8deg);
}

#porta{
    position: fixed;
    top: 128px;
    left: 630px;
    width: 86px;
    height: 190px;
    background: url(../imagens/imagens-blog/porta.webp);
    background-size: cover;
    transform: scaleX(-1);
}

#porta:hover{
    background: url(../imagens/imagens-blog/porta-a.webp);
    background-size: cover;
}

.pomba{
    width: 134px;
    height: 99px;
    background: url(../imagens/imagens-blog/pomba2.webp);
    background-size: cover;
    position: fixed;
    top: 30px;
    left: 100px;
}

#pomba2{
    transform: scaleX(-1);
    top: 380px;
    left: inherit;
    right: 100px;
}

.portao{
    min-width: 1360px;
    width: 100vw;
    height: 143px;
    background: url(../imagens/imagens-blog/portao.webp);
    background-repeat: repeat-x;
    position: fixed;
    z-index: 4;
    top: 550px;
    left: 0px;
}

.nuvem{
    min-width: 1350px;
    width: 100vw;
    height: 600px;
    background: url(../imagens/imagens-blog/nuvem.webp);
    background-size: contain;
    position: fixed;
    z-index: 5;
    top: 650px;
    left: 0px;
}

.tope{
    min-width: 1350px;
    width: 100vw;
    height: 600px;
    background: url(../imagens/imagens-blog/tope.webp);
    background-size: contain;
    position: fixed;
    z-index: 6;
    top: 1050px;
    left: 0px;
}

#conteudo{
    height: 80%;
    justify-content: space-around;
    margin: 50px 0;
}

aside{
    width: 190px;
    margin-top: 70px;
}

.mensagem{
    width: 150px;
    height: 320px; 
    font-size: 20px;
    text-align: center;
    color: rgb(116, 8, 8);
}

.mensagem p{
    margin: 0 0 10px;
}

marquee {
    width: 140px;
    height: 15px;
    margin: 3px 0 5px;
    color: #961111;
    font-size: 11px;
    letter-spacing: .8px;
}

.comandos {
    width: 10px;
    height: 10px;
    cursor: url(../imagens/imagens-blog/enter-void-link.webp), pointer;
}

.comandos:hover{
    filter: invert(100%);
}

.controles {
    width: 140px;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

.controles button {
    background-color: unset;
    border: unset;
    width: 26px;
    height: 26px;
    cursor: url(../imagens/imagens-blog/enter-void-link.webp), pointer;
}

#anterior-musica{
    transform: scaleX(-1);
}

input[type="range"] {
    position: relative;
    -webkit-appearance: none;
            appearance: none;
    width: 60%;
    margin: 0;
    padding: 0;
    height: 5px;
    margin: 10px 2.5% 10px 2.5%;
    outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    background: black;
}

input[type="range"]::before {
    position: absolute;
    content: "";
    top: 8px;
    left: 0;
    width: var(--seek-before-width);
    height: 3px;
    background-color: #d1350e;
}

input[type="range"]::-webkit-slider-thumb {
    position: relative;
    -webkit-appearance: none;
    box-sizing: content-box;
    border: 1px solid rgb(0, 0, 0);
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #d1350e;
    margin: -7px 0 0 0;
}

.dnav{
    background: #ca632c;
    background: linear-gradient(0deg,rgb(167, 93, 33) 0%, rgb(219, 132, 50) 15%, rgb(230, 166, 69) 35%, rgb(231, 192, 107) 50%, rgb(230, 166, 69) 65%, rgb(219, 132, 50) 85%, rgb(167, 80, 33) 100%);
    border-radius: 30px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: 10px outset #a55615;
}

.scnd{
    width: 150px;
}

.anjos{
    width: 130px;
    font-size: 17px;
    color: rgb(116, 8, 8);
    text-align: center;
}

.angel{
    width: 130px;
    height: 170px;
    background: url(../imagens/imagens-blog/angel.webp);
    background-size: contain;
    background-repeat: no-repeat;
    cursor: url(../imagens/imagens-blog/enter-void-link.webp), pointer;
    filter:  hue-rotate(-20deg) saturate(200%);
}

.angel:hover{
    filter: blur(1px) hue-rotate(-20deg) saturate(200%);
}

.modal {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.774);
    overflow-y: hidden;
}

.modal-content {
    background: #b095c5;
    margin: 100px auto;
    width: 450px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mensagem-modal{
    width: 400px!important;
    height: 400px;
    background-size: contain;
    background: url(../imagens/imagens-blog/mensagem1.jpg);
    position: absolute;
}

.enfeite-modal{
    position: absolute;
    top: 180px;
}

.frame{
    width: 450px;
    height: 450px;
    background-image: url(../imagens/imagens-blog/frame.webp);
    background-size: contain;
}

#msg-recebida{
    position: absolute;
    top: 100px;
    right: 410px;
    cursor: url(../imagens/imagens-blog/enter-void-link.webp), pointer;
    background-color: rgb(13, 146, 84);
    color: white;
    border: 2px outset #023119;
}

#anjo-modal{
    right: 190px;
}

.vela{
    width: 200px;
    height: 300px;
    background: url(../imagens/imagens-blog/vela.webp);
    position: absolute;
}

.anjo{
    width: 200px;
    height: 250px;
    background: url(../imagens/imagens-blog/anjo.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 170px;
    right: -80px;
    transform: scaleX(-1);
    z-index: 4;
}

.roses{
    width: 500px;
    height: 94px;
    transform: rotate(90deg);
    position: fixed;
}

#roses{
    left: -180px;
    top: 100px;
}

#roses2{
    right: -180px;
    top: 100px;
}

#pomba4{
    position: absolute;
    top: 90px;
    left: -40px;
}

.rosas{
    width: 146px;
    height: 165px;
    background: url(../imagens/imagens-blog/roses7.webp);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 160px;
    left: 120px;
}

#main{
    width: 790px;
    height: calc(100% - 60px);
    background: rgba(17, 1, 27, 0.418);
    background-size: cover;
    padding: 30px;
    flex-direction: column;
    border-radius: 50%;
    border: 2px solid white;
}

.topo{
    position: absolute;
    top: 150px;
    height: 350px;
    align-items: baseline;
}

.asa{
    background: url(../imagens/imagens-blog/asa.webp);
    width: 250px;
    height: 302px;

}

#direita{
    transform: scaleX(-1);
}

.olho-base{
    background: url(../imagens/imagens-blog/olho-base.webp);
    width: 280px;
    height: 250px;
    background-size: cover;
    z-index: 2;
}

.olho{
    background: url(../imagens/imagens-blog/olho-fechado.webp);
    width: 280px;
    height: 250px;
    background-size: cover;
    z-index: 10;
}

#iris{
    position: fixed;
}

.navdatas{
    width: fit-content;
    max-height: 300px;
    overflow-y: auto;
    position: absolute;
    color: #fff;
    background: rgba(0, 0, 255);
    background: rgba(0, 0, 255, 0.623);
    padding: 10px;
    display: flex;
    flex-direction: row-reverse;
    border: 2px solid #ffffff;
    box-shadow:
    10px 20px 20px 5px #16003f;
    font-weight: bolder;
    z-index: 8;
    position: fixed;
    top: 220px;
    right: 20px;
}

#navdatas::-webkit-scrollbar {
    width: 10px;
}

#navdatas::-webkit-scrollbar-track {
    background: #020070a2
}

#navdatas::-webkit-scrollbar-thumb {
    background-color: white;
    border-radius: 20px;
    cursor: url(../imagens/imagens-blog/enter-void-link.webp), pointer;
}

.navdatas:active{
    cursor: url(../imagens/imagens-blog/enter-void-link.webp), pointer;
}

.navdatas:focus{
    border: 3px solid #ff0000;
}

.ano ul{
    display: none;
}

.mes ul{
    display: none;
}

span:hover{
    color: #ff0000;
}

span{
    display: flex;
    width: 100px;
    margin: 10px;
}

#fecha-menu{
    width: 25px;
    height: 25px;
    color: #fff;
    border: 2px solid #fff;
    background: none;
}

#fecha-menu:hover{
    color: #ff0000;
    border: 2px solid #ff0000;
    background: none;
}

.linhas{
    width: 850px;
    height: 700px;
    background: url(../imagens/imagens-blog/linhas.webp);
    position: absolute;
    top: 351px;
    border-bottom-left-radius: 410px;
    border-bottom-right-radius: 410px;
}

.abra{
    width: 300px;
    height: 150px;
    position: absolute;
    left: 220px;
    top: 440px;
    background: url(../imagens/imagens-blog/abra.webp);
    background-size: contain;
    z-index: 5;
}

.veja{
    width: 300px;
    height: 150px;
    position: absolute;
    right: 20px;
    top: 400px;
    background: url(../imagens/imagens-blog/veja.webp);
    background-size: contain;
    z-index: 5;
}

.aqui{
    width: 300px;
    height: 150px;
    position: absolute;
    left: 280px;
    top: 640px;
    background: url(../imagens/imagens-blog/AQUI.webp);
    background-size: contain;
    z-index: 5;
}

.arrow{
    width: 64px;
    height: 32px;
    position: absolute;
    left: 530px;
    top: 760px;
    background: url(../imagens/imagens-blog/arrow2.webp);
    background-size: contain;
    z-index: 5;
    transform: rotate(30deg);
}

.texto{
    width: 395px;
    height: 518px;
    background-color: rgb(0, 0, 0);
    margin-top: 150px;
    border-radius: 50%;
    z-index: 2;
    position: relative;
    box-shadow:
    0 0 30px 10px #fff,
    0 0 50px 20px rgb(162, 128, 216),
    0 0 100px 30px rgb(92, 181, 216);
}

#revelacao{
    width: 395px;
    height: 395px;
    background: url(../imagens/imagens-blog/revelacao.webp);
}

#coracao{
    width: 100px;
    height: 100px;
    background: url(../imagens/imagens-blog/coracao.webp);
    position: absolute;
    bottom: 105px;
    left: 145px;
    z-index: 4;
}

#coracao:hover{
    filter: blur(10px);
}

#maos{
    width: 170px;
    height: 170px;
    background: url(../imagens/imagens-blog/mao3.webp);
    position: absolute;
    bottom: 10px;
    left: 110px;
    border-bottom-right-radius: 40px;
}

#moldura{
    width: 486px;
    height: 618px;
    background: url(../imagens/imagens-blog/moldura.webp);
    position: absolute;
    top: -50px;
    right: -37px;
}

.log{
    color: white;
    text-align: center;
    line-height: 30px;
    height: 430px;
    width: 370px;
    position: relative;
    left: 30px;
    top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.log-wrap{
    width: 400px;
    height: 350px;
    overflow-y: scroll; 
    padding-right: 40px;
    position: relative;
    left: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#titulo{
    width: 150px;
}

h6, h2 {
    margin: 0px;
}

#corpo-texto{
    font-size: medium;
}

.texto-log{
    width: 260px;
}

#deco-log{
    width: 100px;
    height: 70px;
    background: url(../imagens/imagens-blog/mao2.webp);
    background-size: cover;
    position: relative;
    left: -10px;
}

.log-wrap::-webkit-scrollbar {
    width: 25px;
    position: relative;
    left: 30px;
    z-index: 7;
}

.log-wrap::-webkit-scrollbar-track {
    background: repeating-linear-gradient(0deg, rgb(255, 94, 0), rgb(255, 217, 0));
    border-radius: 50%;
}

.log-wrap::-webkit-scrollbar-thumb {
    background-color: white;
    border-radius: 20px;
    cursor: url(../imagens/imagens-blog/enter-void-link.webp), pointer;
}

.paginacao{
    background: none;
    border: none;
    font-weight: 600;
    font-size: 20px;
    color: white;
    display: grid;
    cursor: url(../imagens/imagens-blog/enter-void-link.webp), pointer;
}

#seta-a{
    transform: scaleX(-1);
}

.abaixo{
    position: absolute;
    width: 820px;
    top: 650px;
    justify-content: space-between;
}

.pomba3{
    width: 200px;
    height: 200px;
    background: url(../imagens/imagens-blog/dove.webp);
    background-size: contain;
    position: absolute;
    left: 200px;
    bottom: 210px;
    z-index: 3;
}

.navfooter{
    opacity: 1;
    cursor: url(../imagens/imagens-blog/enter-void-link.webp), pointer;
}

.navfooter:hover{
    opacity: 0.8;
}

nav{
    width: 80%;
    height: 150px;
    position: relative;
    left: 240px;
    bottom: 30px;
}

#index{
    width: 190px;
    height: 190px;
    background: url(../imagens/imagens-blog/index-btn.webp);
    background-size: contain;
}

#pg1{
    background: url(../imagens/imagens-blog/1.webp);
    background-size: contain;
}

#pg2{
    background: url(../imagens/imagens-blog/2.webp);
    background-size: contain;
}

#pg3{
    background: url(../imagens/imagens-blog/3.webp);
    background-size: contain;
}

#pg4{
    background: url(../imagens/imagens-blog/4.webp);
    background-size: contain;
}

#pg5{
    background: url(../imagens/imagens-blog/5.webp);
    background-size: contain;
}

#pg6{
    background: url(../imagens/imagens-blog/6.webp);
    background-size: contain;
}

#pg7{
    background: url(../imagens/imagens-blog/7.webp);
    background-size: contain;
}

#pg8{
    background: url(../imagens/imagens-blog/8.webp);
    background-size: contain;
}

#pg9{
    background: url(../imagens/imagens-blog/9.webp);
    background-size: contain;
}

#pg10{
    background: url(../imagens/imagens-blog/10.webp);
    background-size: contain;
}

.numero{
    width: 80px;
    height: 110px;
    display: inline-flex;
}

footer{
    color: red;
    text-align: center;
    font-weight: 900;
    font-size: large;
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.fade-in {
    animation: fadeIn 3s ease-in-out;
}

.fade-out {
    animation: 1s fadeOut ease-in-out;
}

.invisivel{
    display: none;
}