html, body {
  height: 100%;
  margin: 0;
}


h1 {
  background: rgba(0, 0, 0, 0.5);
  
  /* Font */
  font-family: "Futura";
  font-size: 11vw;
  font-weight: bold;
  color: #F8F1FF;
  letter-spacing: 0.2rem;
  /*color: #20365B;*/
  /* color: #4C212A; */
  text-align: center;
  
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

h2 {
  
  background: rgba(0, 0, 0, 0.5);
  
  /* Font */
  font-family: "Futura";
  font-size: 6vw;
  font-weight: bold;
  color: #F8F1FFE0;
  text-align: center;
  
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}



h3 {
  font-family: "Futura";
  font-size: 4vw;
  font-weight: normal;
  color: #F8F1FFD0;
  text-align: center;
  
}

.inverse {
  background: #F8F1FFD0;
  color: #000000D0;
  }
  
p {
  /*background: rgba(0,0,0, 0.2);*/
  /*border: 2px solid #ccc;*/
  /*border-radius: 3px;*/
  font-family: "Futura";
  font-weight: normal;
  font-size: 4vw;
  letter-spacing:0.2vw;
  border-color: rgba(255,255,255,0.1);
  padding: 2px;
  margin: 2px auto;
  width: 80%;
  color: #F8F1FFD0;
}

body {
  background: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)), /* dark overlay */
    url('/photos/efimero_square_2.jpg') center/cover repeat;
  color: #F8F1FFD0;
  height: 100vh; /* full screen height */
  /*display: flex; */
  align-items: center;
  justify-content: center;
  text-align: center;
  /*background: linear-gradient(to bottom, #F8F1FF, #D9FCF5);*/

  /*color: #20365B;*/
  font-family: "Futura";
  font-size: 3vw;
}


/* HYPERLINKS */

a {
 display:block;
 width: 90%;
 margin-left: auto;
 margin-right: auto;
 
}
 /* unvisited link */
a:link {
  color: #F8F1FFD0;
  text-decoration: none;
  /*border-top: 2px solid;*/
  /*border-bottom: 2px solid;*/
  border-color: #F8F1FF40;
  padding:12px 12px;
}

/* visited link */
a:visited {
  color: turquoise;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: hotpink;
  text-decoration: none;
}

/* selected link */
a:active {
  color: blue;
  text-decoration: none;
} 

hr {
  border: none; /* Remove default border */
  height: 2px; /* Set the thickness of the line */
  background-color: #F8F1FFB0; /* Set the color of the line */
  width: 80%; /* Set the width of the line (e.g., 80% of its parent) */
  margin: 20px auto; /* Center the line and add vertical spacing */
}

.container {
  display: flex;
  align-items: center; /* Center the content vertically */
  justify-content: space-between; /* Add some space between the two columns */
  width: 100%;
  background: #000000A0;
  border-top: 2px solid;
  border-bottom: 2px solid;
  border-color: #F8F1FFD0;
  margin: auto 0;

}

.left-column {
  flex: 0 0 35%; /* This will take up 50% of the space */
  margin-left: 2vw;
  padding-right: 3px; /* Space between image and text */
}

.left-column img {
  width: 100%; /* Make the image responsive */
  height: auto; /* Maintain the aspect ratio */
}

.right-column {
  flex: 0 0 60%; /* This will take up the other 50% of the space */
  background: #F8F1FFD0;
  color: #000000A0;
  
}

.right-column p {
  text-align: left;
  margin-left: 1vw; /* Remove default margin from paragraphs */
  font-size: 2.5vw;
  color: #000000A0;
}

.right-column h3 {
  margin-left: 0.5vw; /* Remove default margin from paragraphs */

}

.small {
  font-size: 0.75em;
}