:root {
    --accent:#7580c9;
}

body {
  background-image: url("/imgs/Soul%20in%20the%20Water.webp");
  background-color: #a5bf9f;
}
  
#container {
  max-width:75%;
  text-align:left;
  margin-left:auto;
  margin-right:auto;
  border-radius: 15px;
  background-color: #fcf5de;
  padding: 10px;
  font-size: 16pt;
  font-family: "Inter Tight", sans-serif;;
}


header{
  margin-left:auto;
  margin-right:auto;
  text-align: center;
  border-style: solid;
  border-width: 0px 0px 2px 0px;
  border-color: gray;
}


header h1{
 font-size: 40pt;
 margin-left:auto;
 margin-right:auto;
 letter-spacing: 10px;
 font-family: "Mansalva", serif;
 margin: 3px;
}  

header h2{
 font-size: 12pt; 
 font-weight: normal;
}

#nav ul{
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 list-style-type:none;
 max-width: 50%;
 margin-left:auto;
 margin-right:auto;
}


#nav ul li {
 align-self: center;
 padding: 0 1.4em 0 0;
 font-size: 0.9em;
 letter-spacing: 1px;
}

#nav a:link, a:visited{
  color: black;
   text-decoration: none;
}

#nav a:hover {
  color: var(--accent);
}

footer{
  font-size: 8pt;
  margin: 2px;
  padding: 2px;
}

#content{
  display: grid;
  grid-template-columns: 25% auto 25%;
  margin: 5px;
  padding: 5px;
}

.col1{
  grid-column: 1 / span 1;
  margin: 5px;
  padding: 10px;
  text-align: justify;
}

.col2{
  grid-column: 2 / span 1;
  margin: 5px;
  padding: 10px;
  display: flex;
  justify-content: center;
}

.col2 img{
  clip-path: ellipse(50% 35%);
  border-shape: ellipse(50% 35%);
  border-style: dotted;
}

.col3{
  grid-column: 3 / span 1;
  margin: 5px;
  padding: 10px;
  text-align: center;
}