head{
    
    
}

h1{
    

}
#title{
    font-size: 50px;
    padding: 10px;
    margin: 10px;
}

#links{
  padding: 10px;
  margin: 10px;
}

#links a{
  color: white;
  text-decoration: none;
  font-size: 15px;

}
#links a:hover {
  text-decoration: underline; /* Hover effect */
  color: #051746;
}

body{
  background-image: url(images/CCE263EF-57E1-4ED4-A44F-E587ECC38364_1_201_a.jpeg);
  color:white;
  background-size: cover;  /* Scales the image to cover the element */
  background-repeat: repeat;
  background-attachment: fixed;
  background-position: center;
  width: 100%; 
  font-family: "Source Code Pro", "consola";
  margin: 0;
}
#navi {
  background-image: url(images/A467137-R1-03-21A.JPG);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  padding: 10px;
  margin: 20px;
  display: flex; /* Flexbox for horizontal layout */
  justify-content: left; /* Center the navigation links */
  align-items: center; /* Align items vertically */
}

#navi a {
  color: white;
  text-decoration: none;
  margin: 0 15px; /* Space between links */
  font-size: 25px;
}

#navi a:hover {
  text-decoration: underline; /* Hover effect */
  color: #051746;
}

/* Main content layout */
.main {
  display: flex; /* Flexbox for splitting the left and right sides */
  height: calc(100vh - 50px); /* Subtract navbar height */
}

.left{
  flex: 1; 
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: flex-start;
  color: white;
  background-image: url(images/A467137-R1-03-21A.JPG);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  margin: 20px;
}

.right {
  flex: 2; 
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: flex-end; /* Align items to the right */
  justify-content: flex-start;
  color: white;
  margin: 20px;
}

.column {
  display: flex;         /* Use flexbox to arrange paragraphs side by side */
  gap: 20px;             /* Adds space between the paragraphs */
  width: 100%;
}

.left-column {
  flex: 1;
  flex-direction: column; /* Stack items vertically */
  align-items: flex-end;
  justify-content: flex-start;
  font-size: 30px;
}

.right-column {
  flex-direction: column; /* Stack items vertically */
  align-items: flex-end;
  justify-content: flex-start;
  flex: 2;
}



img {
  max-width: 80%; /* Ensure images fit inside the container */
  height: auto;
}


#audio{
  margin: auto;
  width: 50%;
  padding: 10px;
}


 #bottomtext{
  margin-top: 500px;
}

#oldwebsite{
  margin: auto;
  width: 50%;
  padding: 10px;
  border: solid;
}

.full-width-line {
  width: 100%; /* Makes the line span the full width */
  border: 1px solid #fff; /* White line, adjust color as needed */
  margin: 10px 0; /* Adds some space above and below the line */
}

#headings{
  font-size: 20;
  font-weight: 700;
}

.boldtxt{
  font-weight: 700;
}

.centered-image {
  display: block;       /* Makes the image a block element */
  margin-left: auto;    /* Automatically set left margin */
  margin-right: auto;   /* Automatically set right margin */
  padding: 10px;
}

#warning{
  font-size: 30px;
  padding: 10px;
  margin: 10px;
}


.left2{
  flex: 2; 
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: flex-end; /* Align items to the right */
  justify-content: flex-start;
  color: white;
  margin: 20px;
}

.right2 {
  flex: 1; 
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: flex-end; /* Align items to the right */
  justify-content: flex-start;
  color: white;
  margin: 20px;
}