♪... ꒰ᐢ. .ᐢ꒱...ִֶָ. ..𓂃 ࣪ ִֶָ🦇་༘࿐

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{ content: " ...🍮"; } .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: https://wilardo.crd.co/assets/images/gallery14/a7e0defa_original.jpg?v=d0e71742 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; }