\:root {
  --red: #E0224B;
  --blue: #7393B3;
  --cyan: #00FFFF;
  --magenta: #BA319C;

  --pink: #f4dce8;
  --green: #dce8d2;
  --cream: #fff8e9;
  --dark: #42383f;
}

body {
  margin: 0;
  padding: 35px;
  background: var(--green);
}

.window.nav-window {
  width: 500px;
  max-width: 90%;
  margin: 0 auto 20px auto;
  background: var(--pink);
}

.nav-window .title-bar {
  background: linear-gradient(
    90deg,
    var(--blue),
    var(--cyan)
  );
}

.nav {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 12px;
  background: var(--pink);
}

.nav a {
  min-width: 90px;
  padding: 7px 10px;

  text-align: center;
  text-decoration: none;
  background: var(--cream);

  box-shadow:
    inset -1px -1px #777,
    inset 1px 1px white,
    inset -2px -2px #bbb,
    inset 2px 2px #fff;
}

.nav a:hover {
  color: white;
  background: var(--magenta);
}

.window.main-window {
  width: 90%;
  max-width: 1100px;
  margin: auto;
  background: var(--pink);
}

.main-window .title-bar {
  background: linear-gradient(
    90deg,
    var(--magenta),
    var(--red)
  );
}

.main-window .window-body {
  padding: 30px;
  background: var(--cream);
}

h1 {
  margin-bottom: 5px;
  
}


.subtitle {
  margin-top: 0;
  color: #715c68;
}

.error-box {
  display: flex;
  align-items: center;
  gap: 25px;

  max-width: 650px;

  margin: 30px auto;
  padding: 20px;

  background: var(--pink);

  border: 2px solid;

  box-shadow:
    inset -1px -1px #777,
    inset 1px 1px white;
}

.error-box img {
  width: 230px;
  max-width: 45%;
  border: 3px solid;
}

.error-box button {
  background: var(--cream);
}

fieldset {
  margin-top: 25px;
  background: var(--green);
}

legend {
  font-weight: bold;
}

hr {
  margin: 30px 0;
}

.footer {
  text-align: center;
  font-size: 11px;
  color: #675860;
}