/* gotta fetch the font for phone users */



  /* c o l o r s  &  b a c k g r o u n d  */

  /* if you want to play with the colors, change 'em in the root here */

  /* you can also change the background image, and resize your name */

  /* if you wanna keep it simple, stick to changing these. or go hog wild  */

  /* and venture below */

  /* changing the color of the spacehey logo is way further down btw */

  /* to change the transparency of all the boxes at once, */

  /* change the 0.33 of box_color_and_seethru into anything between 0.0 and 1.0 */

  /* you can also change the three other numbers to colorise the boxes. */

  /* for a list of css color names, check out */

  /* https://www.w3schools.com/colors/colors_names.asp */



  --headers: maroon;

  --links: indianred;

  --text: darksalmon;

  --names: mediumaquamarine;

  --search: indianred;

  --aboutmeheader: indianred;

  --online: indianred;

   --mynamesize: 35px;

  --background_image: url("https://i.imgur.com/Z6bCluL.jpeg");

  --cursor: url(‘https://lh3.googleusercontent.com/proxy/sXSvtcuc0iqJ8TlLxkU_zkXekDc6qQkijHX-wcMvNo8yw3R75OnyJ5Qq0Gbea0k0noThLLFpiyDIFcrFfsoUJqWwjA’), auto;         

 --font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;

  --box_color_and_seethru: rgba(0, 0, 0, 0.33);






  /* w h e r e  t h e  c o l o r s  e n d  u p */

  /* bit messy, this */


h2, h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/

a{color: var(--links) !important;} /* color of links */

p{color: var(--text) !important;} /* color of text */

h1, .count, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */

nav label{color: var(--search) !important;} /* color of search */

.section h4{color: var(--aboutmeheader) !important;} /* aboutme & want2meet headings */

.online{color: var(--online) !important;} /* color of the 'online' text */





  /* f o n t  f a m i l y */

  /* you can disable the allcaps. most people probably will */


h1, h2, h3, h4, h5, a, p, nav label{

font-family: var(--font-family) !important;           

 text-shadow:    2px 2px black !important;

 text-transform:uppercase !important;






  /* t h a t ' s  a  p a d d i n ' */

  /* on account of having round corners  */


h1, h2, h3, h4, h5, p {padding-left:5px !important;}






  /* s i z e  o f  y o u r  n a m e */

  /* you can also enable allcaps for it */



 font-size: var(--mynamesize) !important;

 text-transform:none !important;

 padding-left:10px !important;







  /* t h e  b a c k g r o u n d  i m a g e   */

  /* change the image in the root, everything else here */

  /* i should totally put an easy way to make a fullscreen bg here. stay tuned */


body {background-image: var(--background_image) !important;padding:5px !important; background-color: black !important;}



  /* here's some ideas (sfw, but you look at random images on the internet at your own risk!!    duh!):








  this one's an xmas wallpaper dump








  /*  b o x e s */

  /* if you want your boxes to look different, go at it here. transparency is tuned in the root*/


.heading, .url-info, .blurbs, .details, .mood, .blog-preview, .friends, .contact, .table{

background-color:var(--box_color_and_seethru) !important;

border-radius: 15px !important;

padding: 8px !important;

border: var(--borders) !important;



  /* f i n e t u n i n g */

  /* table-section doesn't wanna play nice. needs work */


.table-section{border:none !important;background-color:var(--box_color_and_seethru)!important;border-radius: 15px !important;}

.heading{background:none !important;padding-bottom:0px !important;}





  /* y o u r  f a c e */


@keyframes float {

                0% {

                                transform: translatey(0px);


                50% {

                                transform: translatey(-20px);


                100% {

                                transform: translatey(0px);





.general-about .profile-pic img{

border-radius: 200px;

animation: float 3s ease-in-out infinite;







  /*  f a c e s  o f  f r i e n d s */


.person a:nth-child(2) img{

border-radius: 50%;

transform: rotate(180deg);

animation: rotate 30s ease-in-out infinite;

animation-delay: 3s;



@keyframes rotate{

to{transform: rotate(540deg);}



a:hover, a:hover *{

transform: scale(1.55);

transition: transform 0.3s;

animation: WIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLEWIGGLE 3s ease-in-out infinite, cursorgifpointer 1.5s linear infinite;




8%{transform: rotate(-5deg);}

11%{transform: rotate(15deg);}

16%{transform: rotate(-15deg);}

19%{transform: rotate(7deg);}

22%{transform: rotate(-1deg);}

23%{transform: rotate(0deg);}



p:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, li:hover, .profile-pic img{

transform: scale(1.05);

transition: transform 0.3s;





transform: rotate3d(0,1,0,1800deg);

transition: transform 3s ease-in-out;




8%{transform: rotate(-.5deg);}

11%{transform: rotate(1.5deg);}

16%{transform: rotate(-1.5deg);}

19%{transform: rotate(.7deg);}

22%{transform: rotate(-.1deg);}

23%{transform: rotate(0deg);}



.details-table tr:nth-child(1) td:nth-child(1) p{width: 0;overflow: hidden;height: 0;}

.details-table tr:not(:first-child){font-size: 100%}


.details-table td{padding:0}


a{display: inline-block;}






  /* f a c e s  i n  c o m m e n t s */


.inner img{

outline:none !important;

filter: hue-rotate(00deg) drop-shadow(1px 1px 2px midnightblue) !important;

border-radius: 15px !important;






  /* e m b e d d i ng */

  /*this works for youtube well enough, dunno about the others. experiment! */


iframe{border-radius: 60px !important;opacity: 0.5 !important;}





  /* n a v  s t u f f  */

  /* you know, the thing on top */


nav{background-color:var(--box_color_and_seethru); !important;border-radius: 0px 0px 15px 15px; !important;}

nav ul{background:none !important;}

nav img{filter: opacity(30%) !important;}

nav ul a img, .mood a img{display:none !important;}

.top{background:none !important;background-color:rgba(0, 0, 0, 0.8); !important;}





  /* s p a c e h e y  l o g o */

  /* the color of the spacehey logo can be changed with the help of this awesome tool */

  /* https://codepen.io/sosuke/pen/Pjoqqp */

  /*you do indeed need the brightness 0 and saturate 100 at the start */


nav img{filter: brightness(0) saturate(100%) invert(10%) sepia(62%) saturate(4593%) hue-rotate(352deg) brightness(98%) contrast(117%) !important;}





  /* t h e  u r l - i n f o b o x  i s  h i d d e n  b y  d e f a u l t */

  /* cause who needs it...? delete this line to reveal it */


.url-info{display:none !important;}





  /* t a b l e  o f  i n t e r e s t s */

  /* change 0.0 to 0.3 or higher to make the individual cells darker. looks kinda cool */


td {background-color:rgba(0, 0, 0, 0.0) !important;border-radius: 15px !important;}





  /* l e t  t h e r e  b e  t r a n s p a r e n c y ,  a n d  r o u n d n e s s */

  /* change the last 0.0 to 0.3 to see what happens */


main{background-color:rgba(0, 0, 0, 0.0); !important;border-radius: 15px !important;}





  /* n o  b o r d e r s  a n y w h e r e */

  /* unless you want borders. in which case make that number bigger than 0px */

  /* if you wanna experiment with borders, make your own variable into the root imo */


.friends th, tr, td, th, .icon, #comments, main, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img


border: 0px dotted white !important;

outline: none !important;





  /*  (. _ . )  */

  /* the most illegal move in professional wrestling */


footer{display:none !important;}





  /* e x c e p t i o n s  e t c . */


.icon{border:none !important;}

.profile-info{border-radius: 15px !important;}

.comments-table{border-radius: 15px !important;border:none !important;}

.table-section{padding-bottom:7px !important;}

#comments{margin-top:15px !important;padding-bottom:15px !important}




  /* n o o b  h a c k e r y */

  /* all this to keep the "forward to friend" from overflowing with comic sans. wip */


.contact, .f-row, .f-col{padding-left:0px !important;margin-left:0px !important;margin-right:0px !important;padding-right:0px !important;}

.contact{padding-left:2px !important;}

.f-row{margin-bottom:3px !important;padding-bottom:0px !important;padding-top:2px !important;margin-top:0px !important;}

.f-col a{margin-left:-2px !important;padding-left:-2px !important;}

.contact{padding-bottom:12px !important;}





  /* s e a r c h  b a r */

  /* color the search bar using colors from root */


.search-wrapper input[type=text] {background-color: rgba(0, 0, 0, 0.5) !important;border: 1px dotted var(--headers) !important;color:var(--names) !important;border-radius: 10px !important;}

button{border-radius: 10px !important;border: 1px dotted var(--headers) !important;font-family: var(--font-family) !important;background-color:rgba(0, 0, 0, 0.5) !important;color:var(--headers) !important;}


/* cursor */


/* Start http://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/mechanics/mec-1/mec5.cur), auto !important;} /* End http://www.cursors-4u.com */








  /* that's all she wrote */

  /* author: spacehey.com/meh */

  /* here's hoping 2021 turns out better */