soph!

} @import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap'); body{font-family: "potta one" ;} @import url('https://fonts.googleapis.com/css2?family=Beau+Rivage&family=Jim+Nightshade&display=swap'); body{ /*background*/ background-color: black !important; background-image: url(https://i.imgur.com/hiNVRgyh.png) !important; background-attachment: scroll !important; background-repeat: repeat !important; background-position: center !important; font-family: 'Jim Nightshade', cursive !important; font-size: 25px; } body:before { content: " "; height: 100vh; width: 100vw; display: block; position: fixed; top: 0; left: 0; z-index: 100; background-image: url(https://i.imgur.com/otCimLt.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;} } } ::-webkit-scrollbar { width: 3px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(152, 1, 1, 1); } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 1); } .online{ content: url(https://i.imgur.com/I0kHf4s.png) !important; } .container{ } main{ /*profile background*/ background-color: transparent; } main:before { width: 100%; height: 300px; display: block; content: ""; box-shadow: 0px 0px 5px 1px #85050a; background-image: url(https://i.imgur.com/jWYLgrQ.png); background-position: center center; background-size: cover; } @media only screen and (max-width: 600px) { main:before{ height: 200px; } } .profile{ } a{ color: #756566!important; font-family: 'Beau Rivage', cursive !important; font-size: 15px; /*This is the following 2 are for links*/ } a:hover{ color: #750107!important; } a:visited{ color: #8f0108!important; } button{ background-color: #787878!important; background-image: url('URL') !important; /*url not needed*/ background-attachment: fixed !important; background-repeat: no-repeat !important; background-position: center !important; } h4{ } .top{ background-color: black !important; background-image: url(https://i.imgur.com/icyHPwK.png) !important; background-attachment: scroll !important; background-repeat: repeat !important; background-position: center !important; color: #a30000; border-radius: 25px 25px 0 0 !important; } main{ color: #ff2626!important; border-radius: 0 0 25px 25px !important; } footer{ color: #a30000; background-color: black!important; background-image: url(https://i.imgur.com/ai5uKTL.png) !important; background-attachment: fixed !important; background-repeat: repeat !important; background-position: center !important; } .logo{ background-color: transparent!important; background-image: url() !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-position: center !important; } .top label{ } .top input{ } .logout-btn{ font-family: 'Beau Rivage', cursive !important; } .top a{ color: #756566!important; /*This and the following 2 are for top section links*/ } .top a:hover{ color: #750107!important; } .top a:visited{ color: #8f0108!important; } .links{ background-color: black!important; background-image: url('URL') !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-position: center !important; } .links a{ color: #756566!important; } .links a:hover{ color: #750107!important; } .links a:visited{ color: #8f0108!important; } h1{ font-family: 'Beau Rivage', cursive !important; } .profile-pic{ } .profile-pic img{ } .general-about{ } .mood{ } .mood a{ } .mood a:hover{ } .mood a:visited{ } .mood b{ } .mood p{ } .contact .heading{ font-size:0; background-color: transparent !important; } .contact .heading:before{ content: "Volunteer your blood"; font-size:.8rem; font-weight:bold; text-align:center; color: #ff2626; } .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 Profile */ content: "☠️" } .contact{ } .contact a{ } .contact a:hover{ } .contact a:visited{ } .url-info{ } .url-info b{ } .url-info p{ } .table-section{ background-color: transparent !important; } .table-section .heading{ background-color: transparent !important; } table.details-table{ background-color: #8a0a12!important; background-image: url('URL') !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-position: center !important; } table, th, td{ /*interests section titles*/ border: 0px solid; color: #ff2626; } table.comments-table{ display: block; height: 250px!important; overflow-y: scroll; } :root { --lighter-blue: #691117; --light-orange: #691117; --topic1: "aspirations"; --topic2: "favorites"; --topic3: "likes"; --topic4: "dislikes"; --topic5: "hates"; --topic6: "me"; } .table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;} .details-table tr td:first-child p::after{ color:var(--links) !important; letter-spacing:normal !important; text-shadow: 2px 2px black !important; filter: brightness(95%) !important; } .table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{ content: var(--topic1); } .table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{ content: var(--topic2); } .table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{ content: var(--topic3); } .table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{ content: var(--topic4); } .table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{ content: var(--topic5); } .table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{ content: var(--topic6); } .profile .details-table td{ background-color: #8a0a12!important; background-image: url('URL') !important; background-attachment: fixed !important; background-repeat: no-repeat !important; background-position: center !important; } .profile-info{ } .blog-preview{ } .blog-preview h4{ font-size:0; } .blog-preview h4 a{font-size:.8rem;margin-left:5px; } .blog-preview h4:before{ content: "Stalk me"; font-size:.8rem; text-align:center; } } .blog-preview a{ } .blog-preview a:hover{ } .blog-preview a:visited{ } .blog-preview p{ } .blurbs{ } .blurbs .heading{ font-size:0; background-color: transparent !important; } .blurbs .heading:before{ content: "Stalk me some more"; font-size:.8rem; font-weight:bold; text-align:center; } } .blurbs .section h4{ } .blurbs .inner .section:nth-child(2) h4{ font-size:0; } .blurbs .inner .section:nth-child(2) h4:before{ content: "Dear diary"; font-size:.8rem; text-align: center !important; } .blurbs .inner .section:nth-child(2) h4{ font-size:0; } .blurbs .inner .section:nth-child(2) h4:before{ content: "Sincerely"; font-size:.8rem; text-align:center; } } .friends .heading{ font-size:0; background-color: transparent !important; } .friends .heading:before{ content: "All those bitten are in"; font-size:.8rem; font-weight:bold; text-align:center; } } .friends{ } .friends-grid{ color: #756566!important; } .friends a{ color: #756566!important; } .friends a:hover{ color: #750107!important; } .friends a:visited{ color: #8f0108!important; } .friends b{ } .friends p{ } .friends .person p{ } .friends#comments .heading{ font-size:0; } .friends#comments .heading:before{ content: "Love letters"; font-size:.8rem; font-weight:bold; text-align:center; } } .count{ } .more{ } .comments-table td{ } .pagination{ } footer{ } footer a{ } footer a:hover{ } footer a:visited{ } footer .links{ } footer .links a{ } footer .links a:hover{ } footer .links a:visited{ } @-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} * {cursor: url(https://ani.cursors-4u.net/symbols/sym-8/sym731.cur), auto !important;} body:before { content: " "; height: 100vh; width: 100vw; display: block; position: fixed; top: 0; left: 0; z-index: 100; background-image: url('https://24.media.tumblr.com/tumblr_loe48aWAXX1qmkxu0o1_500.gif'); background-size: cover; background-repeat: no-repeat; background-position:center; animation: yourAnimation 5s ease 0s 1 normal forwards; pointer-events: none; } @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } /* customization. change your artist, title and album cover respectively */ :root { --artist:"Deftones"; --title:"Be Quiet And Drive (Far Away)"; --albumcover: url(https://m.media-amazon.com/images/I/81BbQMTakEL._UF1000,1000_QL80_.jpg); } /* the code itself */ .status-bar,.title-bar,.title-bar-controls{display:flex}.window,p#butt{background:silver;margin:auto}p#text,p#text2{box-shadow:inset -1px -1px #fff,inset 1px 1px grey,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;margin-block:3px}p#butt,p#text,p#text2{box-sizing:border-box}p#label,p#text,p#text2{margin-block:3px}.status-bar,.title-bar-text,.toptoptop,p#butt,p#label,p#text2{user-select:none}@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:400;src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif.woff) format("woff");src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif.woff2) format("woff2")}@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:700;src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif_bold.woff) format("woff");src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif_bold.woff2) format("woff2")}.window{text-shadow:none;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;padding:3px}.window img{filter:none!important}.window *{-webkit-font-smoothing:none;font-family:"Pixelated MS Sans Serif",Arial;font-size:11px;text-shadow:inherit}.title-bar{align-items:center;background:linear-gradient(90deg,navy,#1084d0);justify-content:space-between}.title-bar-text{color:#fff;font-weight:700;letter-spacing:0;margin-right:24px;line-height:15px}.title-bar-controls p#butt{display:block;min-height:14px;min-width:16px;padding:0}.title-bar-controls p#butt:active{padding:0}.title-bar-controls p#butt:focus{outline:0}.title-bar-controls p#butt.minimize{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M0 0h6v2H0z'/%3E%3C/svg%3E");background-position:bottom 3px left 4px;background-repeat:no-repeat}.title-bar-controls p#butt.maximize{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 0H0v9h9V0zM8 2H1v6h7V2z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px left 3px;background-repeat:no-repeat}.title-bar-controls p#butt.close{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0V0z' fill='%23000'/%3E%3C/svg%3E");background-position:top 3px left 4px;background-repeat:no-repeat;margin-left:2px}.status-bar{gap:1px;margin:0 1px}p#butt{white-space:nowrap;}.buttontos,p#butt,p#label,p#text,p#text2{display:inline-block}.status-bar-field{box-shadow:inset -1px -1px #dfdfdf,inset 1px 1px grey;flex-grow:1;margin:0;padding:2px 3px}.window-body{margin:8px}p#butt{border:none;border-radius:0;min-height:23px;min-width:75px;padding:6px 12px 0;text-shadow:0 0 #222;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf;color:#000}p#butt:active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey;text-shadow:1px 1px #222}p#butt:focus{outline:#000 dotted 1px;outline-offset:-4px}p#butt::-moz-focus-inner{border:0}.toptoptop{text-align:left;margin-top:-3px!important;margin-bottom:5px!important;margin-inline:0px!important;}.toptoptop span{border:1px solid silver;padding:2px 4px}.toptoptop span:hover{border-top:1px solid #fff;border-left:1px solid #fff;border-bottom:1px solid gray;border-right:1px solid gray}.toptoptop span:focus{border:1px inset #fff}.window{color:#000!important;font-family:"Pixelated MS Sans Serif"!important}p#text:active{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h16v17H0V0zm1 16h14V1H1v15z' fill='gray'/%3E%3Cpath fill='silver' d='M1 1h14v15H1z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 7H5v1h1v1h1v1h1v1h1v-1h1V9h1V8h1V7z' fill='%23000'/%3E%3C/svg%3E")}p#text{background-color:#fff;padding:4px;width:85%;text-align:left;font-size:12px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");background-position:top 2px right 2px;background-repeat:no-repeat}p#text.artist:after{content:var(--artist)}p#text.title:after{content:var(--title)}p#text2:before{content:"";display:block;position:absolute;top:1px;left:1px;background:var(--albumcover);width:98%;height:96%;opacity:.5;background-size:cover;background-position:center;z-index:-1}p#text2{position:relative;padding:13px 4px;width:54%;font-size:20px;text-align:center;color:olive;background:#000;z-index:999}#butt,p#label{font-size:12px}p#label{width:fit-content;margin-right:5px}.ahhh{text-align:right}.title-bar{padding:2px}.title-bar-text img{vertical-align:bottom;margin-inline:2px}.buttontos{width:45%;height:54px;vertical-align:top;text-align:center}#butt{color:#000;text-shadow:1px 1px #fff;line-height:10px}#butt:not(:first-child){text-indent:-5px;font-weight:700}#butt:nth-child(3) span{display:block;transform:translate(2px,-2px) scale(1.2)}#butt:not(:first-child,:nth-child(2),:nth-child(3)){text-indent:-8px;font-weight:700;letter-spacing:-4px;font-size:10px}#butt:nth-child(8){text-indent:-8px;font-weight:700;letter-spacing:-1.5px;white-space:nowrap;text-shadow:none;transform:translateY(1px)}#butt:nth-child(8) span{display:block;transform:rotate(-90deg) translate(2px,0) scaleY(1.4);color:#000}.title,.artist{height:23px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:20px!important;vertical-align: bottom;} /*Snowflakes*/