Angel

About me:

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

<style> 

/* hey

if you're reading this and you wanna use this,

there is a ton of shit in comments at the end

pls read it, it might be helpful to you */

* { 

 cursor: url("https://external-media.spacehey.net/media/sK4Wv6Xt4mVwioy_11ZPdui5lpnN3sf8Zrrp-nbAkLRc=/https://64.media.tumblr.com/bfeb4de99f006cc06feea83abe148856/a84c21d2139b6d83-bc/s75x75_c1/24db06b329a4fa5574a74ea096ce743a699bc040.png"), auto !important;

 font-family: monospace; 

 font-weight: bold;

}

:root {

  --links: rgb(145,145,145);

  --text: rgb(27, 28, 26);

  --headers: rgb(247,249,187);

  --shadows: rgb(247,249,187);

  --borders: rgba(0,0,0,.2);

  --shift: rgb(247,249,187);

}

html {

 animation: fadeIn ease 3s;

 animation-iteration-count: 1;

 animation-fill-mode: forwards;

}

body {

 margin:0;

 background-image: url("https://external-media.spacehey.net/media/siL8d6TRCgrD-9v4vKw9a_RExiiPA-JILT0nSABwypUQ=/https://64.media.tumblr.com/accf3c0dadd5dc2f91bc758b6f7d0ddc/f02cca1d11dd88d1-d2/s250x400/08db0cc875a3f08337ab2440c27fb824cc5202c2.png");

 background-attachment: fixed;

 }

p {

 color: var(--text);

}

nav img.logo{

    filter: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(1004%) hue-rotate(18deg) brightness(111%) contrast(90%) !important; 

    height:30px;

}

button {

  background: white;

  color: var(--text);

  border: 1px solid black;

}

button:hover {

  border: solid 1px var(--shift);

  transition: 0.2s;

}

input {

  background: white;

  color: var(--text);

  border: black solid 1px;

}

input:hover {

  border: solid 1px var(--shift);

  transition: 0.2s;

}

nav .top , nav .links{

  background: transparent;

  text-align: center;

}

nav .links li:not(:last-child)::after,

footer .links li:not(:last-child)::after{

    content: " 🍮";

}

nav .links .active img{

content: url(https://64.media.tumblr.com/502bf72622c5b6d59972c0fa802a4bf1/2d88e18a0c651708-84/s75x75_c1/6dff529d5e0fe8b53a050ac8d0047e4b870e461c.gifv);

}

main {

 background: white !important;

 border: black 1px solid;

}

.col.left h1:before{

  content: "";

  white-space: pre-wrap;

  display: block;

  height: 115px;

  background-image: url("https://external-media.spacehey.net/media/svrL6uEQWvG4GjbkkEbitMR_2eNH4mXUEajdwZDgYDjU=/https://64.media.tumblr.com/2effc31904ffe578a83c5ef1770c3395/571afedb7b42989a-44/s250x250_c1/ddaeb5dd3a6ef936897e8fdabfe77360517aaed1.gifv");

  background-repeat: no-repeat;

  background-size: 120px;

}

.col.right:before {

  content: "";

  white-space: pre-wrap;

  display: block;

  height: 110px;

  background-image: url("https://external-media.spacehey.net/media/sF7kfDIWDZwQWZn-lnjJGlDdhRG9SxgCr6KC5YrQSXC8=/https://64.media.tumblr.com/a7c7ed4688f72f040b6d5445764bb9c4/8443660b5cb7ab6e-49/s2048x3072/e0bb87727a2d822c2b63cd4f6cd6b17b7e8d3868.png");

  background-repeat: no-repeat;

  background-position-x: center;

  background-size: 350px;

}

h1 {

  color: var(--links);

}

.profile-pic img {

  border: solid black 1px;

  border-radius: 180px;

}

.profile-pic img:hover{

  animation: rotation 0.3s infinite linear;

  /*every time i update this i make this faster*/

}

.online{

  content: url("https://external-media.spacehey.net/media/sTMqu2qir4v_wvrfw10ij-CLrHT3I-Vbau5q7U4oiN5A=/https://www.myspacegens.com/images/online_now/003.gif");

} 

.mood {

  padding-top: 2px;

}

.mood:after {

  content: "";

  white-space: pre-wrap;

  display: block;

  height: 50px;

  background-image: url(https://external-media.spacehey.net/media/sFcLG20nHyu9BUN4kw035aIsIIE6A-uQ9hLS-C8aR3EA=/https://64.media.tumblr.com/b23b1836395a8de830bbfe7da9921d99/tumblr_pmuivtxCZl1y5fz9ko4_250.gifv);

  background-position-x: center;

  background-repeat: no-repeat;

  background-size: 300px;

}

.blurbs .inner {

  text-align: center !important;

}

.url-info {

  display: none;

}

nav {

  background: white !important;

  color: var(--links) !important;

  border: black 1px solid;

  margin-bottom: 5px;

}

footer {

  background: white !important;

  border: black 1px solid;

}

.comments-table, .comment-replies {

  border: none;

}

.profile-info, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td {

  background: none;

  border: none;

}

#comments {

  height: 400px;

  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, nav .links .special a {

  color: var(--links);

  text-shadow: none;

}

a:hover, nav .links a:hover, nav .right 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(--shift);

  box-shadow: none;

  border: none;

  text-decoration: none;

  transition: 0.2s;

}

.col.left:after {

  pointer-events: none;

  content: url(https://external-media.spacehey.net/media/sU-4mw8ySAhlQaxPb6_7qrqivvj7p-i7b1zIPN5Wddvc=/https://64.media.tumblr.com/45fb09de59e3d09e55bd1944e09acc19/e608c13f7a84b28e-69/s400x600/c2bace90cb13863741b20056f00627b5a00f7130.png);

}

.profile .contact, .profile .table-section, .profile .blurbs .section, .friends {

 border: var(--borders) solid 1px;

 box-shadow: 4px 4px 0px var(--shadows);

}

.contact .inner a img {

  font-size: 0;

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before,

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before,

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before,

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before,

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before,

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before,

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before,

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before,

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

  /*changes the icons*/

 content: url(https://external-media.spacehey.net/media/s8vRZPeOfK3daiHhJOp1MB28sJDrV6UPmbxPYyaFJxZ4=/http://i387.photobucket.com/albums/oo314/paravidatoda/div78.gif);

 margin-right: -6px;

}

.contact a, .table-section a {

  color: var(--links);

}

.contact a:hover, .table-section a:hover {

  color: var(--shift);

  text-decoration: none;

  transition: 0.2s;

}

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

  background: none;

}

.profile .blurbs .heading {

  font-size: 15px;

  background: none;

  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://i.imgur.com/VTQtuRz.gif);

  background-repeat: no-repeat;

  background-position: right top;

  background-size: 9px;

  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);

}

footer::after{

  bottom: 0;

  font-size:0;

  left: 77%;

  position:fixed;

  pointer-events: none;

  content:url("https://external-media.spacehey.net/media/s2lhOibD_UhgdpF0vfbppnINxbiYbr8NKh1a9GB1UXDg=/https://64.media.tumblr.com/ae91e9d18b0da620cef11f361228d481/tumblr_p3mzsfF1wn1w8sgt6o2_400.png");

}

/* makes other people's avatars shake

around when you hover on them hehe */

@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); }

}

/* this makes your profile picture spin weeeeeee */

@keyframes rotation {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(359deg);

  }

}

/* does the fade in thing when you click on your profile */

@keyframes fadeIn {

   0% {opacity: 0;}

   100% {opacity: 1;}

} 

/* assign this to your iframes 

so put 

class="player"

in the iframe tag

it will put the player in the bottom left of the screen

and it'll be invisible until you hover over it :)*/

.player {

  opacity: 0;

  left: 0;

  bottom: 0;

}

/* when you hover over where the iframw is, itll appear.

adjust the transition to mess w how fast it appears,

this was just based off my own guess. */

.player:hover {

  opacity: 100%;

  transition: 0.3s;

}

/* i assign this to my stamps in my interests table.

basically, class="stamps" for every img tag.

makes it s that its 2 in every row. 

its not a necessity but if you'd like to convert

one of the interest table cells to a dedicated

stamp section, here you go */

.stamps{

  height: 45px;

  width: 85px;

}

/* makes it so that the iframe w player assigned to it and

the pic in the corner don't crowd everything on mobile screens */

@media screen and (min-width: 0px) and (max-width: 720px) {

  footer:after { display: none; }

  .player { display: none; }

}

</style>

Who I'd like to meet: