Whimsygoth

Layout CSS

/* ===========================
      WHIMSYGOTH LAYOUT
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500&family=Cormorant+Garamond:wght@400;600&display=swap');

/* Background */

body{
background:
linear-gradient(rgba(15,10,25,.82),rgba(15,10,25,.82)),
url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1920&q=80");
background-size:cover;
background-attachment:fixed;
font-family:'Cormorant Garamond',serif;
color:#efe6ff;
}

/* Floating sparkles */

body::before{
content:"";
position:fixed;
inset:0;
pointer-events:none;
background-image:
radial-gradient(white 1px, transparent 1px),
radial-gradient(#d8b4ff 1px, transparent 1px);
background-size:140px 140px;
opacity:.35;
animation:stars 80s linear infinite;
}

@keyframes stars{
from{transform:translateY(0);}
to{transform:translateY(-500px);}
}

/* Links */

a{
color:#d9b8ff!important;
transition:.3s;
text-decoration:none;
}

a:hover{
color:white!important;
text-shadow:0 0 12px #c98cff;
}

/* Main boxes */

.blurbs,
.contact,
.friends,
.blog-preview,
.comments,
.table-section{

background:rgba(22,18,35,.72)!important;

backdrop-filter:blur(8px);

border:1px solid rgba(201,140,255,.55)!important;

border-radius:18px;

box-shadow:
0 0 25px rgba(178,110,255,.35);

padding:12px;
margin-bottom:18px;
}

/* Headers */

.heading{

background:linear-gradient(
90deg,
#26103d,
#4f2b68);

border-radius:12px;

padding:8px;

font-family:'Cinzel',serif;

letter-spacing:2px;

color:#f3e7ff!important;

text-shadow:0 0 10px #d59fff;
}

/* Profile */

.profile-pic img{

border-radius:50%;

border:3px solid #d7a7ff;

box-shadow:0 0 18px #b56fff;
}

/* Tables */

table{

background:transparent!important;

color:#f6edff!important;
}

/* Scrollbar */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#1c1527;
}

::-webkit-scrollbar-thumb{
background:#9d63d5;
border-radius:10px;
}

/* Moon */

body::after{

content:"☾";

position:fixed;

top:30px;

right:40px;

font-size:90px;

color:#f8e9ff;

opacity:.18;

pointer-events:none;

font-family:serif;

text-shadow:
0 0 20px white,
0 0 40px #d9b7ff;
}

/* Quotes */

blockquote{

border-left:3px solid #bb8eff;

padding-left:12px;

font-style:italic;

color:#ecd7ff;
}

/* Music player */

audio{

filter:
brightness(.9)
hue-rotate(250deg);
}

/* Friend icons */

.friend img{

border-radius:12px;

border:2px solid #a96fff;

transition:.3s;
}

.friend img:hover{

transform:scale(1.06);

box-shadow:0 0 20px #d8a0ff;
}