css
/* styles.css */

body {
  font-family: "Helvetica", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
  background-image: linear-gradient(135deg, #f2f2f2, #d9d9d9, #f2f2f2);
  background-size: 100px 100px;
  background-position: 0 0;
  background-repeat: repeat;
  -webkit-background-clip: border-box;
  -webkit-background-size: 100px;
}

body::before {
  content: "Silica Solutions";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 32px;
  color: #f00;
  padding: 4px 4px 4px 4px;
  font-family: "Bangers", sans-serif;
  text-align: right;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(135deg, #f2f2f2, #d9d9d9, #f2f2f2);
  background-position: 100% 100%;
  background-size: 100px 100px;
  background-repeat: no-repeat;
  -webkit-background-clip: border-box;
  -webkit-background-size: 100px;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background-color: #f2f2f2;
  background-image: linear-gradient(135deg, #f2f2f2, #d9d9d9, #f2f2f2);
  background-position: 0 0;
  background-size: 100px 100px;
  background-repeat: repeat;
  -webkit-background-clip: border-box;
  -webkit-background-size: 100px;
  border-bottom: 4px solid #000;
  border-top: 4px solid #000;
  font-size: 16px;
  font-family: "Bangers", sans-serif;
  text-align: center;
  padding: 8px 8px 8px 8px;
  color: #000;
}

#header a {
  text-decoration: none;
  color: #000;
  font-size: 14px;
  font-family: "Bangers", sans-serif;
  text-align: left;
  padding: 8px 16px 8px 16px;
  background-image: linear-gradient(135deg, #f2f2f2, #d9d9d9, #f2f2f2);
  background-position: 0 0;
  background-size: 100px 100px;
  background-repeat: repeat;
  -webkit-background-clip: border-box;
  -webkit-background-size: 100px;
}

#header a:hover {
  background-color: #000;
  color: #f00;
  border-bottom: 4px solid #f00;
  border-top: 4px solid #f00;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border 0.2s ease-out;
  -webkit-transition: background-color 0.2s ease-out, color 0.2s ease-out, border 0.2s ease-out;
}

#content {
  padding-top: 64px;
  margin-left: 16px;
  margin-right: 16px;
  border: 4px solid #000;
  border-bottom: 4px solid #000;
  border-radius: 4px;
  background-color: #f2f2f2;
  background-image: linear-gradient(135deg, #f2f2f2, #d9d9d9, #f2f2f2);
  background-position: 0 0;
  background-size: 100px 100px;
  background-repeat: repeat;
  -webkit-background-clip: border-box;
  -webkit-background-size: 100px;
}

#content h2 {
  font-size: 24px;
  font-family: "Bangers", sans-serif;
  text-align: left;
  margin: 16px 16px 8px 16px;
  padding: 8px 16px 8px 16px;
  background-color: #f2f2f2;
  background-image: linear-gradient(135deg, #f2f2f2, #d9d9d9, #f2f2f2);
  background-position: 0 0;
  background-size: 100px 100px;
  background-repeat: repeat;
  -webkit-background-clip: border-box;
  -webkit-background-size: 100px;
}

#content h2 a {
  text-decoration: none;
  color: #000;
  font-size: 18px;
  font-family: "Bangers", sans-serif;
  text-align: left;
  padding: 8px 16px 8px 16px;
  background-image: linear-gradient(135deg, #f2f2f2, #d9d9d9, #f2f2f2);
  background-position: 0 0;
  background-size: 100px 100px;
  background-repeat: repeat;
  -webkit-background-clip: border-box;
  -webkit-background-size: 100px;
}

#content p {
  margin: 16px 16px 8px 16px;
  padding: 8px 16px 8px 16px;
  background-color: #f2f2f2;
  background-image: linear-gradient(135deg, #f2f2f2, #d9d9d9, #f2f2f2);
  background-position: 0 0;
  background-size: 100px 100px;
  background-repeat: repeat;
  -webkit-background-clip: border-box;
  -webkit-background-size: 100px;
}

#content a {
  text-decoration: none;
  color: #000;
  font-size: 14px;
  font-family: "Bangers", sans-serif;
  text-align: left;
  padding: 8px 16px 8px 16px;
  background-image: linear-gradient(135deg, #f2f2f2, #d9d9d9, #f2f2f2);
  background-position: 0 0;
  background-size: 100px 100px;
  background-repeat: repeat;
  -webkit-background-clip: border-box;
  -webkit-background-size: 100px;
}

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 64px;
  background-color: #f2f2f2;
  background-image: linear-gradient(135deg, #f2f2f2, #d9d9d9, #f2f2f2);
  background-position: 0 0;
  background-size: 100px 100px;
  background-repeat: repeat;
  -webkit-background-clip: border-box;
  -webkit-background-size: 100px;
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
  font-size: 16px;
  font-family: "Bangers", sans-serif;
  text-align: center;
  padding: 8px 8px 8px 8px;
  color: #000;
}

#footer a {
  text-decoration: none;
  color: #000;
  font-size: 14px;
  font-family: "Bangers", sans-serif;
  text-align: left;
  padding: 8px 16px 8px 16px;
  background-image: linear-gradient(135deg, #f2f2f2, #d9d9d9, #f2f2f2);
  background-position: 0 0;
  background-size: 100px 100px;
  background-repeat: repeat;
  -webkit-background-clip: border-box;
  -webkit-background-size: 100px;
}

/* 
  <h2>Expert-level Procrastination Techniques</h2>
  <p>Procrastination is not just a hobby, it's an art form.</p>
  <a href="/silica-solutions/expert-level-procrastination-techniques/1-pretend-to-be-busy" style="text-decoration: none;">1. Pretend to be busy</a>
  <a href="/silica-solutions/expert-level-procrastination-techniques/2-learn-to-play-games" style="text-decoration: none;">2. Learn to play games</a>
  <a href="/silica-solutions/expert-level-procrastination-techniques/3-watch-videos" style="text-decoration: none;">3. Watch videos</a>
  <a href="/silica-solutions/expert-level-procrastination-techniques/4-create-schedule" style="text-decoration: none;">4. Create a schedule</a>
  <a href="/silica-solutions/expert-level-procrastination-techniques/5-make-something-else" style="text-decoration: none;">5. Make something else</a>
  <a href="/silica-solutions/expert-level-procrastination-techniques/6-take-breaks" style="text-decoration: none;">6. Take breaks</a>
  <a href="/silica-solutions/expert-level-procrastination-techniques/7-ask-for-more-time" style="text-decoration: none;">7. Ask for more time</a>
  <a href="/silica-solutions/expert-level-procrastination-techniques/8-pretend-you-cant-read" style="text-decoration: none;">8. Pretend you can't read</a>
  <a href="/silica-solutions/expert-level-procrastination-techniques/9-reorganize-your-space" style="text-decoration: none;">9. Reorganize your space</a>
  <a href="/silica-solutions/expert-level-procrastination-techniques/10-claim-you-are-ill" style="text-decoration: none;">10. Claim you are ill</a>
  <p>Remember, procrastination is a skill that takes practice.</p>
  <p>Practice makes perfect, or so they say.</p>
  <div class="footer">
    <a href="/silica-solutions/expert-level-procrastination-techniques" style="text-decoration: none;">Back to Expert-level Procrastination Techniques</a>
  </div>
  <div class="footer">
    <a href="/silica-solutions/expert-level-procrastination-techniques/next" style="text-decoration: none;">Next page</a>
  </div>
  <div class="footer">
    <a href="/silica-solutions/expert-level-procrastination-techniques/back" style="text-decoration: none;">Back</a>
  </div>
  <div class="footer">
    <a href="/silica-solutions/expert-level-procrastination-techniques/home" style="text-decoration: none;">Home</a>
  </div>