celestebb

<style>

@import url('//fonts.googleapis.com/css?family=Codystar');
@import url('//fonts.googleapis.com/css?family=Snowburst One');
@import url('//fonts.googleapis.com/css?family=Teko');

::-webkit-scrollbar {width: .3vw; height: 1vw; background: #; }
::-webkit-scrollbar-thumb { background-color:#; border-radius:5vw;}

a:link, a:visited, a:active{color: #B06167;text-shadow: 2px 0 0 #612953, -2px 0 0 #612953, 0 2px 0 #612953, 0 -2px 0 #612953, 1px 1px #612953, -1px -1px 0 #612953, 1px -1px 0 #612953, -1px 1px 0 #612953; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; text-decoration:none;}

a:hover { color: #fff;text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; }

h1 {color: #E292FA;text-shadow: 2px 0 0 #8E6582, -2px 0 0 #8E6582, 0 2px 0 #8E6582, 0 -2px 0 #8E6582, 1px 1px #8E6582, -1px -1px 0 #8E6582, 1px -1px 0 #8E6582, -1px 1px 0 #8E6582;text-align: center;font-family:'Snowburst One', sans-serif;font-size: 2vw;line-height:.5vw;letter-spacing:.2vw;}

i {color:#fff;text-shadow:1px 1px 1px #000;font-style: italic;}
b {color:#fff;text-shadow:1px 0px 1px #000;font-weight: bold;}

body{overflow:hidden;background-image:url(https://wallpapercave.com/wp/lKlqTGz.jpg);background-size:100% 100%;background-repeat:no-repeat;}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.overlay{position:absolute;background-image:url(https://thumbs.gfycat.com/MagnificentJoyousEyra-size_restricted.gif);background-repeat:repeat;left:0px;bottom:0px;width:100%;height:100%;opacity:.6;}

.back{position:absolute;background-image:url(https://www.transparenttextures.com/patterns/argyle.png);background-color:#FFD7E2;width:300px;height:300px;left:175px;bottom:15px;border-radius:5px;opacity:.5;z-index:1;box-shadow:0px 0px 5px #fff;}

.box{position:absolute;opacity:.5;background-color:#fff;width:290px;height:290px;left:180px;bottom:20px;border-radius:5px;}

.holder{z-index:1;opacity:1;}

.maintext {overflow-y:scroll;width:280px;height:290px;left:190px;bottom:20px;z-index:10;position: fixed;opacity: 0;text-align:left;color:#000;font-family:'Teko';font-size:18px;line-height:20px;-webkit-transition: opacity 1s ease-in-out;}
.maintext:target {transition: all 1s ease-out;-webkit-transition: all 1s ease-out;-moz-transition: all 1s ease-out;-ms-transition: all 1s ease-out;-o-transition: all 1s ease-out;transition: all 1s ease-out;z-index:11;opacity:1;}

.navbar {Position:absolute;width:50px; height:260px;left:445px;bottom:15px;z-index:1;opacity:1;text-align:center;transition: all 1.5s ease-in-out;-moz-transition: all 1.5s ease-in-out;-ms-transition: all 1.5s ease-in-out;-o-transition: all 1.5s ease-in-out;transition: all 1s ease-in-out;}

.nav1 {background-image:url(https://vignette.wikia.nocookie.net/animalcrossing/images/f/fb/NH-Aquarius_star_fragment.png/revision/latest/top-crop/width/300/height/300?cb=20200326195739);background-size:100%;width:65px;height:65px;bottom:240px;position:absolute;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
.nav1:hover {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-webkit-animation: action .5s infinite alternate;animation: action .5s infinite alternate;-webkit-animation:spin 5s linear infinite;-moz-animation:spin 5s linear infinite;
animation:spin 5s linear infinite;}

.nav2 {background-image:url(https://img.rankedboost.com/wp-content/uploads/2020/04/Zodiac-Star-Fragment-Animal-Crossing-New-Horizons.png);bottom:160px;background-size:100%;width:65px;height:65px;position:absolute;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
.nav2:hover {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-webkit-animation: action .5s infinite alternate;animation: action .5s infinite alternate;-webkit-animation:spin 5s linear infinite;-moz-animation:spin 5s linear infinite;
animation:spin 5s linear infinite;}

.nav3 {background-image:url(https://vignette.wikia.nocookie.net/animalcrossing/images/d/d4/NH-Cancer_star_fragment.png/revision/latest/top-crop/width/150/height/150?cb=20200326195750);bottom:80px;background-size:100%;width:65px;height:65px;position:absolute;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
.nav3:hover {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-webkit-animation: action .5s infinite alternate;animation: action .5s infinite alternate;-webkit-animation:spin 5s linear infinite;-moz-animation:spin 5s linear infinite;
animation:spin 5s linear infinite;}

.nav4 {background-image:url(https://vignette.wikia.nocookie.net/animalcrossing/images/8/89/NH-Leo_star_fragment.png/revision/latest/top-crop/width/300/height/300?cb=20200326195823);bottom:0px;background-size:100%;width:65px;height:65px;position:absolute;z-index:10;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;}
.nav4:hover {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;-webkit-animation: action .5s infinite alternate;animation: action .5s infinite alternate;-webkit-animation:spin 5s linear infinite;-moz-animation:spin 5s linear infinite;
animation:spin 5s linear infinite;}

.celeste{position:absolute;width:220px;height:360px;bottom:0px;left:0px;background-image:url(http://i.picpar.com/AJye.png);background-size:100%;background-repeat:no-repeat;z-index:2;}

.title{position:absolute;bottom:315px;left:355px;font-family:'Codystar';font-size:25px;color:#D297B8;opacity:.8;letter-spacing:2px;text-shadow:0px 0px 4px #FAE4F1;}

.title2{position:absolute;bottom:316px;left:165px;font-family:'Snowburst One';font-size:20px;color:#D297B8;opacity:.9;text-shadow:0px 0px 4px #FAE4F1;}


</style>

<div class="overlay"></div><div class="back"></div><div class="box"></div><div class="celeste"></div><div class="title">Celeste</div><div class="title2">"Oh! Dear me!" -</div>

<div class="holder">
<div id="01" class="maintext">
<h1>Header</h1>
This is normal text<BR>
<a href="" target="_Blank">This is a link</a><br>
<i>italics</i> - <b>bold</b><br>

</div>

<div id="02" class="maintext">
<h1>Header</h1>
</div>

<div id="03" class="maintext">
<h1>Header</h1>


profile coded by <a target="_blank" href="https://roleplay.chat/profile.php?user=ReverieStyles" target="_blank">RStyles</a>. Hit them up if you're interested in a code.</div>
<div id="04" class="maintext"></div>
</div>

<div class="navbar"><a class="nav1" href="#01"></a><a class="nav2" href="#02"></a><a class="nav3" href="#03"></a><a class="nav4" href="#04"></a></div>