chao garden theme !

Layout CSS

<style>

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:[email protected]&display=swap');

* {
    font-family: 'Pixelify Sans', sans-serif !important;
}

body, input, textarea, button, select, p, a, h1, h2, h3, h4, h5, h6 {
    font-family: 'Pixelify Sans', sans-serif !important;
}


  
  a:hover {letter-spacing: 2px; transition-duration: 500ms !important;}
  
  
</style>





<style>
/* This is the loading image when someone clicks on your profile.
You can search for 'transparent loading screen gif' on google or giphy.com and select one that fits your style.
The background-size code will change the size of it. Remember to test it out on your phone/tablet 
and change the background-size in the mobile code.*/

body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://25.media.tumblr.com/tumblr_ltaiibBcwO1r53bxbo1_500.gif');
	background-size: 10%;
	background-repeat: no-repeat;
        background-position:center;
        background-color: #f7f4f4;
	animation: yourAnimation 2s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>






/* ---------- PAGE BACKGROUND ---------- */
<style>

footer::after{



  bottom: 0;



  font-size:0;



  left: 0%;



  position:fixed;



  pointer-events: none;



  content:url("https://media.tenor.com/RChGxJ8KuRYAAAAj/sonic-chao-chao.gif");



animation: floating 3s ease-in-out infinite



}

body {
    background-color: #1e201f;

    background-image:
        linear-gradient(
            rgba(3, 12, 9, 0.0),
            rgba(3, 12, 9, 0.0)
        ),
        url("https://i.pinimg.com/originals/66/da/a2/66daa25dc58b3e0365798e0dd5a3f736.gif");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;

    color: #c9ddd4;
}
.count {
    color: #ffffff;
}
a {
    color: #1e40af;
    color: #fdffa9;
    text-decoration: none;
}

.myspace-header .top-nav {
    background: #039;
    background: linear-gradient(to bottom, #64cc30 0, #127522 100%);
    height: 100px;
    display: flex;
    justify-content: space-between;
    padding: 0;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 0;
    border-bottom: 1px solid #ffffff;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(rgba(3, 12, 9, 0.0), rgba(3, 12, 9, 0.0)), url(https://chao-island.com/assets/images/media/wallpaper/chaowallpaper17_clover_big.jpg);

}

.myspace-header .main-nav li a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 16.9px;
    display: inline-block;
    padding: 0 15px;
    height: 29px;
    line-height: 29px;
    border-right: 1px solid #ffffff00;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}


footer {
    background-color: #6cf3f930;
    padding: 20px;
    margin-top: 20px;
    border-top: 1px solid #ffffff;
}

/* ---------- MAIN BLOG ENTRY ---------- */

.blog-entry {
    border: 1px solid #ffffff;
    border-radius: 4px;
    padding: 25px;
    box-shadow: 0 10px 35px rgb(255 255 255 / 65%);
    max-width: 900px;
    margin: 25px auto;
}

main {
    background: #ffffff1a;
    color: #00000000;
    padding: 0 0;
    font-size: 80%;
}


/* ---------- BLOG TITLE ---------- */

.blog-entry .title {
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    font-weight: normal;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 8px;
}


/* decorative divider */

.blog-entry .title::after {
    content: "☆ ☆ ☆";
    display: block;
    color: #fffecc;
    font-size: 14px;
    margin-top: 8px;
}


/* ---------- AUTHOR INFO ---------- */

.blog-entry .author-details {
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
}


.blog-entry .profile-pic {
    border: 2px solid #1d6c61;
}

.edit-info {
    background: #d4ff84;
    background: #d6ff9f;
    border: 1px solid #60a5fa;
    border: 1px solid rgb(250 255 208);
    width: 100%;
    padding: 5px;
    overflow-wrap: break-word;
    word-break: break-word;
}

a {
    color: #1e40af;
    color: #77d41c;
    text-decoration: none;
}

/* ---------- PUBLISH DATE ---------- */

.blog-entry .publish-date {
    color: #5aa371;

    font-size: 13px;

    text-align: center;

    margin-bottom: 20px;
}


/* ---------- ACTUAL BLOG CONTENT ---------- */

.blog-entry .content {
    background: rgb(255 255 255 / 0%);
    border: 1px solid #ffffff;
    border-radius: 3px;
    padding: 25px;
    line-height: 1.8;
}

.blog-entry .content p {
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 18px;
}


/* ---------- PARAGRAPHS ---------- */

.blog-entry .content p {
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 18px;
}


/* ---------- HEADINGS ---------- */

.blog-entry .content h2 {
    color: #f9ff98;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    font-weight: normal;
    border-bottom: 1px solid #acfff3;
    padding-bottom: 7px;
    margin-top: 30px;
}


.blog-entry .content h3 {
    color: #5aa371;

    font-size: 19px;
    font-weight: normal;
}


/* ---------- LINKS ---------- */

.blog-entry .content a {
    color: #84f8ff;
    text-decoration: none;
    border-bottom: 2px dotted #54c2ff;
}

.blog-entry .content a:hover {
    color: #fffe91;

    border-bottom-color: #5aa371;
}


/* ---------- IMAGES ---------- */

.blog-entry .content img {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 22px auto;

    border: 1px solid #1d6c61;
    border-radius: 3px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.55);
}


/* ---------- BLOCKQUOTES ---------- */

.blog-entry .content blockquote {
    background: #85f9ff30;
    border-left: 3px solid #9df1ff;
    margin: 22px 10px;
    padding: 15px 20px;
    color: #fff7ce;
    font-style: italic;
}


/* ---------- KUDOS ---------- */

.kudos-container {
    margin: 10px 0;
    padding: 8px;
    background: #f8f9fa70;
    border-radius: 5px;
    border-left: 3px solid #0046ad;
}



/* ---------- COMMENTS ---------- */

.comments-table {
    background: rgb(255 255 255 / 0%);
    border: 1px solid #ffffff;
    color: #ffffff;
    border-radius: 3px;
}

.comments-table td, .music-table td {
    background: #ffffff00;
    background: #ffffff00;
    vertical-align: top;
}

.comments-table td:first-child, .music-table td:first-child {
    background: #f9c56c;
    background: #ffffff00;
    text-align: center;
    font-weight: 700;
    width: 30%;
}

.blog-entry .comments .heading, .bulletin .comments .heading {
    padding: 10px 7px;
    border-top: 2px solid rgb(255 255 255);
    margin-top: 10px;
}

main {
    background: #ffffff1a;
    color: #ffffff;
    padding: 0 0;
    font-size: 80%;
}


/* ---------- ARTICLE ROW ---------- */

.row.article {
    background: transparent;
}

</style>




<style>
/* banner */
main:before {
	width: 100%;
	height: 170px;
	display: block;
	content: "";
	background-image: url('https://cdn.pfps.gg/banners/15387-chao-band.jpeg');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;</style>