/* General reset and body styling */
body {
  font-family: "Times New Roman", Times, serif; /* Set font to Times New Roman */
  background-image: url('rainbg.jpg'); /* Background image */
  background-size: cover; /* Ensure background covers the whole screen */
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  color: white; /* Set all text to white */
}

/* Container for the sidebar and main content */
.container {
  display: flex; /* Use Flexbox to arrange sidebar and content side by side */
  width: 100%;
  max-width: 1200px; /* Max width for the whole container */
}

/* Sidebar styling */
.sidebar {
  width: 250px; /* Set a fixed width for the sidebar */
  background-color: grey; /* Matching background for sidebar */
  background-size: cover; /* Ensure the background covers the sidebar */
  border: 2px solid white; /* White borders */
  padding: 20px;
  margin-right: 20px; /* Space between sidebar and main content */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Optional shadow for better separation */
}

.sidebar h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: white; /* Ensure the sidebar heading is white */
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar ul li {
  margin: 15px 0;
}

.sidebar ul li a {
  color: white; /* White text for links */
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: bold; /* Optional: make links bold */
}

.sidebar ul li a:hover {
  color: #3498db; /* Optional: change link color on hover */
}

/* Main content area */
.main-content {
  flex-grow: 1; /* Main content takes up the remaining space */
}

/* The main box with content */
.box {
  text-align: center;
  width: 80%;
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
  background-color: grey; /* Box 1 background color */
  border: 2px solid white; /* White borders */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.content img {
  width: 100px; /* Optional: set a size for the images */
  height: auto;
  margin: 20px 0;
}

.box3 {
  text-align: left;
  width: 80%;
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
  background-color: grey; /* Box 1 background color */
  border: 2px solid white; /* White borders */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.music {
  text-align: center; /* Center align content inside the music box */
}

ul {
  list-style: none;
  padding: 0;
}

ul li {
  margin: 10px 0;
}

img {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
}

h1, h2 {
  color: white; /* Ensure headings are white */
}

p {
  margin-bottom: 15px;
}

strong {
  font-weight: bold;
}