← Back to Layouts
Orange matrix

Name: FriendRewind
Author: FriendRewind
Author: 0xdeadbeef
Category: Colorful
Created: May 13, 2026
See Layout
Comments (0)

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

<style>

/* ===== GLOBAL ===== */

body {
  font-family: "Lucida Console", monospace;
  background-color: black;
  background-image: url('https://i.pinimg.com/originals/6f/a1/7e/6fa17e99b9ac470d8469d57c4d3efd8b.png');
  background-size: contain;
  background-attachment: fixed;
  background-position: center;
  color: #ff6600;
  overflow-x: hidden;
}

/* CRT Scanlines */
body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.4) 50%);
  background-size: 100% 2px;
  z-index: 2;
  pointer-events: none;
}

/* ===== GLITCH EFFECT ===== */

@keyframes glitch {
  0% { text-shadow: 2px 0 #ff0000, -2px 0 #ffaa00; }
  20% { text-shadow: -2px 0 #ff0000, 2px 0 #ffaa00; }
  40% { text-shadow: 2px 2px #ff3300, -2px -2px #ffaa00; }
  60% { text-shadow: -2px -2px #ff0000, 2px 2px #ffaa00; }
  80% { text-shadow: 2px 0 #ff0000, -2px 0 #ffaa00; }
  100% { text-shadow: none; }
}

h1, h4, .logo {
  animation: glitch 0.8s infinite;
  color: #ff6600 !important;
}

/* ===== TEXT & LINKS ===== */

p, i, b, .count {
  color: #ff8800 !important;
}

a, .profile .friends .person p, .logout-btn {
  color: #ff6600 !important;
  text-decoration: underline !important;
}

a:hover {
  color: #ffffff !important;
  text-shadow: 0 0 8px #ff6600;
}

/* ===== INPUTS ===== */

#q, button {
  color: #ff6600;
  background-color: black;
  border: 1px solid #ff6600;
  font-family: inherit;
}

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

nav, nav .links a {
  color: #ff6600;
}

nav .top {
  margin-top: 2px;
  background-color: black;
  border: 2px dotted #ff6600;
  border-bottom: none;
}

nav .links {
  background-color: black;
  border: 2px solid #ff6600;
}

nav .info {
  background: none;
}

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

main {
  background: rgba(0, 0, 0, 0.85);
  color: #ff6600;
  border-left: 2px dotted #ff6600;
  border-right: 2px dotted #ff6600;
}

/* ===== BOXES ===== */

.heading, .url-info {
  color: #ff6600 !important;
  background-color: black !important;
  border: 2px solid #ff6600 !important;
}

.inner {
  color: #ff8800 !important;
  border: 2px dotted #ff6600;
  border-top: none;
}

.profile-info {
  border: 2px solid #ff6600;
}

.details-table, td {
  border: 1px solid #ff6600;
  border-collapse: collapse;
}

td {
  color: #ff8800 !important;
  background-color: black !important;
}

table.details-table {
  max-width: 98%;
}

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

#comments {
  border-bottom: 2px dotted #ff6600;
}

.comments-table {
  border: none;
  border-collapse: collapse;
}

.comment-replies {
  border: 1px solid #ff6600;
  margin: 2px;
}

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

footer {
  background: black;
  border: 2px dotted #ff6600;
}

footer p {
  color: #ff6600 !important;
}

/* ===== REMOVE ICONS ===== */

.icon {
  display: none;
}

/* ===== TITLE SIZE ===== */

.profile h1 {
  font-size: 2.2em;
  letter-spacing: 3px;
  text-transform: uppercase;
}

</style>