Yume Nikki Layout

this is the code without the little gifs!! i haven't tested it myself but im pretty sure it works :3





@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik+Puddles&display=swap');
body{font-family: 'Press Start 2P', cursive;}
<style type="text/css">



/* this, believe it or not, is a cursor. ああああああああああああああああああ */

body { cursor: url('data:image/x-icon;base64,AAACAAEAICAAAAAAAACoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAABQAAAAcAAAAIAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAABgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAoAAAATAAAAGgAAABwAAAAcAAAAHAAAABwAAAAcAAAAHAAAABwAAAAVAAAADAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAKAAAAGQAAACoAAAA1AAAAOAAAADgAAAA4AAAAOAAAADgAAAA4AAAAOAAAAC8AAAAfAAAADAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAAAACgAAABkAAAAuAAAAQAAAAEoAAABMAAAATAAAAEwAAABMAAAATAAAAEwAAABMAAAARQAAADUAAAAcAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAkAAAAZLCQxwlpJY/9aSWP/Wklj/1pJY/9aSWP/Wklj/1pJY/9aSWP/Wklj/wAAAFMAAABRAAAASAAAAC8AAAAWAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEighLblwW3z/gWmP/4Fpj/+Xhab/l4Wm/5eFpv+Xhab/l4Wm/5eFpv98a4j/Wklj/wAAAFQAAABRAAAAPgAAACUAAAAMAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlHiirf2iN/5R5pf+UeaX/qZO6/7Wixv/Ars//39Hr/9/R6//f0ev/39Hr/9/R6/+/scf/Wklj/wAAAFQAAABLAAAANwAAAB4AAAALAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWklj/1pJY/+UeaX/lHml/5R5pf+1osb/taLG/9jI5P/36///9+v///fr///36///9+v///fr//9aSWP/AAAAVQAAAFIAAABHAAAANAAAABsAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABaSWP/lHml/1pJY/+Da5H/lHml/7Wixv/36///9+v///fr///36///Wklj/1pJY/91Y4D/taLG//fr//9aSWP/AAAAVAAAAFEAAABHAAAALgAAABUAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFpJY/9aSWP/AAAABSwkMbZaSWP/taLG//fr///36///9+v///fr///36///9+v//8m70f9aSWP/9+v//1pJY/9HOk7sAAAAVAAAAFEAAAA+AAAAIwAAAAkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAQAAABBaSWP/9+v///fr///36///9+v//1pJY/9aSWP/iHmR//fr///36///9+v//+XZ7f9aSWP/AAAAVAAAAEoAAAAuAAAAEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAwQyFREXh4Z0k//36///9+v///fr///36///ppev/6aXr/94aID/q52z//fr///36///5dnt/1pJY/8AAABVAAAAUgAAADYAAAAZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwkMbdaSWP/taLG//fr///36///9+v///fr//+worj/sKK4/4Fy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AAgAAAAGAAAAAwAAAAEAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFpJY/9aSWP/AAAAMgAAAEkAAABAAAAALQAAABcAAAAHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWklj/1pJY/9aSWP/AAAAOAAAADUAAAAsAAAAGQAAAAkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABaSWP/Wklj/1pJY/9aSWP/AAAAHAAAABkAAAAQAAAABwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFpJY/9aSWP/Wklj/1pJY/9aSWP/AAAACAAAAAUAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////////////////////////////gB///wAP//4AB//8AAf//AAD//yAAf//4AD//8AA//+AAH//gAB//4AAf/8AAH//AAB//wAAf/8AAH//AAB//wAAf/8AAH//gAD//4AA///gAf//4AH/f/gP/z////8f////D////wf///8='), auto; }


:root {
--headers: #b582bd;
--text: #7b5184;
--hover: #66436e;
--names: #b582bd;
--links: #b582bd;
--borders: 3px dashed #7b2442 !important;
--main_colour: black;
--background_image: url("https://i.ibb.co/bHT0VHx/PC-Computer-Yume-Nikki-Mall-Rooftop.png");
--font-family: 'Bebas Neue', sans-serif;
--curve: 0px;
--simple_bg: black;


}

body:before {
/* this is the opening image */
content: "";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('https://i.ibb.co/s6Yny2p/ezgif-4-6328eea8a1.gif');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
nav, footer {
margin: 1em;
position: relative;
box-shadow: 5px 8px 10px #0006;
}

main:before {
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('https://i.imgur.com/PeW0EfF.png');
background-position: center center;
background-size: cover;

}

h3, h4, h5, .url-info b {color: var(--headers) !important;} /* headings*/
a {color: var(--links) !important;} /* color of links */
a:hover {color: var(--hover)!important ;} /*links on hover */
p, h2 {color: var(--text) !important;} /* color of text */
h1, .friends a p {color: var(--names) !important;} /* color of names, and friends counter */
h1, .friends a:hover p {color: var(--hover)!important;} /* names on hover */
nav label {color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers) !important; text-align: center;} /* aboutme & want2meet headings */
.comment-reply:not(:first-child) {border-top: 3px double hotpink;} /* line in between comment replies*/
.count {color: #66436e;}

<style>

/* text decoration */

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
text-decoration: solid underline #181c29;
}

.logout-btn:hover, .logout-btn:active {
text-decoration: solid underline #181c29;
}

nav .top a:hover {
text-decoration: solid underline #181c29;
}

nav .links a:hover {
text-decoration: solid underline #181c29;
}

.profile-info {
border-radius: var(--curve) !important;
}

.comment-replies {
border: 5px #ffd75e;
}

.comments-table {
border-radius: var(--curve) !important;
border: none !important;
}

.details p:last-child {
color: var(--links) !important;
filter: brightness(95%);
}

/* background image */

body {
background-image: var(--background_image) !important;
background-color: black !important;
background-attachment: fixed;
background-position:center center;
background-size: cover;
}

/* navigation */

/* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */

nav {
background: var(--main_colour);
border: var(--borders);
}

nav .top {
background: var(--main_colour);
}

nav .top a {
color: var(--main_colour) !important;
}

nav .links {
background: transparent !important ;
text-align: center;
}

nav img.logo {
filter: invert(90%) sepia(51%) saturate(1535%) hue-rotate(252deg) brightness(81%) contrast(78%);
!important;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
content: " | ";
color: var(--headers);
}

/*============= color the search bar and button ===================*/

.search-wrapper input[type=text] {
background-color: black !important;
border: 2px solid var(--text) !important;
color: var(--text) !important;
border-radius: 0px !important;
}

button {
border-radius: 0px !important;
border: 0px solid #1f1e33!important;

background-color: rgba(0, 0, 0, 0.0) !important;
color: #b387f5!important;
}

/*============= online icon ===================*/

.online {
content: url('https://i.ibb.co/xMgt716/uboa.png')
}

/*============= profile name ===================*/

h1 {
font-family: 'Rubik Puddles', cursive;
font-size: 30px !important;
color: white!important;
}


.contact {
background: var(--main_colour);
}

main {
background: black;
}


td {
background-color: transparent!important;
}

hr {
border-top: 1px solid #1f1e33;
}

.profile-pic img {
outline: none !important;
border: none!important;
}

.friends-grid img {
outline: none !important;
filter: opacity(90%) !important;
border-radius: var(--curve) !important;
}


.heading, .url-info, .blurbs, .friends, .table, .table-section, footer {
border-radius: var(--curve) !important;
border: var(--borders) !important;
}
.url-info{
background-color: var(--main_colour);
}
.friends, .blurbs {
background: var(--main_colour);
}

.mood, .contact, .blog-preview {
border-radius: var(--curve) !important;
border: var(--borders) !important;
}

.profile-info {
background: var(--main_colour);
border: var(--borders)!important;
display: flex;
align-items: center;
justify-content: center;
}

.mood, .blog-preview {
text-align: center;
background: var(--main_colour);
border: var(--borders) !important;
}

.table-section {
border: var(--borders) !important;
background-color: var(--main_colour)!important;
border-radius: var(--curve) !important;
}

.heading {
background: transparent!important;
background-size: 100%100%!important;
text-align: center;
border: none!important;
}

.comments-table {
display: block;
height: 250px!important;
overflow-y: scroll;
border: var(--borders) !important;
outline: none !important;
border: none!important;
}

.comments-table td {
border: var(--borders);
}

footer {
color: var(--text);
text-align: center;
font-size: 60%;
background: var(--main_colour);

}


/*scrollbars*/

/* Scrollbar styles */

::-webkit-scrollbar {
width: 5px;
height: 8px;
}

::-webkit-scrollbar-track {
border-radius: 0px;
width: 2px;
border: 1px dotted var(--text);
}

::-webkit-scrollbar-thumb {
background: var(--headers);
border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--hover);
}

by Quintvdk; 1723229401; Report