/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* 1. The wrapper that holds everything */
/* Sets the black background and allows horizontal scrolling */
body {
  margin: 0;
  font-family: "MS Gothic", sans-serif;
  background-color: black;
  overflow-y: hidden; /* Disables up/down scroll */
}

.page-wrapper {
  display: flex;
  align-items: center; /* Centers everything vertically */
  height: 100vh;       /* Uses full screen height */
  padding-left: 50px;  /* Space before the logo */
}

.logo {
  flex-shrink: 0;      /* Prevents logo from being squished */
  width: 250px;        /* Adjust size as needed */
  height: auto;
  margin-right: 40px;  /* Gap between logo and the box */
}

/* The Orange-Bordered Box */
.scroll-container {
  align-items: center; 
  display: inline-flex; /* Key: Makes the container shrink-wrap its contents */
  flex-direction: row;  /* Keeps everything in a horizontal line */
  flex-wrap: nowrap;    /* Keeps everything in one long line */
  border: 2px solid #FF4500; /* Your orange border */
  height: 70vh;         /* Height of the box relative to screen */
  padding: 30px;
  color: #FF4500;       /* Text color */
}
.content-item p {
  white-space: nowrap; /* This forces the orange border to expand right for text */
  margin-right: 30px;
  color: #FF4500;
  font-family: "MS Gothic", sans-serif; /* Your base orange color */
  transition: text-shadow 0.3s ease, color 0.3s ease; /* Makes the glow fade in smoothly */
  cursor: default;/* Optional: matches your clean UI look */
}

.content-item p:hover {
  color: #ffaa00; /* Optional: slightly brighten the text color on hover */
  text-shadow: 
    0 0 5px #FF4500,  /* Small inner glow */
    0 0 10px #FF4500, /* Medium glow */
    0 0 20px #FF4500, /* Large outer glow */
    0 0 40px #FF4500; /* Extra large soft glow */
}
/* The container for the nav at the end of the scroll */
.nav-section {
  font-family: "MS Gothic", sans-serif;
  flex: 0 0 auto;
  display: flex;
  align-items: center; /* Centers the whole nav vertically in the orange box */
  padding: 0 5px;
  margin-right: -10px;/* Space so it's not squashed against the right edge */
}

.vertical-nav {
  display: flex;
  flex-direction: column; /* Stacks the links vertically */
  gap: 20px;              /* Space between the links */ /* Optional: a small line to separate the nav */
  padding-left: 40px;
}

.nav-link {
  color: #FF4500;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  transition: 0.3s;
  white-space: nowrap;
}

/* Matching the hover glow effect from your text */
.nav-link:hover {
  color: #ffaa00;
  text-shadow: 
    0 0 10px #FF4500, 
    0 0 20px #FF4500;
  transform: translateX(10px); /* Slight slide effect when hovering */
}

.content-item p {
  text-align: left;    /* Forces text to align to the left side of its block */
  white-space: nowrap; /* Keeps your border expanding to the right */
  margin-right: 20px;  /* Creates the gap between the text and the image */
  flex-shrink: 0;      /* Prevents the text from being squished by the image */
}

a {
  color: #FF4500;
  font-weight: bold;
  font-family: "MS Gothic", sans-serif;
}
/* Individual pieces of content inside the box */
.content-item {
  flex: 0 0 auto;       /* Prevents shrinking */
  margin-right: 60px;   /* Space between items inside the box */
  text-align: center;
}
/* This targets ONLY the images inside your scroll box */
.scroll-container img {
  max-height: 80%;    /* Image will never be taller than 80% of the box */
  width: auto;        /* Image keeps its original shape (no squishing) */
  display: block;     /* Prevents weird spacing at the bottom */
  margin: 10px auto;  /* Centers the image within its own section */
  align-items: center;
}

p {
  font-family: "MS Gothic";
}
  
head {
  background-color: white;
  color: black;
  font-family: "Klee One", cursive;
  font-weight: 400;
  font-style: normal;
}
body {
  background-color: white;
  color: black;
  font-family: Verdana;
}