<style>
/* We’ll call it custom class. How about keter? */
/** General **/
p.highlight {
color: #d1e3f0 !important;
font-style: italic;
font-weight: bold;
font-family: 'Roboto', sans-serif;
} /* highlight */
</style>
<style>
/* Font Imports */
@import url(‘https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap’);
/** Heading ^ **/
@font-face {
font-family: ‘Macaroni’;
src: url(‘https://dl.dropbox.com/s/4qiuixluj347xyx/Macaroni.ttf’);
}
@font-face {
font-family: ‘Roboto’;
src: url(‘https://dl.dropbox.com/s/f5nzxr90fa9sw4r/Roboto-Regular.ttf’);
}
/** Text ^ **/
</style>
<style>
/* General Gist */
p {
font-family: 'Roboto', sans-serif;
color: white;
font-size: 13.5px;
} /** Body Text **/
a{
background-color: #DAEDFF !important;
transition: background-color 660ms ease 0s;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} /** Link when not visited **/
a:visited {
color: #DAEDFF;
} /** Visited Link **/
a:hover {
background-color: white !important;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} /** Hovered Link **/
a:active {
color: #DAEDFF;
} /** Link going on **/
nav .links a:hover{
text-decoration: underline;
color: #DAEDFF;
} /** Link hover on nav **/
</style>
<style>
/* Logo */
.logo {
content: url(https://static.wikia.nocookie.net/testcss/images/9/92/Spacehey-RAMC.png/revision/latest/scale-to-width-down/800?cb=20230505131831);
} /** Spacehey is not affiliated with the Royal Army Medical Corps, I just love the regiment. If it isn’t allowed, you are permitted to shut my account down or warn me about it **/
/* Background */
body {
background-image: url(https://static.wikia.nocookie.net/testcss/images/7/7d/Eat_you.png/revision/latest/scale-to-width-down/800?cb=20230505150005);
background-size: 1500px;
background-attachment: fixed;
background-position: center;
}
/* Main Page */
main {
background-color: #deb6b9 !important;
border: 4.5px solid #cc979b !important;
color: white !important;
margin-top: 4.5px;
border-radius: 15px;
}
/* Headings [^^] */
.profile h2, h3, h4, h5, h6 {
font-family: 'Ubuntu', sans-serif;
color: white;
}
.profile h1 {
font-size: 110px;
font-family: 'Macaroni';
background: url(https://www.toptal.com/designers/subtlepatterns/uploads/hotel-wallpaper.png);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
animation: jellobabyyyyy 2s ease 0s infinite normal forwards;
} /* Thank you, Hanachi - Very inspired by her layout!! */
</style>
<style>
/* Animations */
float {
animation-name: floating;
amination-duration: 3s
}
@keyframes floating {
0% { transform: translate(0, -8px); }
50% { transform: translate(0, 8px); }
100% { transform: translate(0, -8px); }
}
jello {
animation-name: jellobabyyyyy;
animation-duration: 2s;
}
@keyframes jellobabyyyyy {
0% {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(0.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, 0.95, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
</style>
<style>
/* Profile */
.general-about, .mood {
animation: floating 3s ease-in-out infinite;
}
.general-about {
border: 4px solid #cc979b;
overflow: hidden;
padding: 4px;
}
.profile-pic {
border-radius: 15px;
border: 2px solid #cc979b;
overflow: hidden;
}
/** Mood **/
.mood {
margin-top: 3px;
border: 4px solid #cc979b;
padding: 4px;
}
/** Hiding Headings **/
.contact .heading, .friends .heading, .blurbs .heading {
display: none;
}
/** Hiding Borders **/
.profile .contact, .profile .url-info, .profile .table-section {
border: 4px solid rgba(255,255,255,0);
}
/** Contacts **/
.profile .contact {
border: 4px solid rgba(255,255,255,0);
}
/* contact icons /
.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 favorite /
content: “♥”
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/ send a message /
content: “💬”
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/ foward 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 2 group /
content: “🗣”
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/ report /
content: “👻”
} / Thank you from that layout idfk */
/** Blurbs Heading **/
.profile .blurbs .section h4 {
font-family: 'Ubuntu', sans-serif;
color: white;
}
/** Table Section **/
.table-section .heading {
background-color: #cc979b !important;
}
.profile .table-section .details-table td {
background-color: rgba(194,138,142,0.85);
}
.table-section td {
font-family: 'Ubuntu', sans-serif;
color: white !important;
}
/** Friends **/
.friends {
border: 4px solid #cc979b;
}
.profile .friends .person p {
font-family: 'Ubuntu', sans-serif;
color: white !important;
}
.profile .friends .person p:hover {
color: #e3d1d2;
} /* Thank you again, layout */
/** Friend’s Comments **/
.profile .comments-table {
margin-top: 3px;
overflow-x: hidden;
overflow-y: scroll;
border-spacing: 5px;
display: block;
background-color: #e6bcbe;
}
.profile .comments-table td {
background-color: transparent;
}
.profile .comments-table .comment-replies {
background-color: #de858c;
border-radius: 15px;
color: white;
border: 2px solid white;
}
.comments-table img, .person img {
border-radius: 20px;
filter: sepia(100%) hue-rotate(299deg);
opacity: .5;
}
/** The Navigation Bars (Top (w/ Links) + Footer) **/
.top, footer {
background-color: #ebd1d2 !important;
border-radius: 10px;
} /* Footer + Top customization */
.top {
color: black;
margin-bottom: 4.5px;
} /* Top Only */
.top a, .logout-btn {
font-family: 'Ubuntu', sans-serif;
color: black;
} /* Top Text */
.top .input {
background-color: #fff;
border: 1.5px solid #ebebeb;
} /* Search! */
/** Buttons **/
.top .button, .button {
background-color: #fff;
border-radius: 15px;
color: #ebebeb;
}
.links {
background-color: #dec1c2 !important;
border-radius: 15px;
} /* Links */
.links a {
text-shadow: 0px 0px 4px white;
} /* Links Text */
/** Online Icon **/
.online {
content: url(https://i739.photobucket.com/albums/xx31/pixelpeach/purple/thheart2.gif);
}
</style>
italicised text
