/*
copyright Evert 2026
This is the style CSS for this site
*/

:root {
  /* Colors */
  --color-brand-teal: #2c6172;
  --color-text-muted: #b4b4b4;
  --color-accent-green: #10cc2f;
  --color-dark: #2d2d2d;
  --color-footer-bg: #333333;
  --color-white: #fff;
  --color-shadow-black: #000000;

  /* Buttons */
  --color-button-bg: #2c3e50;
  --color-button-bg-hover: #34495e;

  /* Fonts */
  --font-heading: 'GermaniaOne', serif;
  --font-dyslexic: 'Open Dyslexic', sans-serif;

  /* Font sizes */
  --font-size-header: 45pt;
  --font-size-h5: 35pt;
  --font-size-content: 15pt;

  /* Spacing */
  --spacing-content-padding: 2rem;
  --spacing-form-padding: 30px;

  /* Borders / radius */
  --radius-small: 4px;
  --radius-medium: 8px;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-content: 0 0 20px rgba(0, 0, 0, 0.1);
}

.header {
  font-family: var(--font-heading);
  font-size: var(--font-size-header);
  text-shadow: 15px 15px 20px var(--color-shadow-black);
  -webkit-text-stroke: 2px var(--color-dark);
  background-color: var(--color-brand-teal);
  color: var(--color-text-muted);
  text-align: center;
  /* text-shadow: offset-x offset-y blur-radius color; */
}

h1, h2, h3, h4, h5 {
  line-height: .05;
}

h5 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  text-shadow: 0px 0px 0px var(--color-shadow-black);
  -webkit-text-stroke: 2px black;
  background-color: var(--color-brand-teal);
  color: var(--color-accent-green);
  text-align: center;
}

textarea {
  resize: vertical;
  min-height: 120px;
  font-size: 24px;
}

button {
  background-color: var(--color-button-bg);
  color: var(--color-white);
  border: none;
  padding: 12px 20px;
  border-radius: var(--radius-small);
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: var(--color-button-bg-hover);
}

.contact-form {
  max-width: 76%;
  margin: 40px 0 40px 20px; /* top, right, bottom, left */
  background: var(--color-white);
  padding: var(--spacing-form-padding);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
}

.contact-form h2 {
  margin-top: 0;
}

.form-group {
  margin-bottom: 15px;
}

.content {
  font-size: var(--font-size-content);
  vertical-align: top;
  /* background-color: #479bb6; 2c6172*/
  padding: var(--spacing-content-padding);
  /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); */
}

/* this is the style for the block that uses the imported OpenDyslexic font  */
.ODcontent {
  font-family: var(--font-dyslexic);
  font-size: var(--font-size-content);
  vertical-align: top;
  /* background-color: #479bb6; */
  padding: var(--spacing-content-padding);
  box-shadow: var(--shadow-content);
}

.footer {
  background-color: var(--color-footer-bg);
  color: var(--color-white);
  text-align: center;
}

.logo {
  height: 250px;
}

.large_image {
  max-width: 75%;
  height: auto;
}

.small_image {
  vertical-align: center;
  max-width: 200pt;
  height: auto;
}

.tall_image {
  width: 100pt;
  height: 250pt;
}