@font-face {
  font-family: 'Departure Mono';
  src: url("../fonts/DepartureMono-Regular.woff2") format('woff2');
  font-weight: normal;
  font-style: normal;
}

:root {
  --primary-red: rgba(168, 38, 22, 1);
  --primary-orange: rgba(204,93,73);
  --primary-yellow: rgba(253, 227, 68, 1);
  --border-gold: rgba(188, 168, 55, 1);
  --border-grey: rgba(167, 152, 157, 1);
  --menu-blue: rgba(86, 103, 211, 1);
  --bg-dark: rgba(20, 20, 20, 0.5);
  --bio-bg: rgba(20, 20, 20, 0.6);
}

.wip{
  color: var(--primary-red);
  display: flex;
  justify-content: center; 
  align-items: center;     
  text-align: center;
  height: 200px;        
}

html {
  --s: 50px; /* control the size*/
  --c1: #a82616;
  --c2: #cc5d49;
  --c3: #2c2e2a;
  
  --p:at 45% 40%,#0000 75%,;
  --g1:conic-gradient(var(--p) var(--c1) 0);
  --g2:conic-gradient(var(--p) var(--c2) 0);
  background:
    var(--g1),var(--g2) calc(2*var(--s)) 0,
    var(--g2) calc(3*var(--s)) var(--s),
    var(--g1) var(--s) var(--s) var(--c3);
  background-size: calc(4*var(--s)) calc(2*var(--s));
}

body {
  font-family: 'Departure Mono', monospace;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-image: url("/images/sexyjutsu.jpg");
  display: flex;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.old-school-header {
  background-color: var(--bg-dark);
  padding: 10px;
  border-top: 4px solid var(--border-gold);
  border-left: 2px solid var(--border-gold);
  border-right: 4px solid var(--border-grey);
  border-bottom: 4px solid var(--border-grey);
  width: 90%;
}

.header-content h1 {
  color: rgba(253, 227, 68); 
  font-family: 'Departure Mono', monospace;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 2px 2px #000000;
}

marquee {
  color: white;
  font-family: 'Departure Mono', monospace;
  font-size: 14px;
  background-color: rgba(168,38,22); 
  margin-top: 10px;
  padding: 2px;
  border: 1px inset #fff;
}


.menu ul {
  text-align: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: var(--menu-blue);
  border: 2px solid var(--border-gold); 
  display: flex;
  justify-content: center; 
  overflow: hidden;
}


.menu li {
  float: left;
  border-right: 1px solid #555; 
}

.menu li:last-child {
  border-right: none;
}

.menu li a, .menu li span {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: 'Departure Mono', monospace;
}
.menu li a:hover {
  background-color: var(--primary-red);
  color: var(--primary-yellow);
}

.bio-box {
  background-color: var(--bio-bg);
  border: 2px double var(--primary-yellow);
  padding: 20px;
  max-width: 500px;
  margin: 20px 0;
  color: #ffffff;
  font-family: 'Departure Mono', monospace;
  box-shadow: 5px 5px 0px var(--primary-red); 
}

.bio-box h3 {
  color: rgba(253, 227, 68); 
  text-align: left;
  margin-top: 0;
  border-bottom: 1px solid #444;
  padding-bottom: 10px;
}

.likes-list {
  list-style-type: none; 
  padding: 0;
}

.likes-list li {
  margin-bottom: 12px;
  line-height: 1.4;
}

.likes-list b {
  color: rgba(253, 227, 68);  
}

.status {
  text-align: right;
  color: rgba(253, 227, 68); 
  font-weight: bold;
}

.site-footer {
  margin-top: 150px;
  border-top: 2px;
  padding: 20px 0;
}

.ads-title {
  font-family: 'Departure Mono', monospace;
  font-size: 0.8rem;
  color: var(--primary-yellow);
  margin-bottom: 1px;
  text-transform: uppercase;
}

.pixel-ad {
  width: 88px; 
  height: 88px;
  image-rendering: pixelated; 
  border: 1px solid #555;
  background: #000;
  cursor: pointer;
  transition: transform 0.1s;
}

.pixel-ad:hover {
  outline: 2px solid var(--primary-red);
  transform: translateY(-2px);
  filter: brightness(1.2);
}

.ads-grid {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  gap: 5px; 
}


img {
  max-width: 100%;
  height: auto;
}


@media (max-width: 600px) {
  
  .menu ul {
    flex-direction: column;
  }
  
  .menu li {
    border-right: none;
    border-bottom: 1px solid rgba(167, 152, 157, 0.5); 
    width: 100%; 
  }

  .old-school-header, 
  .bio-box, 
  .menu {
    width: 95%; 
    margin: 10px auto;
    box-sizing: border-box; 
  }
  .header-content h1 {
    font-size: 24px;
  }
  
  .likes-list li {
    font-size: 14px;
  }
}