/* THE GRUNGY OVER-CONTRAST */
html {
  filter: saturate(100%) contrast(200%);
}

@font-face {
  font-family: "Smash";
  src: url("Smash-Regular.ttf");
  font-display: swap;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Smash", "MS PGothic", Arial, sans-serif;
  /* TEXT COLOR CHANGED TO WHITE */
  color: white; 
  background-color: black;
  background-image: url("https://shnoazo.neocities.org/crustywalter574@gmail.com/fdggfd.jpg");
  background-size: 1000px 1500px;
  background-repeat: repeat;
}

/* GLOBAL TEXT STYLING: WHITE WITH BLACK OUTLINE & SHADOW */
h1, h2, h3, p, nav, div, footer, a {
  color: white;
  text-decoration: none;
  /* The "Outline" effect + Drop Shadow */
  text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     2px  2px 5px rgba(0,0,0,0.8);
}

.container {
  max-width: 70rem;
  margin: 5vw auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  position: relative;
}

/* THE OUTER BORDER */
.container::after {
  content: "";
  position: absolute;
  top: -100px; left: -100px; right: -100px; bottom: -100px;
  background-image: url("https://shnoazo.neocities.org/crustywalter574@gmail.com/border.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1500px;
  z-index: -1;
  pointer-events: none;
}

/* SECTION BACKGROUND (CONTENT BOXES) */
section {
  border: 2px solid black;
  padding: 15px;
  background-image: url("https://shnoazo.neocities.org/crustywalter574@gmail.com/gdfgfdg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* NAVIGATION BACKGROUND (DIFFERENT IMAGE) */
nav {
  border: 2px solid black;
  padding: 15px;
  /* PUT YOUR NAV-SPECIFIC IMAGE URL BELOW */
  background-image: url("https://shnoazo.neocities.org/crustywalter574@gmail.com/RF.png");
    webkit-mask-image: url(https://i.ibb.co/JjDXBPr/ED5929-CE-1-D66-4-EC4-8-F8-A-14792-D8-F2384.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
border-radius: 15px;
-webkit-mask-position: center;   

  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}

nav a {
  display: block;
  margin: 10px 0;
  font-weight: bold;
  transition: transform 0.1s;
}

nav a:hover {
  transform: scale(1.05);
  color: #ff0000; /* Subtle red hint only on hover */
}

.small { flex: 1 1 300px; }
.full { flex: 1 1 100%; }

img { max-width: 100%; height: auto; display: block; margin: 10px auto; }

footer {
  width: 100%;
  text-align: center;
  padding: 20px;
}