/* 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." */

.header {
  background-color: #000000;
  padding: 5px 0;
  text-align: center;
  color: white;
}

body {
  background-color: #303030;
  margin: 0;
  padding: 0;
  color: black;
  font-family: Verdana;
}

.page {
  background-color: white;
  color: black;
  width: 900px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 40px;
}

h1 {
  text-align: center;
  font-size: 54px;
  margin: 10px;
  color: black;
}

h2 {
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  margin-top: 5px;
  color: white;
}

h3 {
  font-size: 20px;
  text-align: left;
  font-weight: bold;
  margin-top: 0px;
  color: black;
}

h4 {
  text-align: center;
  font-size: 54px;
  margin: 0px;
  color: white;
}

.left-text {
  text-align: left;    /* aligns the text to the left */
  max-width: 600px;    /* optional: makes the text “smushed” instead of full width */
  margin: 0;           /* remove extra spacing */
}

.left-text p {
  margin-bottom: 15px;  /* spacing between paragraphs */
  line-height: 1.5;     /* makes it easier to read */
}

.buttons a {
  display: inline-block;
  padding: 10px 18px;
  margin-right: 10px;
  background-color: white;
  color: black;
  border: 2px solid white;
  font-weight: bold;
  text-transform: lowercase;
}

.buttons a:hover {
  background-color: black;
  color: white;
}

.logo {
  width: 150px;
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

body.not_found {
  background-color: black;
  color: white;
  font-family: Verdana, sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}

.not_found_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;  /* vertical center */
  gap: 20px;          /* spacing between elements */
  padding: 20px;
}

.not_found_content h1 {
  font-size: 80px;
  margin: 0;
}

.not_found_content h2 {
  font-size: 24px;
  margin: 0;
}

.not_found_content p {
  font-size: 18px;
  margin: 0;
}

.error-gif {
  max-width: 300px;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.go-home-link {
  display: inline-block;
  padding: 12px 24px;
  background-color: white;
  color: black;
  text-decoration: none;
  font-weight: bold;
  border-radius: 8px;
  transition: 0.3s;
}

.go-home-link:hover {
  background-color: green;
  color: white;
}

.left-title {
  text-align: left;
}

.right-image {
  float: right;
  margin-left: 20px; 
  max-width: 50%;
  height: auto;
  margin-bottom: 0px;
}

.album-section {
  display: flex;                 /* two columns */
  justify-content: space-between; /* left = text, right = image */
  align-items: flex-start;
  gap: 20px;                      /* space between columns */
  margin-top: 30px;
}

.album-text {
  flex: 0 0 4000px;                        /* text column takes available space */
  max-width: 400px;               /* leaves room for the image */
  text-align: left;
}

.album-image img {
  display: flex;
  float: right;
  max-width: 400px; /* adjust size of the album cover */
  width: 100%;
  height: auto;
  border-radius: 12px;
  flex-direction: column;   /* allows you to push image down if needed */
  justify-content: flex-start;
  margin-top: -50px;         /* adjust this to move image lower or higher */
}