@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap');

@font-face {
    font-family: 'bubb';
    src: url(BUBBCB_.TTF);
}

@font-face {
    font-family: 'basic';
    src: url(basiic.ttf);
}

@font-face {
    font-family: 'web';
    src: url(000webfont\ \(1\).ttf);
}

@font-face {
    font-family: 'bangalore';
    src: url(Bangalore.ttf);
}

@font-face {
    font-family: 'virale';
    src: url(virale.ttf);
}




html {
    scrollbar-color: rgb(255, 243, 192) #1e1239;
}

body {
    background-color: #151839;
}

header {
    width: 100%;
    height: 100px;
    background-image: url('whismygoth.jpg');
    background-size: 100%;
    display: flex;
    border: #49385f 2px dashed;
    border-radius: 10px;

}

header p {
    font-family: "basic", sans-serif;
    align-content: end;
    margin-left: 70%;
}

footer {
    background-image: url(whimsy.jpeg);
    background-size: 100%;
    height: 150px;
    display: flex;
    text-align: center;
    margin-top: 70px;
    border: #3b3887 5px solid;
    border-radius: 10px;
    align-content: center;
    justify-content: center;
}

footer p {

    font-family: basic;
    color: #fcec78;
    font-size: 30px;
}

main {
    width: 1500px;
    height: 1500px;
    margin-left: auto;
    margin-right: auto;
    background-color: #3b3887;
    margin-top: 20px;

    border-radius: 20px;
}

.main-top1 {
    width: 750px;
    height: 750px;
    background-color: #fff6b0;
    position: relative;
    border-radius: 20px 0 0 0;
    z-index: 9;

}

.main-top2 {
    width: 750px;
    height: 750px;
    background-color: #3b3887;
    border-radius: 0 20px 0 0;
    z-index: 9;
}

.main-bottom1 {
    width: 750px;
    height: 750px;
    background-color: #3b3887;
    border-radius: 0 0 0 20px;
    z-index: 9;
}

.main-bottom2 {
    width: 750px;
    height: 750px;
    background-color: #fff6b0;
    border-radius: 0 0 20px 0;

}

.main-top {
    display: flex;

}

.main-bottom {
    display: flex;
    position: relative;
}

.main-top ul {
    display: flex;
    list-style: none;
}

li {
    margin-left: 25px;
    margin-top: 10px;
    font-family: "Jua", sans-serif;
    font-weight: 400;
    font-size: 30px;
}

li a {
    text-decoration: none;
    color: #6226c2;
}

li a:hover {
    color: #53269b;
}

.bio {
    font-family: basic;
    font-size: 20px;
    color: #210a58;
}

.dragaoetexto {
    margin-top: 80px;

}
.main-bottom1 nav{
   
   
    font-family: 'virale';
    font-weight: 800;
    font-size: 25px;


}

.main-bottom1 p {
    
    font-family: "basic", sans-serif;


}
.favorites{
    height: 500px;
    width: 500px;
    background-image: url(swirls.png);
    justify-self: center;
    border: rgb(83, 41, 115) 6px solid;
    border-radius: 10px;
    
}

.favorites li{
    list-style: none;
    margin-left: -9px;
    color: #1e1239;
    font-family: web;
   
}

#favorites{
    font-size: 40px;
    margin-left: 180px;
    font-family: virale;
    color: #151836;
}


/* 4f2e9c roxo   amarelo  fcec78*/
/* -------------------------- ABOUT ME 2------------------------ */

.box07 {
    background: url(back01.gif);
    border-radius: 5px;
    box-shadow: 0 1px 5px #337d4d;
    box-sizing: border-box;
    margin: 1em auto;
    padding: 20px;
    width: 80%;
    z-index: 9;



}


/* --------------------------- ABOUT ME------------------------ */
.box23 {
    background: #4f2e9c;
    /* 背景色 */
    box-shadow: 3px 3px 5px #666;
    box-sizing: border-box;
    margin: 45px auto 20px;
    padding: 30px 10px 10px;
    position: relative;
    width: 90%
}

.icon01 {
    background: url(masking01.png) no-repeat center;
    height: 50px;
    position: absolute;
    top: -25px;
    width: 100%
}


/* ----------------------- STICKERS------------------- */
.stickers-main-top1 {

    position: relative;
    inset: 0;
    height: 0;

}

.stickers-main-top2 {

    position: relative;
    inset: 0;
    height: 0;

}

.stickers-main-bottom1 {

    position: relative;
    inset: 0;
    height: 0;

}

.stickers-main-bottom2 {

    position: relative;
    inset: 0;
    height: 0;

}

.lamp {
    position: absolute;
    top: 525px;
    margin-left: -90px;
    height: 400px;
}

.linedstars {
    position: absolute;
    top: -50px;
    margin-left: -300px;
    height: 400px;
    z-index: 10;
}

.slopfelt {
    position: absolute;
    top: 300px;
    margin-left: 300px;
}

.moon3 {
    position: relative;
    top: -10px;
    margin-left: 560px;
    transform: rotate(11deg);
    z-index: 5;

}

.alien {
    position: absolute;
    top: 675px;
    margin-left: 170px;
}

.starshine {
    position: absolute;
    top: 75px;
    margin-left: 10px;
    height: 70px;
    z-index: 3;
}

.starshine2 {
    position: absolute;
    margin-top: 145px;
    margin-left: -5px;
    height: 50px;
    transform: rotate(20deg);
    z-index: 5;
}

.starshine3 {
    position: absolute;
    top: 320px;
    margin-left: 230px;
    height: 50px;
    transform: rotate(65deg);
    z-index: 5;
}

.starshine4 {
    position: absolute;
    top: 400px;
    margin-left: 200px;
    height: 60px;
    transform: rotate(30deg);
}

.starshine5 {
    position: absolute;
    top: 500px;
    margin-left: 230px;
    height: 60px;
    transform: rotate(20deg);
}

.gems {
    position: absolute;
    top: 130px;
    z-index: 2;
    transform: rotate(270deg);
}

.ring {
    position: absolute;
    top: 300px;
    z-index: 2;

}

.dragon1 {
    position: absolute;
    top: -35px;
    margin-left: 420px;
    z-index: 4;

}

.rock {
    position: absolute;
    top: 270px;
    margin-left: -66px;
    z-index: 3;
}

.mcr {
    position: absolute;

    margin-left: 450px;
    z-index: 1;
}

.ending {
    position: absolute;
    top: 320px;
    margin-left: 500px;
    z-index: 3;
}



.ent {
    position: absolute;
    top: 380px;
    margin-left: 370px;
    z-index: 3;
}

.crystal {
    position: absolute;
    top: 473px;
    margin-left: 160px;
    z-index: 1;
    transform: rotateY(180deg);
}

.sunbordado2 {
    position: absolute;
    top: -140px;
    margin-left: -60px;
    z-index: 1;
    height: 300px;
    transform: rotateY(180deg);
    transform: rotate(175deg);
}

.goldstar {
    position: absolute;
    top: -10px;

    z-index: 3;
}

.goldstar1 {
    position: absolute;
    top: 186px;
    margin-left: 400px;
    z-index: 3;
}

.stars {
    position: absolute;
    top: -120px;
    margin-left: 300px;
    z-index: 1;
    height: 150px;
    
    transform: rotate(90deg);

}
.sunhanging{
     position: absolute;
    top: -3px;
    margin-left: 170px;
    z-index: 3;
    height: 180px;
}
.startear{
     position: absolute;
    top: -27px;
    margin-left: 240px;
    z-index: 3;
    
}
.eight{
    position: absolute;
    top: 2px;
    margin-left: 20px;
    z-index: 3;
}
.bluelamps{
    position: absolute;
    top: 2px;
    margin-left: 300px;
    z-index: 3;
}
.chimes{
    position: absolute;
    top: 2px;
    margin-left: 500px;
    z-index: 3;
}
.bones{
    position: absolute;
    top: -570px;
    margin-left: 70px;
    height: 200px;
    z-index: 3;
}
.lamp2{
    position: absolute;
    top: -180px;
    margin-left: 480px;
    height: 180px;
    z-index: 3;
}
.dragon{
    position: absolute;
    top: -450px;
    margin-left: 400px;
   
    z-index: 3;
}

.bordadastar1{
    position: absolute;
    top: -440px;
    margin-left: 650px;
   height: 100px;
    z-index: 3;
}
.bordadastar2{
    position: absolute;
    top: -350px;
    margin-left: 640px;
   height: 80px;
    z-index: 3;
    transform: rotate(30deg);
}
.bordadastar3{
    position: absolute;
    top: -270px;
    margin-left: 690px;
   height: 50px;
    z-index: 3;
    transform: rotate(80deg);
}
.bordadastar4{
    position: absolute;
    top: -230px;
    margin-left: 650px;
   height: 70px;
    z-index: 3;
    transform: rotate(50deg);
}
.bordadastar5{
    position: absolute;
    top: -160px;
    margin-left: 690px;
   height: 50px;
    z-index: 3;
}
.bordadastar6{
    position: absolute;
    top: -100px;
    margin-left: 650px;
   height: 90px;
    z-index: 3;
    transform: rotate(50deg);
}
.astrology{
     position: absolute;
    top: -100px;
    margin-left: 60px;
   height: 90px;
    z-index: 5;
   
}
.moon{
     position: absolute;
    top: -160px;
    margin-left: 30px;
   height: 90px;
    z-index: 4;
   
}
.mercury{
    position: absolute;
    top: -220px;
    margin-left: 60px;
   
    z-index: 3;
}
.cat{
    position: absolute;
    top: -270px;
    margin-left: 45px;
   
    z-index: 2;
}
.roundstar{
    position: absolute;
    top: -330px;
    margin-left: 60px;
   
    z-index: 1;
}