yami kawaii layout code ! + loading screen

<!-- BASICS ------------------------------------------------ -->

<!-- FONT -->

<style> @import url('https://fonts.googleapis.com/css2?family=Borel&display=swap'); body{font-family: "Borel" ;} </style>

<style>

<!-- FONT -->

<!-- BANNER -->

<style>

nav .top{

background-image: url("https://i.pinimg.com/1200x/46/0a/64/460a64235d334f3162cd4784ab426b65.jpg");

}

</style>

<!-- BANNER -->

<!-- BACKGROUND -->

<style>

body { background: url("https://i.pinimg.com/1200x/03/31/ea/0331eaae42ee8acbfe4390792bbeb9ea.jpg");

}

.profile {

background-image:url(https://i.pinimg.com/originals/43/af/1f/43af1f5569169bb66e0ad41f25419c08.gif);

background-repeat: repeat;

border-radius: 8px;

}

<!-- BACKGROUND -->

<!-- COLORS ----------------------------------------------------- -->

<!-- FONT COLORS -->

<style>

<!-- color of the normal text on your page. -->

p, h2 {

color: #85BCE6;

}

<!-- color of friend's names in the comments, number of friends and your name. This I set to orange -->

h1, .count, .friends a p {

color: ##85BCE6;

}

</style>

<!-- FONT COLORS -->

<!-- ROOT; PROFILW BASICS -->

<style>

:root {

--logo-blue: #E394BF; <!-- CHANGE COLOR OF SPACEHEY BAR AT TOP+INTERESTS TEXT -->

--darker-blue: #0D0852; <!-- CHANGE COLOR OF PROFILE LINKS -->

--lighter-blue: #E394BF; <!-- CHANGE COLOR OF NAVIGATION BAR -->

--even-lighter-blue: #ccc;

--lightest-blue: #BD2038;

--dark-orange: #5C0636; <!-- CHANGE FONT COLOR OF ABOUT ME, WHO I’D LIKE TO MEET -->

--light-orange: #FF5729); <!-- CHANGE BACKGROUND OF COMMENT SECTION -->

--even-lighter-orange: #28E03A; <!-- CHANGE BACKGROUND OF COMMENT SECTION -->

--green: #38d;

}

</style>

<!-- ROOT; PROFILE BASICS -->

<!-- HEADER, INTERESTS, LINKS, FRIENDS, COMMENTS BG/TEXT/BORDER COLORS -->

<style>

.profile .table-section{

border:2px solid #DE0030;

border-radius: 10px;

}

.profile .table-section .heading{

background: #85BCE6;

border: 1px solid #E394BF;

border-radius: 15px 15px 0px 0px;

text-align: center;

}

.profile .table-section .heading h4{

color: #E394BF;

text-shadow: 1px 1px 2px black;

}

.profile .table-section .details-table td{

background: rgba(0, 0, 0, 0);

padding-right: 10%;

}

.profile .friends .heading{

background: #85BCE6;

color: #E394BF;

text-shadow: 1px 1px 2px black;

text-align: center;

}

.profile .friends .heading h4{

text-align: center;

color: #E394BF;

text-shadow: 1px 1px 2px black

}

</style>

<!-- HEADER, INTERESTS, LINKS, FRIENDS, COMMENTS BG/TEXT/BORDER COLORS -->

<!-- BLURB HEADING IMG CHANGE [DOESNT INCLUDE (NAMES) BLURBS SECTION] -->

<style>

.general-about {

background-image: url('https://i.pinimg.com/736x/03/40/56/03405695948d50d0af569ab3e1cd47d1.jpg');

padding: 20px;

border-radius: 10px;

box-shadow: 4px 4px 0 #89B9D6;

text-align: center;

animation: nineties2 2s ease 0s infinite normal none;

animation-delay: .46s;

}

.profile .blurbs .section :nth-child(2) {

background-image: url('https://i.pinimg.com/1200x/33/10/b1/3310b1eb3331845d87525ce6c079fe1d.jpg');

/* margin-top: -5px; */

padding: 18px;

box-shadow: 4px 4px 0 #89B9D6;

}

.profile .profile-info .inner h3 {

filter: drop-shadow(3px 3px 0 #89B9D6);

margin: 0!important;

color:#FFF;

}

.profile .profile-info .inner h3 a {

color: #FFFFFF;

}

.profile .profile-info {

background-image: url('https://i.pinimg.com/1200x/33/10/b1/3310b1eb3331845d87525ce6c079fe1d.jpg');

padding: 20px;

border: none;

border-radius: 10px;

box-shadow: 4px 4px 0 #89B9D6;

text-align: center;

animation: nineties2 2s ease 0s infinite normal none;

animation-delay: .15s;

border: none;

}

</style>

<!-- BLURB HEADING IMG CHANGE \[DOESNT INCLUDE (NAMES) BLURBS SECTION] -->

<!-- SECONDARY BASICS ----------------------------------------------------- -->

<!-- LOADING SCREEN -->

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background-image: url('https://i.pinimg.com/originals/2e/a4/53/2ea453d3bfc49621c700ff0b2620e10c.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 2.5s ease 0s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

</style>

<!-- LOADING SCREEN -->

<!-- ONLINE -->

<style>

.online {content:url('https://www.myspacegens.com/images/online_now/69.gif'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2;

}

</style>

<!-- ONLINE -->

<!-- PFP MASK -->

<style>

.general-about img {-webkit-mask-image: url(https://64.media.tumblr.com/72bdce9c419b3fb7f95a20daaffc36c2/e9cc2bc1660f0997-6b/s100x200/09fa0e72b260039080dd4bb1ecdf745cbc63663d.pnj);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}

</style>

<style>

.profile .friends .person img:not(.icon) { -webkit-mask-image: url(https://64.media.tumblr.com/6ac92436c37ca6dd96dc1f9f53e8c9a1/e9cc2bc1660f0997-42/s100x200/6413d6788d8677d798bb7a04c73cbd45c445dbd9.pnj );-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}

</style>

<style>

.comments-table td:first-child img:not(.icon) { -webkit-mask-image: url(https://64.media.tumblr.com/6ac92436c37ca6dd96dc1f9f53e8c9a1/e9cc2bc1660f0997-42/s100x200/6413d6788d8677d798bb7a04c73cbd45c445dbd9.pnj);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}

</style>

<!-- PFP MASK -->

<!-- JEWELRY -------------------------------------------------------------------------------------------- -->

<!-- CORNER IMG -->

<div style="float: ; max-height: 800px; position: fixed; right: 1px; bottom: 10px; z-index: 200;"><img src="https://dl.glitter-graphics.com/pub/3586/3586521qzrl8obu5n.gif" width="300" height="300"/></div>

<!-- CORNER IMG -->

<!-- CURSORS -->

<style>* {cursor: url(https://cdn.custom-cursor.com/packs/3991/splatoon-2-c-q-cumber-cursor-pack.png), url(https://cdn.custom-cursor.com/packs/3991/splatoon-2-c-q-cumber-cursor-pack.png), auto !important;}</style>

<!-- CURSORS -->

<!-- UNSEEABLE ESSENTIALS [BASICS EXTENDED] -------------------------------------------------------------------------------------- -->

<!-- FRIEND PROFILES -->

<style>

.profile .friends .person:first-child img:not(.icon){

content:url('https://64.media.tumblr.com/21e50cac01a8d093345e4b3667b6fe41/3f6a249a9b70cb2d-39/s250x400/0e7f71f498052048cff3c603da9f9ec192557706.pnj');

}

.profile .friends .person:nth-child(2) img:not(.icon){

content:url('https://64.media.tumblr.com/3580bd6b53c979515623da0f5977c643/41914ccf682f9347-ee/s250x400/d691b0236721843d4f612b7b5a1c243f58eee04a.pnj');

}

.profile .friends .person:nth-child(3) img:not(.icon){

content:url('https://64.media.tumblr.com/274f7211ee68beec1ee105b2753e679c/a03faa803989e4fb-3a/s250x400/595aa307674313e529c981f97f7017995f08b759.pnj');

}

.profile .friends .person:nth-child(4) img:not(.icon){

content:url('https://64.media.tumblr.com/63dfc9f9ba037d1f2750c267e30fb827/41914ccf682f9347-b9/s250x400/71025d60864ac26602bb6f851d17bc9e14a84d8d.pnj');

}

.profile .friends .person:nth-child(5) img:not(.icon){

content:url('https://64.media.tumblr.com/a0105bd8171d183c4d16a65481a464e7/635abb99ca35a8da-b8/s250x400/7ffc476ad0939fd9dae39655fffbe07026069464.pnj');}

.profile .friends .person:nth-child(6) img:not(.icon){

content:url('https://64.media.tumblr.com/e492c0c9aee8b480a5de9316b55e97f5/41914ccf682f9347-b5/s250x400/d6f03054a7a3c75188a9ba7a847866221b20df1f.pnj');

}

.profile .friends .person:nth-child(7) img:not(.icon){

content:url('https://64.media.tumblr.com/ab2082d3046cbd51080dddcd193d50ce/41914ccf682f9347-c0/s250x400/309072028bb365f9e0fca31783bfabc404ee9a9a.pnj');

}

.profile .friends .person:nth-child(8) img:not(.icon){

content:url('https://64.media.tumblr.com/1f80070f60d8fbd6a0e9837a3e0afced/a43816a4b6cdf362-25/s250x400/633d86280276a4c6078a2792deff31c1f11f5a57.pnj');

}

<!-- FRIEND PROFILES -->

<!-- DOTTED BORDERS -->

<style>

table.comments-table {

border: 2px dashed rgba(255, 255, 255, 255);

}

</style>

<style>

/* pink dashed borders */

.profile .url-info {

border: 2px dashed rgba(255, 255, 255, 255);

}

.profile .contact {

border: 2px dashed rgba(255, 255, 255, 255);

}

.profile .table-section {

border: 2px dashed rgba(255, 255, 255, 255);

}

</style>

<style>

nav .links {

background:transparent;

}

nav .links a:hover {

color: rgba(107, 54, 68);

}

</style>

<style>

.count {

color: #844756;

}

</style>

<style>

a:hover {

color: black;

}

a{

color: #6b3644;

}

</style>

<style>

.profile .friends .person p {

color: #6b3644;

}

.profile .friends .person p:hover {

color: #6b3644;

}

</style>

<style>

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {

background-color: rgba(255, 234, 242, 0.65);

}

</style>

<style>

.profile .friends .comments-table td {

background: transparent;

border: 1px solid rgba(255, 161, 207, 0.40);

}

.comments-table td*{

}

</style>

<style>

.profile .table-section .details-table td {

background-color:rgba( 255, 234, 242, 0.34);

}

</style>

<style>

nav .top{

/* navigation bar at the top/the bar that has the search and spacehey logo */

background-color: transparent;

}

</style>

<style>

footer {

color: black !important;

text-decoration: underline !important;

text-decoration-style: dotted !important;

background-color: rgba(255, 255, 255, 0.34);

}

</style>

<style>

.contact .inner a img {

font-size: 0;

}

.contact .inner a img:before {

font-size: 1em;

display: block

}</style>

<style>

.profile .contact {

background-color: rgba(255, 234, 242, 0.4);

}

</style>

<style>

<style>

p{

font-size: 10px !important;

font-weight: bold;

text-transform:none !important;

}

</style>

<style>

</style>

<!-- DOTTED BORDERS -->