body {
  margin: 0;
  }
  
/*Everything goes inside here.*/
.wrapper {
  width: 900px;
  margin: 0 auto;
  }
  
.sidebar-img, .footer, .title, .links, .box {
  margin-top: 25px;
  }
  
.title, .links, .footer {
  text-align: center;
  }
  
/*Navigation links.*/
.links ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  }
  
.links li {
  display: inline-block;
  }

/*Some fancy code for fun, to add special characters around the navigation links. Change content to "" if you don't want these.*/
.links li:before {
  content: "「";
  }
  
.links li:after {
  content: "」 ∷ ";
  }
  
.links .last:after {
  content: "」";
  }
  
.links li:before, .links li:after {
  letter-spacing: 0.1em;
  }
  
/*Basic box code that is used for all content boxes on the page.*/
.box {
  border: 1px solid black;
  padding: 0.5em 1em;
  }
  
/*Goes inside the box class. Not given any style by default, but can be used for stuff like fancy borders.*/
.inner {
  display: inline;
  }
  
/*Prevent image overflow.*/
.box img, .sidebar img {
  max-width: 100%;
  height: auto;
  }
  
/*Wrapper for the sidebar.*/
.sidebar {
  width: 200px;
  float: left;
  }
  
/*Container for the sidebar image.*/
.sidebar-image {
  border: 1px solid black;
  }
  
/*Remove extra padding line at the bottom of the image.*/
.sidebar-image img {
  display: block;
  }
  
/*This is where the title, navbar, and main content all go.*/
.main-wrapper {
  margin-left: 225px;
  }
  
/*Two columns by default. The "single-column" class can be added to make it one column.*/
.main {
  display: inline-block;
  }
  
/*Make sure boxes don't spread over multiple columns.*/
.main .box {
  display: inline-block;
  }
  
.single-column {
  columns: 1;
  }
  
.footer {
  margin-bottom: 25px;
  }
  
@media(max-width:915px) {
  .wrapper {    
    width: 95%;
    }
    
  .main-wrapper {
    width: calc(100% - 225px);
    }
  }
  
@media (orientation: portrait), (max-width: 480px) {
  .wrapper {
    width: 100%;
    }
  
  .main-wrapper, .sidebar, .footer {
    margin: 0 auto;
    width: 90%;
    }
  
  .sidebar {
    float: none;
    }

  .sidebar-image {
    margin: 0 auto;
    width: 33%;
    margin-top:25px;
    }

  .sidebar .sidebar-image img {
    width: 100%;
    }
    
  .footer {
    margin-bottom: 25px;
    }
  
  }
/*@import url('https://fonts.googleapis.com/css2?family=Readex+Pro&display=swap');*/

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-VariableFont_wght.ttf");
  }


body {
  background: linear-gradient(rgba(10,5,0,0.05), rgba(10,5,0,0.1)), url("https://file.garden/ZOEK5Y-7dnW-gxcd/16ae6135d8a50205937d4fc93e90ccc7.jpg") no-repeat fixed;
  background-size: cover;
  line-height: 140%;
  font-size: 0.97rem;
  font-family: "Montserrat", "Open Sans", sans-serif;
  }

.box {
  border-radius: 1.5em 0.175em;
  background: rgba(5,0,0,0.8);
  color: white;
  border: 1px solid #aae6ff;
  }
  
a, .links li:before, .links li:after, .links .last {
  color: #1896ca;
  }
  
.sidebar-image img {
  border-radius: 0.175em;
  }


/*Alternate style of spacers for nav links. Replace with "" for no spacer characters.*/  
.links li:before {
  content: " ";
  }

.links li:after {
  content: " ⬪ ";
  }

.links .last:after {
  content: " ";
  }

/*Increase gap between automatic spacers.*/
.links li:before, .links li:after {
  letter-spacing: 0.375em;
  }
/* Authentic Frutiger Aero Button CSS */
.frutiger-aero-button {
  /* OKLCH Color System for accurate colors */
  --hue: 15;
  --sat: 0.2;
  --glow-intensity: 0.7;

  /* Color Variables */
  --fg: oklch(15% calc(var(--sat) * 0.5) var(--hue));
  --bg: oklch(75% var(--sat) var(--hue) / 0.8);
  --bg-dark: oklch(45% var(--sat) var(--hue) / 0.75);
  --bottom-glow: radial-gradient(
    farthest-corner at bottom center,
    rgba(255, 255, 255, var(--glow-intensity)),
    transparent
  );

  /* Base Styling */
  background-color: var(--bg);
  background:
    var(--bottom-glow),
    linear-gradient(to bottom, var(--bg-dark), var(--bg));

  border: 1px solid var(--bg);
  border-radius: 5px;

  /* Shadows and Effects */
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);

  /* Typography */
  color: var(--fg);
  font-family: "Segoe UI", Tahoma, "Segoe UI Web", system-ui, sans-serif;
  font-weight: 700;
  text-shadow: 0 2px 0.5em rgba(0, 0, 0, 0.2);

  /* Layout */
  cursor: pointer;
  position: relative;
  transition: all 300ms ease;

  /* Prevent text selection */
  user-select: none;
  -webkit-user-select: none;
}

/* Diagonal Glass Shine Sweep — the classic Web 2.0 glare streak */
.frutiger-aero-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.05) 55%,
    transparent 70%
  );
  border-radius: inherit;
  pointer-events: none;
}

/* Top Highlight Effect */
.frutiger-aero-button::after {
  content: "";
  position: absolute;
  top: 4%;
  left: 0.75em;
  width: calc(100% - 1.5em);
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.1)
  );
  border-radius: inherit;
  transition: background 400ms ease;
  pointer-events: none;
}

/* Hover State */
.frutiger-aero-button:hover,
.frutiger-aero-button:focus {
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

/* Active State */
.frutiger-aero-button:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transform: translateY(1px);
}

/* Size Variations */
.frutiger-aero-button.small {
  padding: 0.5em 1.5em;
  font-size: 0.875rem;
}

.frutiger-aero-button.medium {
  padding: 0.75em 2em;
  font-size: 1rem;
}

.frutiger-aero-button.large {
  padding: 1em 3em;
  font-size: 1.125rem;
}

/* Authentic Frutiger Aero Button CSS */
.frutiger-aero-button2 {
  /* OKLCH Color System for accurate colors */
  --hue: 35;
  --sat: 0.2;
  --glow-intensity: 0.7;

  /* Color Variables */
  --fg: oklch(15% calc(var(--sat) * 0.5) var(--hue));
  --bg: oklch(75% var(--sat) var(--hue) / 0.8);
  --bg-dark: oklch(45% var(--sat) var(--hue) / 0.75);
  --bottom-glow: radial-gradient(
    farthest-corner at bottom center,
    rgba(255, 255, 255, var(--glow-intensity)),
    transparent
  );

  /* Base Styling */
  background-color: var(--bg);
  background:
    var(--bottom-glow),
    linear-gradient(to bottom, var(--bg-dark), var(--bg));

  border: 1px solid var(--bg);
  border-radius: 5px;

  /* Shadows and Effects */
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);

  /* Typography */
  color: var(--fg);
  font-family: "Segoe UI", Tahoma, "Segoe UI Web", system-ui, sans-serif;
  font-weight: 700;
  text-shadow: 0 2px 0.5em rgba(0, 0, 0, 0.2);

  /* Layout */
  cursor: pointer;
  position: relative;
  transition: all 300ms ease;

  /* Prevent text selection */
  user-select: none;
  -webkit-user-select: none;
}

/* Diagonal Glass Shine Sweep — the classic Web 2.0 glare streak */
.frutiger-aero-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.05) 55%,
    transparent 70%
  );
  border-radius: inherit;
  pointer-events: none;
}

/* Top Highlight Effect */
.frutiger-aero-button2::after {
  content: "";
  position: absolute;
  top: 4%;
  left: 0.75em;
  width: calc(100% - 1.5em);
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.1)
  );
  border-radius: inherit;
  transition: background 400ms ease;
  pointer-events: none;
}

/* Hover State */
.frutiger-aero-button2:hover,
.frutiger-aero-button2:focus {
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

/* Active State */
.frutiger-aero-button2:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transform: translateY(1px);
}

/* Size Variations */
.frutiger-aero-button2.small {
  padding: 0.5em 1.5em;
  font-size: 0.875rem;
}

.frutiger-aero-button2.medium {
  padding: 0.75em 2em;
  font-size: 1rem;
}

.frutiger-aero-button2.large {
  padding: 1em 3em;
  font-size: 1.125rem;
}
/* Authentic Frutiger Aero Button CSS */
.frutiger-aero-button3 {
  /* OKLCH Color System for accurate colors */
  --hue: 65;
  --sat: 0.2;
  --glow-intensity: 0.7;

  /* Color Variables */
  --fg: oklch(15% calc(var(--sat) * 0.5) var(--hue));
  --bg: oklch(75% var(--sat) var(--hue) / 0.8);
  --bg-dark: oklch(45% var(--sat) var(--hue) / 0.75);
  --bottom-glow: radial-gradient(
    farthest-corner at bottom center,
    rgba(255, 255, 255, var(--glow-intensity)),
    transparent
  );

  /* Base Styling */
  background-color: var(--bg);
  background:
    var(--bottom-glow),
    linear-gradient(to bottom, var(--bg-dark), var(--bg));

  border: 1px solid var(--bg);
  border-radius: 5px;

  /* Shadows and Effects */
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);

  /* Typography */
  color: var(--fg);
  font-family: "Segoe UI", Tahoma, "Segoe UI Web", system-ui, sans-serif;
  font-weight: 700;
  text-shadow: 0 2px 0.5em rgba(0, 0, 0, 0.2);

  /* Layout */
  cursor: pointer;
  position: relative;
  transition: all 300ms ease;

  /* Prevent text selection */
  user-select: none;
  -webkit-user-select: none;
}

/* Diagonal Glass Shine Sweep — the classic Web 2.0 glare streak */
.frutiger-aero-button3::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.05) 55%,
    transparent 70%
  );
  border-radius: inherit;
  pointer-events: none;
}

/* Top Highlight Effect */
.frutiger-aero-button3::after {
  content: "";
  position: absolute;
  top: 4%;
  left: 0.75em;
  width: calc(100% - 1.5em);
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.1)
  );
  border-radius: inherit;
  transition: background 400ms ease;
  pointer-events: none;
}

/* Hover State */
.frutiger-aero-button3:hover,
.frutiger-aero-button3:focus {
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

/* Active State */
.frutiger-aero-button3:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transform: translateY(1px);
}

/* Size Variations */
.frutiger-aero-button3.small {
  padding: 0.5em 1.5em;
  font-size: 0.875rem;
}

.frutiger-aero-button3.medium {
  padding: 0.75em 2em;
  font-size: 1rem;
}

.frutiger-aero-button3.large {
  padding: 1em 3em;
  font-size: 1.125rem;
}


.wife {
 padding: 0px 50px;
}