@font-face {
	  font-family: "body";
	  src: url("Quicksand-Medium.ttf");
}

body {
	  /* background: #f2b2bc; */
	  /* color: #602030; */
	  /* background: #f6d8da; */
	  /* color: #753b43; */
	  color: #3b1e22;
	  margin: 2rem;
	  max-width: 60rem;
	  margin-left: auto;
	  margin-right: auto;
	  display: flex;
	  flex-direction: column;
	  min-height: calc(100vh - 4rem);
	  font-family: "body", sans-serif;
	  font-size: 20px;
	  line-height: 160%;
	  /* background-image: url('tlo.jpg'); */
	  /* background-size: cover; /\* or contain, depending on your preference *\/ */
	  /* background-position: center; /\* or adjust as needed *\/ */
	  /* background-repeat: no-repeat; /\* or repeat if desired *\/ */
}

/* @media only screen and (max-width: 960px) { */
/*     body { */
/* 	font-size: 320%; /\* Adjust the font size to your preference *\/ */
/*     } */
/* } */

html {
    position: relative;
}

html::before {
    content: "";
    background-image: url('waves-higher.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 480px;
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    /* opacity: 0.8; /\* Adjust the opacity value as needed *\/ */
    z-index: -1; /* Ensure the pseudo-element is behind other content */
}

/* html.index::before { */
/*     height: 100vh; */
/* } */

header {
    text-align: right;
    color: white;
    height: 480px;
}

header .boxes {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Optional: aligns items to the top if header has height */
    width: 100%; /* Ensure header spans full width to allow separation */
    margin-bottom: 4rem;
}

header .boxes .top-left-div {
    width: 60%;
    text-align: left;
    font-size: 120%;
    font-weight: bold;
}

header .boxes .top-right-div {
    width: 40%;
    text-align: right;
    font-size: 80%;
    line-height: 120%;
}

/* html.index header { */
/*     height: 110px; */
/* } */

header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}

header li {
  display: inline-block;
  margin-left: 2rem;
}

header li:first-child {
  margin-left: 0;
}

h1 {
    font-size: 140%;
}

h2 {
    font-size: 120%;
}

h3 {
    font-size: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

.map iframe, .map a {
    display: block;
    font-size: 50%;
    line-height: 140%;
}

a:hover {
  text-decoration: underline;
}

main {
    flex: 1;
}

footer {
    text-align: center;
    margin-top: auto;
}

/* html.index footer { */
/*     color: white; */
/* } */

blockquote {
    /* font-size: 1.6rem; */
    /* line-height: 2.4rem; */
    /* margin-top: 12.5rem; */
}

blockquote p:first-child::first-letter {
    font-size: 200%;
}

blockquote p:last-child {
    margin-top: 3rem;
    text-align: end;
    font-style: italic;
    font-weight: bold;
    color: black;
}

html.index blockquote {
    /* color: white; */
    font-size: 120%;
    line-height: 150%;
}

.org-center {
    text-align: center;
}

table {
    border-spacing: 4rem 0;
    border-collapse: separate;
}

img {
  border: 5px solid white;
}

div.figure > p {
	  margin-bottom: 0;
	  margin-left: 10%;
	  margin-right: 10%;
}

div.figure + p.caption {
	  margin-top: 0;
	  margin-left: 10%;
	  font-size: 75%;
	  line-height: 120%;
}