← Back to Layouts
Midnight Blue

Name: FriendRewind
Author: FriendRewind
Author: Liny!
Category: :D
Created: August 11, 2026
layout inspired by the one I currently use
made by me :D
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<style>

/* ===== MIDNIGHT BLUE ===== */

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

/* ===== TOP BAR ===== */

body:before{
content:'welcome • online • enjoy your stay';
display:block;
background:#0b0d12;
color:#e8edf5;
border-bottom:1px solid #3a4a5a;
padding:8px 14px;
font-size:12px;
letter-spacing:1px;
font-family:Arial, sans-serif;
text-shadow:0 0 6px rgba(255,255,255,.12);
}

/* ===== BACKGROUND ===== */

body{
background:
radial-gradient(circle at top, #243140 0%, #0a0c10 70%);
font-family:Arial, Verdana, sans-serif;
color:#e8edf5;
}

/* ===== MAIN ===== */

main{
background:#0d1015;
border:1px solid #2b3542;
border-radius:12px;
overflow:hidden;

box-shadow:
0 0 14px rgba(120,160,220,.10),
0 0 28px rgba(120,160,220,.06),
inset 0 0 18px rgba(255,255,255,.02);
}

/* ===== COLUMNS ===== */

.left.col,
.right.col{
background:
linear-gradient(#18202a, #0d1015);
border:1px solid #2f3a48;
border-radius:10px;

box-shadow:
0 0 10px rgba(120,160,220,.06),
inset 0 0 16px rgba(255,255,255,.02);
}

/* ===== HEADINGS ===== */

.left .heading,
.right .heading{
background:
linear-gradient(90deg,#11161d,#2a3745,#11161d) !important;

color:#f4f7fb !important;
border-bottom:1px solid #516275;
letter-spacing:1px;

text-shadow:0 0 6px rgba(255,255,255,.12);
}

/* ===== DECORATION ===== */

.left .heading:after,
.right .heading:after{
content:' ✦ ✦ ✦ ';
display:block;
text-align:center;
font-size:10px;
letter-spacing:4px;
color:#8fa0b3;
margin-top:4px;
}

/* ===== TEXT ===== */

p,
td,
li,
span{
color:#e8edf5 !important;
}

/* ===== LINKS ===== */

a{
color:#d9e7ff !important;
text-decoration:none;
transition:all .2s ease;
}

a:hover{
color:#ffffff !important;
text-shadow:0 0 10px rgba(190,220,255,.35);
}

/* ===== NAVIGATION ===== */

nav .top{
background:linear-gradient(#1a2430,#0d1015);
border:1px solid #334152;
}

nav .links{
background:linear-gradient(#18202a,#0d1015) !important;
border:1px solid #2d3948;
}

/* ===== TABLES ===== */

.details-table td{
background:
linear-gradient(135deg,#18202a,#0d1015) !important;
border:1px solid #334152;
border-radius:8px;
color:#f2f6fb !important;
}

/* ===== PROFILE PHOTO ===== */

.profile-pic img{
border:2px solid #b8c7d8;
border-radius:8px;

box-shadow:
0 0 16px rgba(200,220,255,.18),
0 0 6px rgba(255,255,255,.05);

filter:contrast(108%);
transition:all .25s ease;
}

.profile-pic img:hover{
transform:scale(1.03);
box-shadow:
0 0 24px rgba(200,220,255,.28),
0 0 8px rgba(255,255,255,.08);
}

/* ===== PROFILE TEXT ===== */

.profile .blurbs,
.profile .blurbs p,
.profile .blurbs h1,
.profile .blurbs h2,
.profile .blurbs h3,
.profile .blurbs h4,
.profile .blurbs span{
color:#eef3fa !important;
text-shadow:1px 1px 2px #000;
}

/* ===== COMMENTS ===== */

.comments-table td{
background:
linear-gradient(#18202a,#0d1015) !important;
color:#eef3fa !important;
}

/* ===== FOOTER ===== */

footer{
background:none;
opacity:.7;
}

footer:after{
content:' thanks for visiting • come back anytime ✦';
display:block;
text-align:center;
margin-top:8px;
font-size:11px;
color:#9fb0c2;
letter-spacing:1px;
}

/* ===== SUBTLE GRAIN ===== */

main:after{
content:'';
position:fixed;
inset:0;
pointer-events:none;

background-image:
radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);

background-size:4px 4px;
mix-blend-mode:screen;
opacity:.08;
}

/* ===== SELECTION ===== */

::selection{
background:#d9e7ff;
color:#000;
}

/* ===== SCROLLBAR ===== */

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

::-webkit-scrollbar-track{
background:#0a0c10;
}

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

::-webkit-scrollbar-thumb:hover{
background:#5c6f86;
}

/* ===== MOBILE ===== */

@media screen and (max-width:600px){

body:before{
font-size:10px !important;
padding:6px 10px !important;
letter-spacing:.5px !important;
}

main{
padding:5px !important;
}

.left.col,
.right.col{
width:100% !important;
float:none !important;
margin:0 !important;
}

.profile-pic img{
max-width:120px !important;
height:auto !important;
}

nav .links{
font-size:12px !important;
}

.details-table td{
font-size:12px !important;
}

}

</style></style>