Naomi

} /* font-family */ @font-face { font-family: "PenetrationOutGrunge-JvyM"; src: url('//dl.dropbox.com/s/3wt5r6e8l5xrc66/PenetrationOutGrunge-JvyM.ttf'); } @font-face { font-family: "RavenouslyDemoGrunge-Ea9OW"; src: url('//dl.dropbox.com/s/ydwh9wmm0k5a2bo/RavenouslyDemoGrunge-Ea9OW.ttf'); } /* this is where the colors are rooted */ :root{ --headers: #ff3884; --text: #cc6aa3; --names: #ff458c; --links: #cf0064; --hover: #fc00a0; --borders: 4px double #fc00a0; --background_image: url('https://i.pinimg.com/564x/dd/3e/f6/dd3ef6d2505a68035ad84b5b52b400db.jpg'); --font-family: "RavenouslyDemoGrunge-Ea9OW"; --curve: 0px; /* the higher the number, the rounder the border. (try putting 50 as an example) */ } /* this is where the colors for specific things are located */ h3, h4, h5{color: var(--headers) !important;} /* headings*/ a{color: var(--links) !important;} /* color of links */ a:hover{color: var(--hover) !important;} /* color of links on hover */ p, b, h2, .count {color: var(--text) !important;} /* color of text */ .friends a p{color: var(--names) !important;} /* color of names, and friends counter */ .friends a:hover p{color: var(--hover) !important;} /* color of names on hover */ nav label{color: var(--links) !important;} /* color of search */ .section h4 {display:none;} /* aboutme & want2meet headings */ .blurbs .heading {display:none;} /* hides the blurbs title. if you want it to show, replace with the code: color: var(--headers) !important; */ /* .details-table td:first-child{display:none;} this code hides the general-heroes titles */ /* this is where your background image ends up being styled */ body{ background-image: var(--background_image)!important; background-color: #000; background-size: contain; background-attachment: fixed; color: var(--text)!important; } /* this is where your name appears */ h1{ color: #ff30cf; font-family: "PenetrationOutGrunge-JvyM"; font-size:30px !important; font-weight: bold; text-align: center; background-color: rgba(0,0,0,0.5); border: var(--borders); } /* the navigation is adjusted here */ nav{ background-color: rgba(0,0,0,0.5); border: var(--borders); border-radius: var(--curve); } nav .top{ background: transparent; color:var(--links); } nav .top a, nav .links a{ color: var(--text); text-shadow:none; } nav .links{ color: var(--text); background-color: transparent; border-radius: var(--curve); text-align: center; } /* this is the line that appears between links in the header and footer. you can add an emoji or symbol instead of the default line it has */ nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{ content: " ✦"; color: var(--links); } /* this is the spacehey logo color. you can change it at https://codepen.io/sosuke/pen/Pjoqqp */ nav img.logo{ filter: brightness(0) saturate(100%) invert(8%) sepia(84%) saturate(3937%) hue-rotate(358deg) brightness(108%) contrast(117%)!important; } /* the search wrapper and button */ .search-wrapper input[type=text] { background-color: transparent !important; border: 1px solid var(--links) !important; color:var(--links) !important; border-radius: var(--curve) !important; } button{ border-radius: var(--curve) !important; border: 0px solid var(--links) !important; font-family: var(--font-family) !important; background-color: transparent !important; color:var(--links) !important; } /* the online symbol and text */ /* font family for the headers, navigtion links, links, body text */ h2, h3, h4, h5{ font-family: "PenetrationOutGrunge-JvyM"; font-size: 20px; font-weight: normal; } a, p, b, nav label, .section{ font-family: var(--font-family) !important; font-size: 14px; font-weight: bold; } /* the hr code. the hr is the horizontal line when you want to separate important info or add a break in your paragraphs*/ hr{ height:1px; background: var(--links); border: none; } /* this is where you adjust the borders and background */ .blurbs, .friends, .profile .table, .blog-preview, .contact{ border-radius: var(--curve) !important; border: var(--borders) !important; background-color: rgba(0,0,0,0.5)!important; } .general-about .details{ border-radius: var(--curve) !important; border: var(--borders) !important; background-color: rgba(0,0,0,0.5)!important; padding:20px; text-align: right; } .mood{ border-radius: var(--curve) !important; border: var(--borders) !important; background-color: rgba(0,0,0,0.5)!important; text-align: center; padding:5px; } .icon{border:none !important;} .comment-replies{border:2px dotted #ff007b;} /* this is the border around the replies */ .comment-reply:not(:first-child){border-top: 2px dotted var(--links);} /* line in between comment replies*/ /* your interest and comments table row background color */ td{ background-color: transparent!important; } /* the middle section of your profile background color*/ main{ background: transparent; border-radius: var(--curve) !important; border: transparent !important; outline: none !important; } /* the interest table */ .table-section{ background-color:transparent!important; border:var(--borders)!important; background-color: rgba(0,0,0,0.5)!important; } .details-table{ border-spacing:0px 10px; } .details-table td{ border-top:1px solid darkred; padding:5px; } /* the header section of the boxes */ .heading, .blog-preview h4, .section h4{ background: none !important; text-align: center; } /* this is the box that says "Edit Info" when you're logged in, and to your friends it says "Profile Name is your friend". */ .profile-info { background-color: rgba(0,0,0,0.5); border: var(--borders) !important; border-radius: var(--curve) !important; } /* adjusting images borders and adding styling if you want to */ .profile-pic img{ outline:none !important; border-radius: var(--curve) !important; padding:6px; border: none; } /* you can remove text-align:center; if you don't want your friends to be centered */ .friends-grid{ text-align: center; } .friends-grid img{ border-radius: var(--curve) !important; filter: brightness(70%); } /* margin and padding */ h2, h3, h4, h5, p{padding-left:5px !important;} /* this is important when you have rounded corners */ .profile .table-section .heading, .blog-preview .heading, .profile .friends .heading{padding: 5px!important;} /* add space to the titles */ .friends, .mood, .general-about .details{margin-bottom: 20px;} /* this adds space between sections */ /* custom contact you can change the content: "✦" to content: url('image-url-here'); */ .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 { /* add to friends */ content: "▸" } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* add to favorites */ content: "▸" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* Send Message */ content: "▸" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* forward to friend */ content: "▸" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* instant message */ content: "▸" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* block user */ content: "▸" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* add to group */ content: "▸" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* report user */ content: "▸" } /* where your spacehey url goes. you can add a picture here instead. if you don't want a picture or the url just remove this code and add this: .url-info{display:none;} */ .url-info{ background-image: url('https://i.pinimg.com/736x/73/5a/9c/735a9c9883361e25dbbcbc5e5f98f738.jpg'); background-size: 100%; background-repeat: no-repeat; height: 193px; border: var(--borders)!important; border-radius: var(--curve); } .url-info p{ opacity: 0.0; } /* this is the comments table scroll code. you can delete this if you don't want a scroll box */ .comments-table { display: block; height: 500px!important; overflow-y: scroll; border: 0px dotted #e6007a !important; outline: none !important; border-radius: 8px; padding:5px; border-spacing: 4px; /* this changes the distance between boxes */ } /* this styles the first column */ .comments-table td:first-child{ background-image: url('https://i.pinimg.com/736x/73/5a/9c/735a9c9883361e25dbbcbc5e5f98f738.jpg'); background-size: cover; background-position: center; } .comments-table td{ background-image: url(''); background-size: cover; background-position: center; border: 2px solid #e6007a; padding:10px; border-radius: 0px; } footer{ background-color: rgba(0,0,0,0.5); border: var(--borders); border-radius: var(--curve); padding:5px; } /* Scrollbar styles */ ::-webkit-scrollbar { width: 5px; height: 10px; } ::-webkit-scrollbar-track { border-radius: var(--curve); border: 1px solid #e6007a; } ::-webkit-scrollbar-thumb { background: #e6007a; border-radius: var(--curve); } @-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} .online{content:url("https://www.myspacegens.com/images/online_now/1.gif"); } /*TINY SKULL*/