* {
  box-sizing: border-box;
}

@font-face {
  font-family: "Outfit";
  src: url("./Outfit-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

body {
  margin: 0;
  background: #aeaeae url("./Website13-background.png") no-repeat center top;
  color: #222;
  font-family: Verdana, Geneva, sans-serif;
}

.page {
  width: min(100%, 1000px);
  margin: 0 auto;
  padding: 40px 15px 15px;
}

.site-title {
  width: min(728px, 100%);
  height: 109px;
  margin: 0 auto 15px;
  overflow: hidden;
  background: url("./Logotext.png") no-repeat center;
  background-size: contain;
  text-indent: -9999px;
}

.content {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 20px;
  padding: 15px;
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
  box-shadow: -2px -3px 25px 7px rgb(0 0 0 / 80%);
}

.navigation {
  min-height: 280px;
  border-right: 2px solid transparent;
  border-image: linear-gradient(to bottom, transparent, #aeaeae 15%, transparent) 1;
}

.navigation ul {
  margin: 1em 0;
  padding: 0;
  list-style: none;
}

.navigation li {
  padding-left: 1em;
  border-top: 1px solid #daa520;
}

.navigation a {
  color: #337;
  text-decoration: none;
}

.navigation a:hover {
  color: #33c;
}

.navigation a:active {
  color: #33f;
}

.page-content h2 {
  margin: 0;
  padding: 0 0 0 0.3em;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(to right, transparent, #33f 15%, transparent) 1;
  color: #99a;
  font-family: "Outfit", Helvetica, Arial, sans-serif;
  font-size: 40px;
  font-weight: normal;
}

.message {
  padding: 0.5em 1.5em;
  font-size: 0.9em;
}

.message p {
  margin: 0 0 0.2em;
}

footer {
  grid-column: 1 / -1;
  padding: 0 15px;
  color: #797979;
  font-size: 9px;
  text-align: right;
}

@media (max-width: 600px) {
  .page {
    padding-top: 20px;
  }

  .site-title {
    height: min(109px, 15vw);
  }

  .content {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .navigation {
    min-height: 0;
  }

  .navigation ul {
    margin: 0;
  }

  .navigation li {
    padding: 0.35em 0;
  }

  .page-content h2 {
    font-size: clamp(30px, 8vw, 40px);
  }

  .message {
    padding: 0.5em 0;
  }

  footer {
    padding: 0;
  }
}