Layout CSS
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
WHIMSYGOTH DREAM
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Cormorant+Garamond:wght@400;600&display=swap');
/* Background */
body{
background:
linear-gradient(rgba(10,8,18,.72),rgba(10,8,18,.72)),
url("https://images.unsplash.com/photo-1519682337058-a94d519337bc?auto=format&fit=crop&w=2000&q=80");
background-size:cover;
background-attachment:fixed;
color:#efe8ff;
font-family:'Cormorant Garamond',serif;
}
/* Sparkles */
body:before{
content:"";
position:fixed;
inset:0;
background-image:
radial-gradient(white 1px, transparent 1px),
radial-gradient(#c49eff 1px, transparent 1px),
radial-gradient(#fff7d9 .8px, transparent .8px);
background-size:
160px 160px,
220px 220px,
300px 300px;
animation:stars 120s linear infinite;
opacity:.55;
pointer-events:none;
}
@keyframes stars{
from{transform:translateY(0);}
to{transform:translateY(-900px);}
}
/* Floating moon */
body:after{
content:"☾";
position:fixed;
right:60px;
top:40px;
font-size:130px;
opacity:.18;
color:#ffffff;
text-shadow:
0 0 20px white,
0 0 60px #c48cff;
animation:float 8s ease-in-out infinite;
pointer-events:none;
}
@keyframes float{
50%{transform:translateY(15px);}
}
/* Every box */
.box,
table,
.blog-preview,
.comments,
.contact,
.blurbs,
.friends{
background:rgba(20,18,34,.65)!important;
backdrop-filter:blur(14px);
border:2px solid rgba(201,155,255,.45)!important;
border-radius:25px;
box-shadow:
0 0 30px rgba(177,120,255,.35),
inset 0 0 25px rgba(255,255,255,.05);
}
/* Headings */
h1,h2,h3,.heading{
font-family:'Cinzel',serif;
letter-spacing:3px;
color:#f6edff!important;
text-shadow:
0 0 10px #d6a6ff,
0 0 18px #9f63ff;
}
/* Links */
a{
color:#dab8ff!important;
transition:.35s;
}
a:hover{
color:white!important;
text-shadow:
0 0 12px #ffffff,
0 0 20px #cb9cff;
}
/* Images */
img{
border-radius:15px;
border:2px solid #b37cff;
box-shadow:
0 0 15px rgba(214,173,255,.4);
transition:.4s;
}
img:hover{
transform:scale(1.03);
box-shadow:
0 0 30px #dcb4ff;
}
/* Scrollbar */
::-webkit-scrollbar{
width:12px;
}
::-webkit-scrollbar-track{
background:#171325;
}
::-webkit-scrollbar-thumb{
background:#8d5fd6;
border-radius:20px;
}
/* Selection */
::selection{
background:#ab6bff;
color:white;
}
/* Blockquotes */
blockquote{
border-left:3px solid #d2b1ff;
padding-left:15px;
font-style:italic;
color:#efe0ff;
}
/* Glitter Animation */
@keyframes sparkle{
0%{opacity:.2;}
50%{opacity:1;}
100%{opacity:.2;}
}
.star{
animation:sparkle 2s infinite;
}
Comments (0)
No comments yet. Be the first!
Log in to leave a comment.