Oyasumi Punpun Layout!!

Tags: punpun, oyasumi punpun, manga
Description:

A layout themed around Oyasumi Punpun/Goodnight Punpun ^_^ the images are slightly broken... so you'll have to fix them i think?
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by stairs (https://layouts.spacehey.com/layout?id=30436) -->

html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.imgur.com/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}


main:before {
 width: 100%;
 height: 300px;
 display: block;
 content: "";
 background-image: url('https://steamuserimages-a.akamaihd.net/ugc/1709662161841382357/010FFE234715B380DD0A0641F8B38603BD93AB2D/');
 background-position: center;
 background-size: cover;
}

<style>.online { visibility: hidden; } .online img { content: url(""); animation-name: none; visibility: hidden; height: 43px; width: 90px; }</style>

 
<style>
.mood, .blog-preview, .contact {
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #313233;
}

.table-section, .blurbs, .friends {
    margin-bottom: 30px !important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #313233;
}

.friends {
    margin-top: 10px!important;
}

.profile-info {
    background: black;
    border: var(--borders)!important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #313233;
}

.profile-info .inner {
    font-weight: bold;
    text-align: center;
}

.contact {
    ;
    padding: 20px;
    margin-bottom: 40px!important;
}

main {
    background: transparent;
    padding: 6px 0px;
}

.profile-pic img {
    outline: none !important;
    border: none!important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #313233;
}

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

td {
    background-color: transparent!important;
}

hr {
    border-top: 1px solid pink;
}

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

.friends, .blurbs {
    background: black;
}

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

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

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

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

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

.comments-table td {
    background-image: url('https://pm1.narvii.com/5781/dcbcbb8edd9a5ae3aeee7537d2d4bb514e158ff1_hq.jpg') !important;
    background-size: cover;
    border: var(--borders);
}

.comments-table td:first-child img {
  
}

footer {
    color: var(--text);
    text-align: center;
    font-size: 60%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: black;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #313233;
}
<style>




<style>
p.online {font-size: 0px;}
p.online::after{content: "👁 I'M ONLINE";
color: white;
font-size: 10px;}

font-size: 10px;}
    </style>
<style>
    body {
        background:url(https://images.alphacoders.com/923/923115.png);  no-repeat fixed; background-size:cover;}
</style>

    

<style>
    .profile {
       

background:url(https://w0.peakpx.com/wallpaper/30/446/HD-wallpaper-goodnight-punpun-manga.jpg);
color:white;
text-shadow: 0 0 9px black;
    }


.profile .contact, .profile .table-section, .profile.url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview { 
  border-style:Double; 
 border-width:6px; 
 border-color:White; 
background:black;
}


.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

content: "☕︎"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

content: "★"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

content: "✍︎"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

content: "☞"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

content: "✎"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

content: "☔︎"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

content: "♧"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

content: "⚑"

}
footer {
border-radius: 15px;
background-image: 
url(https://i.imgur.com/3djzS5Z.jpg);
color:White; 
}
    #music {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 0px;
        transition: 0.5s width;
    }

    #music:hover {
        width: 0px;
}

nav .top {
        background: url("https://i.imgur.com/3djzS5Z.jpg");
    }
    
    nav { background: black url(""); }

:root {
--logo-blue: grey;
--darker-blue:white;
--lighter-blue:#170e24;
--even-lighter-blue:#160037;
--lightest-blue:#2d036b;
--dark-orange:white;
--light-orange:#170e24;
--even-lighter-orange:black;
--green:black;
}

iframe.spotify {
    width: 100%;
    height: 250px;
    padding: 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
}
div.ah.df.dg.dh {
    border-radius: 0 0 10px 10px;
}
div.b4.ah.dx.dy.dz.e0 {
    border-radius: 10px 0 0 0;
}


<div class="background">
ㅤ
<div class="about">ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
-
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ


<div>
<h4>My Playlist(s):


<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "〖☺My Friends!☺︎〗"; font-size:.8rem; font-weight:bold; 
color:White; }
}
</style>
<style>
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "〖☺︎The Comments!☺︎〗"; font-size:.8rem; font-weight:bold;
color:White; } 
</style>
<style>
 .profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "〖☺My Interests and Socials!☺︎〗"; font-size:.8rem; font-weight:bold; 
color:White; }
 </style>
<style>
    .contact .heading{ font-size:0; }
.contact .heading:before{ content: "〖☺Contacting me!☺︎〗︎︎"; font-size:.8rem; font-weight:bold; 
color:White; }
}</style>
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "〖☺About Me!!☺︎〗"; font-size:.8rem; font-weight:bold; color:White; }


nav::before {
content: "";
background: url() no-repeat;
background-size: 200px;
position: fixed;
float: right;
display: inline;
bottom: 0;
right: 5px;
height: 200px;
width: 200px;
margin-bottom: 10px;
}
 


</style>

<style>
.profile-pic img,.friends-grid img,.comments-table img{border-radius:5px;}

<style>
    .profile-pic img{
        
border: 1px solid #313233!important;   
        
    </style>

<style>* {cursor: url(https://cur.cursors-4u.net/others/oth-8/oth733.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/06/sperm-handwriting.html" target="_blank" title="Sperm - Handwriting"><img src="https://cur.cursors-4u.net/cursor.png" alt="Sperm - Handwriting" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>.online { visibility: hidden; } .online img { content: url(""); animation-name: none; visibility: hidden; height: 43px; width: 90px; }</style>

<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/a5/7d/d7/a57dd76d2be745926a4b2cb96c649ce1.gif); 
    background-size: cover;
    background-repeat: no-repeat;
    animation: yourAnimation 4s ease 0s 1 normal forwards;
    pointer-events: none;
  }
  @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
<style></style>

<style>

.comments-table {
    display: block;
    height: 300px!important;
    overflow-y: scroll;
    border: 0px solid black !important;
    outline: none !important;
    border-radius: 25pxpx;
    padding:5px;
    border-spacing: 4px;
    text-align: center;
}
.comments-table td * {
    border-radius: 25px 25px 25px 25px !important;
}
</style>


<style>
body{

font-family: 'BIZ UDMincho', serif; !important;

}
<style>

<style>

a{
font-family: 'Karma', serif;}

a:hover{
font-family: 'Karma', serif;}

a:visited{
font-family: 'Karma', serif;}
</style>

<style>

h1{
font-family: 'BIZ UDMincho', serif;}
</style>


<style>

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
}

.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://giffiles.alphacoders.com/196/196054.gif"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 150px; } 
.profile-pic:after{ 
 }   
</style>


<style>

.profile-pic, .profile .friends .person img:not(.icon), .profile .friends .person p, .profile h1{ 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 0px;
    margin-top


.profile .friends .person img:not(.icon) {
border-radius:15px;
box-shadow: 1px 0px 7px 2px rgba(254, 120, 180, 0.71);

}


.profile-pic{
    padding: 10px;


.friends-grid {
    text-align: center;
}
</style>

<style>

   a:hover {
     color: #876e9c; 
    
   a{
     color: #555085; 
   
</style>


<style>

main {
background:  ;
border-radius: 12px;
border: 12px solid #514d57;
padding: 0;
font-size: 90%;
color: black;
}


  
  .profile .table-section .heading h4{
    color: #c50576;
    text-shadow: 1px 1px 2px black;
  }
  .profile .table-section .details-table td{
    background: rgba(0, 0, 0, 0);
    padding-right: 10%;
  }

  .profil
    color
  .profile .friends .heading h4{
    text-align
  }
.general-about {
	background-image: url(https://mfiles.alphacoders.com/739/739809.jpg);
	padding: 20px;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #313233;
	text-align: center;

</style>


<style>


nav::before {
content: "";
background: url() no-repeat;
background-size: 200px;
position: fixed;
float: right;
display: inline;
bottom: 0;
right: 5px;
height: 200px;
width: 200px;
margin-bottom: 10px;
}
<style>
{
0% {
    filter: saturate(1.7) sepia(0.2) hue-rotate(0deg);
}
100% {
    filter: saturate(1.7) sepia(0.2) hue-rotate(360deg);
}
}
.url-info {
    background: url(https://data.whicdn.com/images/358278263/original.jpg);
    background-position: center;
    background-size: cover;
    height: 180px;
    text-shadow: white;
    color: #ffffff;
    text-align: center;
}

</style>


<div class="punpun"></div>
<div class="punpun2"></div>

<style>

.punpun {
    background: url(https://media.discordapp.net/attachments/929941691660652647/1070617665409929249/My_project-1.png) no-repeat;
    background-size: 100%!important;
    position: fixed;
    left: -65px;
    bottom: 0px;
    height: 180px;
    width: 312px;
    z-index: 1000;
    opacity: 90%;
}
.col.w-40.left:after {
    content: "";
    background-image: url();
    height: 8%;
    width: 6.5%;
    border-radius: 0px 4
    overflow: hidden;
    position: absolute;
    background-size: 100% 100%;
    opacity: 90%;
}
.general-about:before {
    background-image: url();
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    height: 100px;
    width: 100px;
    content: " ";
    transform: rotate(
290deg
) scale(1.7) translateX(3em) translateY(-7em);
    position: absolute;
    z-index: -1;
}

}
.profile .left h1:before {
    background-image: url();
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    height: 100px;
    width: 100px;
    content: " ";
    transform: rotate(316deg) scale(2.7) translateX(-6em) translateY(1.1em);
    position: absolute;
    z-index: -1;
}
</style>

<style>
.count {
    color: #b50101;
}
.comments-table {
    height: 700px;
    display: block;
    overflow-y: scroll;
}
h2 {
    margin: unset;
    font-weight: 100;
    font-size: large;
}
iframe {
    border-radius: 0px 35px !important;
    opacity: 95%;
    border: solid #f9b5c9;
}
@keyframes hue-rotate {
0% {
    filter: saturate(1.7) sepia(0.2) hue-rotate(0deg);
}
100% {
    filter: saturate(1.7) sepia(0.2) hue-rotate(360deg);
}
}
.url-info {
    
}
.punpun2 {
    background: url(https://media.discordapp.net/attachments/929941691660652647/1070619604809949194/My_project-1_2.png) no-repeat;
    background-size: 207%!important;
    position: fixed;
    right: 0px;
    bottom: 0px;
    height: 205px;
    width: 200px;
    z-index: 1000;
    opacity: 90%;
}
.profile-pic:before {
    background-image: url();
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    height: 100px;
    width: 100px;
    content: " ";
    transform: rotate(0deg) scale(2.5) translateX(-4.6em) translateY(20em);
    position: absolute;
    z-index: -1;
}
</style>

<style>

.col.left h1:before{
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 120px;
}
.col.right:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 220px;
  background-image: url("https://wallpaperaccess.com/full/2326425.jpg");
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 350px;
</style>

<style>

.general-about {
  padding-bottom: 25px;
}
.profile-info, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td {
  background-color: transparent;
  border: none;
}
#comments {
  height: 300px;
  overflow-y: scroll;
}
.comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon){
  border: 1px solid black;
  border-radius: 180px;
}
.comments-table td:first-child img:not(.icon):hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
a, nav .links a {
  color: var(--links);
}
a:hover, nav .links a:hover {
  color: var(--headers);
  text-decoration: none !important;
  transition: 0.2s;
}
.logout-btn {
  color: var(--links);
  box-shadow: none;
}
.logout-btn:hover {
  color: var(--headers);
  box-shadow: none;
  border: none;
  text-decoration: none;
  transition: 0.2s;
}
.col.left:after {
  pointer-events: none;
  content: url();
}
.contact .inner a img {
  font-size: 0;
}
.profile .table-section .details-table td {
  background-color: transparent;
}
.profile .blurbs .heading {
  font-size: 15px;
  font-weight: bolder;
  background: transparent;
  color: var(--links);
}
.col.right h4 {
  color: var(--links);
  text-align: left;
}
.profile .blurbs .section h4, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading {
  background: var(--headers);
  color: var(--links);
  background-image: url(https://maxcdn.icons8.com/Share/icon/User_Interface/close_window1600.png);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 12px;
  padding-left: 5px;
  padding-bottom: 5px;
}
.person p {
  color: var(--links) !important;
}
.person img{ 
  border: 1px solid black;
  border-radius: 180px;
  display: absolute;
  height: 100px;
  object-fit: cover;
  width:100px;
}
.person:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
.count {
  color: var(--links);
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
<style></style>


<style>

{

}
.mood:after {
    content: "" url(https://i.ibb.co/6169n7c/87fd374f98bd1fe28687648902167a9f-2-20.jpg)
}
.profile .blurbs .heading, .profile .friends .heading {
 
</style>

<style>
    .profile {
      


    }


.profile .contact, .profile .url-inf, .pro  .pro {
 border-color:White; 
background-image: url(https://i.ibb.co/bR9ff9S/Ep-I3tt-EXc-AMVVd-1-25.jpg)
</style>
 <style>
{
}
.profile-pic:before {
    background-image: url(https://i.ibb.co/0qwMCWV/kisspng-m-2csf-drawing-line-angle-font-5c10ef8c7667f5-605879011544613772485-removebg-preview.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    height: 75px;
    width: 75px;
    content: " ";
  transform: rotate(-0deg) scale(2.5) translateX(19em) translateY(7em);
    position: absolute;
    z-index: -1;
}
.comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon) {
    border-radius: 16px;
    margin: 0 auto;
    border: dotted #e0e0e0;
<style></style>


<div class="snowflakes">

  <div class="snowflake">

  <img src="https://media.discordapp.net/attachments/929941691660652647/1070594943988551710/t1rsz_1rsz_1rsz_1rsz_63db5afca44bd.png"/>

  </div>

  <div class="snowflake">

  <img src="https://media.discordapp.net/attachments/929941691660652647/1070594943988551710/t1rsz_1rsz_1rsz_1rsz_63db5afca44bd.png"/>

  </div>

  <div class="snowflake">

  <img src="https://media.discordapp.net/attachments/929941691660652647/1070594943988551710/t1rsz_1rsz_1rsz_1rsz_63db5afca44bd.png" alt="80d74fcc-a448-4fdd-85e9-01d508436375"/>

  </div>

  <div class="snowflake">

  <img src="https://media.discordapp.net/attachments/929941691660652647/1070594943988551710/t1rsz_1rsz_1rsz_1rsz_63db5afca44bd.png" alt="80d74fcc-a448-4fdd-85e9-01d508436375"/>

  </div>

  <div class="snowflake">

  <img src="https://media.discordapp.net/attachments/929941691660652647/1070594943988551710/t1rsz_1rsz_1rsz_1rsz_63db5afca44bd.png" alt="80d74fcc-a448-4fdd-85e9-01d508436375"/>

  </div>

  <div class="snowflake">

  <img src="https://media.discordapp.net/attachments/929941691660652647/1070594943988551710/t1rsz_1rsz_1rsz_1rsz_63db5afca44bd.png" alt="80d74fcc-a448-4fdd-85e9-01d508436375"/>

  </div>

  <div class="snowflake">
      
<img src="https://media.discordapp.net/attachments/929941691660652647/1070594943988551710/t1rsz_1rsz_1rsz_1rsz_63db5afca44bd.png" alt="80d74fcc-a448-4fdd-85e9-01d508436375"/>

  </div>

  <div class="snowflake">

<img src="https://media.discordapp.net/attachments/929941691660652647/1070594943988551710/t1rsz_1rsz_1rsz_1rsz_63db5afca44bd.png" alt="80d74fcc-a448-4fdd-85e9-01d508436375"/>    

  </div>

  <div class="snowflake">

    <img src="https://media.discordapp.net/attachments/929941691660652647/1070594943988551710/t1rsz_1rsz_1rsz_1rsz_63db5afca44bd.png" alt="80d74fcc-a448-4fdd-85e9-01d508436375"/>

  </div>

  <div class="snowflake">

    <img src="https://media.discordapp.net/attachments/929941691660652647/1070594943988551710/t1rsz_1rsz_1rsz_1rsz_63db5afca44bd.png" alt="80d74fcc-a448-4fdd-85e9-01d508436375"/>

  </div>

  <div class="snowflake">

    <img src="https://media.discordapp.net/attachments/929941691660652647/1070594943988551710/t1rsz_1rsz_1rsz_1rsz_63db5afca44bd.png" alt="80d74fcc-a448-4fdd-85e9-01d508436375"/>

  </div>

  <div class="snowflake">

    <img src="https://media.discordapp.net/attachments/929941691660652647/1070594943988551710/t1rsz_1rsz_1rsz_1rsz_63db5afca44bd.png" alt="80d74fcc-a448-4fdd-85e9-01d508436375"/>

  </div>

</div>

<style>

.snowflake {

  color: #fff;

  font-size: 1em;

  font-family: Arial, sans-serif;

  text-shadow: 0 0 5px rgba(0,0,0,0.7);

}



@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

</style>

<style>
    .profile {
       

background:url(https://anigamers.com/uploads/entries/Goodnight-Punpun-Stairs_20180614184326.jpg);
color:white;
text-shadow: 0 1 0px black;
    }</style>
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.
Comments

Displaying 18 of 18 comments ( View all | Add Comment )
@ 𝖏 𝖚 𝖓 𝖔	1729605107 using!!! Report Comment
luwxi:3	1725250174 usando:3 Report Comment
Anita<3	1724179483 usingg! Report Comment
robbie	1720903941 using :3 Report Comment
Evans	1717983800 usingg ! ! Report Comment
pun	1716582274 Using Report Comment
Ir4riskkaメ	1716056685 с использованием!!! Report Comment
kanedapraga	1715796606 using Report Comment
Vixen	1714161984 using! Report Comment
seth ᶻ 𝗓 𐰁	1713772778 using! Report Comment
strwbrrie	1710776567 usandoo Report Comment
POTRU5ST	1708957892 this is great but goodnight punpun ruined me Report Comment fr tho, im on way to become something like him and i hate it. by 𝓢𝓪𝓽𝓸𝓻; 1710302394; Report fr i started seeing world diff after goodnight punpun by kira; 1728854855; Report
toria . ୨୧	1706935162 usando. Report Comment
ayuyu!!	1702319960 using!!!! Report Comment
anassta	1686832861 this is so cute but can u drop just the floating punpun gif pls?? Report Comment The floating punpun is just a png w/ a floating animation ^^ it isn’t a gif :D by stairs; 1686833406; Report
nolongerlio	1685561630 is this ok to use? Report Comment soso sorry for the late reply but of course!!! ^_^ by stairs; 1685587503; Report
Catuumustdiee_	1683847240 I love this layout sm! Report Comment
sluggang.404	1683365562 this layout is cute af, , , Report Comment