@font-face {
  font-family: 'googlecode';
  src: url('/assets/fonts/googlecode.ttf') format('truetype'); 
}
body {
  margin: 0px;
  padding: 0px;
  background: #683e3e url("/assets/images/broplease.png") repeat-y center top;
  text-align: center;
  font: small "Trebuchet MS", Verdana, Arial, Sans-serif;
  color: #333;
}

header {
  position: relative;
  background-color: #180303;
  box-sizing: border-box; 
  width: 750px; 
  padding: 15px;
  margin: 0px auto 32px auto; 
  display: flex;
  flex-direction: row;
  justify-content: space-between; 
  align-items: center;
}

.logo {
  width: 300px;
  height: auto; 
  display: block;
}

/* --- NEW BUTTON & AD LAYOUT --- */

.header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px; /* Adds space between the buttons and the ad */
}

.nav-buttons {
  display: flex;
  gap: 8px; /* Adds space between each button */
}

/* Retro 3D Button Styling */
.btn {
  background-color: #300505;
  color: #ffefef;
  padding: 4px 10px;
  font-weight: bold;
  text-decoration: none;
  border: 2px outset #0a0000; /* Gives that classic raised 3D look */
  font-size: 18px;
  font-family: 'googlecode', sans-serif;
  font-weight: 300;
  margin-left: 1px;
}

/* Makes the button look "pressed" when clicked */
.btn:active {
  border-style: inset;
  background-color: #4d0707;
}

.btn:hover {
  text-decoration: none;
  background-color: #5f0b0b; /* Slightly lighter on hover */
  color: #ffefef;
}

/* Mini Ad iframe styling */
.tv iframe {
  width: 80px;  /* Classic Web 1.0 micro-button size */
  height: 53px; 
  border: 1px solid #4a2a2a;
  display: block;
}

/* --- END NEW STYLES --- */

header p {
  margin-top: 16px;
  margin-bottom: 0px;
}

a {
  color: #d45a5a;
  text-decoration: none;
  font-size: 15px;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-family: 'googlecode', sans-serif;

}