:root {
 --dark-brown: #311E0F;
 --medium-brown: #D1AE8D;
 --light-brown: #F4E4C9;
 --dark-green: #525032;
 --light-green: #838562;
 --white: #FFFFFF;
 --off-white: #F5F5F5;
 --light-grey: #BBBBBB;
 --dark-grey: #333333;
 --off-black: #121212;
 --black: #000000;
}

::selection {
 background-color: var(--light-green);
 color: #FFFFFF;
}

body {
 background-color: var(--light-brown);
 font-family: Gentium Plus, Georgia, serif;
 font-size: 20px;
 color: var(--dark-grey);
 margin: 0px;
}

div.main,
header,
footer {
 margin-left: auto;
 margin-right: auto;
}

header,
footer {
 width: calc(58% + 200px);
 max-width: 800px;
}

div.main {
 width: 58%;
 max-width: 600px;
 background-color: var(--off-white);
 box-shadow: 0px 0px 10px var(--medium-brown);
 padding: 100px;
}

h1 {
 color: var(--dark-green);
 text-align: center;
 font-size: 60px;
 text-decoration: underline;
 text-decoration-thickness: 5px;
 font-variant: small-caps;
 text-underline-offset: 5px;
 margin: 40px 15px;
}

h2 {
 margin-top: 0px;
 color: var(--dark-green);
 font-size: 45px;
}

p {
 margin: 20px 0px;
 text-align: justify;
 hyphens: auto;
}

p:last-child {
 margin-bottom: 0px;
}

a,
a:visited {
 color: var(--light-green);
 transition: color 0.2s ease-in-out;
}

a:hover {
 color: var(--dark-green);
 transition: color 0.2s ease-in-out;
}

header {
 margin-top: 100px;
 margin-bottom: 20px;
}

header a {
 font-size: 25px;
 text-decoration: none;
 margin-right: 50px;
 color: var(--light-green);
}

header a.current-page {
 color: var(--dark-green);
}

footer {
 text-align: center;
 font-size: 17px;
 margin-top: 15px;
 margin-bottom: 100px;
 color: var(--medium-brown);
}

img {
 width: calc(100% + 125px);
 height: auto;
 box-shadow: 0px 0px 15px var(--light-grey);
 border-radius: 15px;
 margin: 10px 0px;
}

img.right {
 margin-left: -50px;
 border-right: 25px solid var(--light-green);
 border-top-right-radius: 0px;
 border-bottom-right-radius: 0px;
}

img.left {
 margin-left: -100px;
 border-left: 25px solid var(--light-green);
 border-top-left-radius: 0px;
 border-bottom-left-radius: 0px;
 box-shadow: 0px 0px 15px var(--light-grey);
}

img.center {
 margin-left: -100px;
 border-right: 25px solid var(--light-green);
 border-left: 25px solid var(--light-green);
 border-radius: 0px;
 width: calc(100% + 150px);
}

img.main-picture {
 float: right;
 border-radius: 500px;
 border: 10px solid var(--light-green);
 margin-right: -150px;
 margin-top: -150px;
 width: 250px;
 height: 250px;
 box-shadow: none;
}

hr {
 border-color: var(--light-green);
 border-width: 0px 0px 1px 0px;
 margin: 40px 0px;
}

span.label {
 display: inline-block;
 background-color: var(--dark-green);
 padding: 4px 12px;
 border-radius: 5px;
 color: var(--white);
 font-size: 15px;
 margin-right: 5px;
 margin-bottom: 5px;
}

span.label:last-child {
 margin-right: 0px;
}

input,
textarea {
 margin: 0px 0px 10px 0px;
 padding: 10px 20px;
 border: 2px solid var(--light-grey);
 background-color: var(--white);
 display: block;
 width: 250px;
 font-family: Gentium Plus, Georgia, serif;
 font-size: 20px;
 border-radius: 5px;
 max-width: calc(100% - 2 * 20px - 2 * 2px);
}

input:focus,
textarea:focus {
 outline: none;
 border-color: var(--light-green);
}

textarea {
 width: calc(100% - 2 * 20px - 2 * 2px);
 height: 200px;
}

input[type=submit] {
 width: auto;
 background-color: var(--light-green);
 color: var(--white);
 font-weight: bold;
 transition: background-color 0.2s ease-in-out;
 border: none;
}

input[type=submit]:hover {
 background-color: var(--dark-green);
 transition: background-color 0.2s ease-in-out;
}

.hidden {
 display: none;
}

@font-face {
  font-family: "Gentium Plus";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/GentiumPlus-Regular.woff2") format('woff2');
  font-display: swap;
}

@font-face {
  font-family: "Gentium Plus";
  font-style: normal;
  font-weight: bold;
  src: url("fonts/GentiumPlus-Bold.woff2") format('woff2');
  font-display: swap;
}

@font-face {
  font-family: "Gentium Plus";
  font-style: italic;
  font-weight: normal;
  src: url("fonts/GentiumPlus-Italic.woff2") format('woff2');
  font-display: swap;
}

@font-face {
  font-family: "Gentium Plus";
  font-style: italic;
  font-weight: bold;
  src: url("fonts/GentiumPlus-BoldItalic.woff2") format('woff2');
  font-display: swap;
}

@media screen and (max-width: 767px) {
 body,
 input,
 textarea {
  font-size: 17px;
 }
 
 header,
 footer {
  width: 100%;
 }
 
 div.main {
  padding: 40px 20px;
  margin-top: 100px;
  width: calc(100% - 2 * 20px);
 }
 
 footer {
  margin-bottom: 50px;
 }
 
 header {
  position: fixed;
  background-color: var(--light-brown);
  text-align: center;
  top: 0px;
  margin-top: 0px;
  padding: 15px 0px;
 }
 
 header a {
  margin-right: 25px;
  font-size: 20px;
 }
 
 h1 {
  margin-top: 100px;
  font-size: 38px;
  text-decoration-thickness: 3px;
 }
 
 h2 {
  font-size: 30px;
 }
 
 img {
  margin-left: -20px !important;
  width: calc(100% + 40px);
  border-radius: 0px;
 }
 
 img.left,
 img.right,
 img.center {
  border: none;
}
 
 img.main-picture {
  margin-left: auto;
  margin-right: auto;
  margin-top: -115px;
  width: 175px;
  height: 175px;
  border-width: 5px;
 }
 
 hr {
  margin: 20px 0px;
 }
 
 span.label {
  font-size: 12px;
 }
}

@media (prefers-color-scheme: dark) {
  ::selection {
    background-color: var(--dark-green);
  }
  
  body {
   background-color: var(--black);
   color: var(--light-grey);
  }
  
  div.main {
   background-color: var(--off-black);
   box-shadow: 0px 0px 10px var(--black);
  }
  
  header a {
   color: var(--dark-green);
  }

  header a.current-page {
   color: var(--light-green);
  }
  
  footer {
   color: var(--dark-green);
  }
  
  h1 {
   color: var(--light-green);
  }
  
  h2 {
   color: var(--dark-green);
  }
  
  img {
   filter: brightness(.8) contrast(1.2);
   box-shadow: 0px 0px 10px var(--dark-grey);
  }
  
  img.main-picture {
   border-color: var(--dark-green);
  }
  
  hr {
   border-color: var(--dark-green);
  }
  
  span.label {
   background-color: var(--dark-green);
 }
  
  input,
  textarea {
   background-color: var(--black);
   color: var(--off-white);
   border-color: var(--dark-grey);
  }
  
  input:focus,
  textarea:focus {
   border-color: var(--dark-green);
  }
  
  input[type=submit] {
   background-color: var(--dark-green);
   color: var(--dark-grey);
  }

  input[type=submit]:hover {
   background-color: var(--light-green);
  }
}