Cosmic Breach

Layout CSS

<style>
/* === FRIENDREWIND: TOTAL SPACE CONVERSION === */

@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Share+Tech+Mono&display=swap');

/* 1. NUKE THE DEFAULT UI */
body, html, .container, .main-content, #wrap, .content {
background: #000 url("https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExOHpwaG54ZzR4ZzR4ZzR4ZzR4ZzR4ZzR4ZzR4ZzR4ZzR4ZzR4ZzR4Zz/3o7TKVUn7iM8FMEU24/giphy.gif") fixed !important;
background-size: cover !important;
color: #00f2ff !important;
font-family: 'Share Tech Mono', monospace !important;
}

/* 2. THE TOP NAV - "COCKPIT GLASS" EFFECT */
nav, .navbar, #header, .top {
background: rgba(0, 20, 40, 0.8) !important;
border-bottom: 2px solid #00f2ff !important;
backdrop-filter: blur(10px);
box-shadow: 0 0 20px #00f2ff;
}

nav a, .navbar a {
color: #00f2ff !important;
text-transform: uppercase;
font-weight: bold;
text-shadow: 0 0 5px #00f2ff;
}

/* 3. THE MAIN CONTENT BOX - STARSHIP HULL */
main, .blog-entry, .profile-info, .comments, #main {
background: rgba(0, 0, 0, 0.85) !important;
border: 3px solid #00f2ff !important;
border-radius: 0px !important;
box-shadow: 0 0 30px rgba(0, 242, 255, 0.3), inset 0 0 20px rgba(0, 242, 255, 0.2) !important;
padding: 20px !important;
position: relative;
overflow: visible;
}

/* Add an "Industrial" scanline over the content */
main::after {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
background-size: 100% 3px, 3px 100%;
pointer-events: none;
}

/* 4. HEADERS - "TACTICAL DISPLAY" */
h1, h2, h3, .title {
font-family: 'Audiowide', cursive !important;
color: #fff !important;
text-transform: uppercase;
letter-spacing: 4px;
background: linear-gradient(90deg, #00f2ff, transparent);
padding: 10px !important;
border-left: 10px solid #fff !important;
text-shadow: 2px 2px #ff0055 !important;
}

/* 5. SIDEBAR / USER INFO BOX */
.col.left, .user-info {
border: 1px solid #00f2ff !important;
background: rgba(0, 242, 255, 0.05) !important;
}

/* 6. BUTTONS & KUDOS - RE-STYLED FOR REAL THIS TIME */
.kudos-btn, .btn, button, input[type="submit"] {
background: #000 !important;
border: 2px solid #00f2ff !important;
color: #00f2ff !important;
font-family: 'Audiowide' !important;
font-size: 14px !important;
padding: 10px 20px !important;
cursor: crosshair !important;
text-transform: uppercase;
transition: 0.3s;
box-shadow: 4px 4px 0px #00f2ff;
}

.kudos-btn:hover, .btn:hover {
background: #00f2ff !important;
color: #000 !important;
box-shadow: 0 0 20px #00f2ff;
}

/* 7. FOOTER - PURGE THE GREY */
footer, .footer, .bottom {
background: #000 !important;
border-top: 2px solid #00f2ff !important;
color: #00f2ff !important;
}

/* Scrollbar from Hell */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #00f2ff; border: 1px solid #fff; }

</style>