* {
  border: 1px dotted black !important;
  box-sizing: border-box;
}

:root {
  --primary-color: #6b0f0f;
  --secondary-color: #005707;
  --background-color: #f5f5f5;
  --html-background-color: #ccc;
  --default-font-size: 16px;
}

html {
  background-color: var(--html-background-color);
  font-size: 16px;
}

body{
  margin: 0;
}

header {
  width: 100%;
  height: 100px;

  display: flex;

  background-color: var(--background-color);
}

header > .logo {
  height: auto;
  width: 200px;

  margin: 0 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;
}

header > .logo > a {
  line-height: 0;
}

header > .logo > a > img{
  height: 5rem;
}

header > nav {
  height: 100%;
  width: 400px;

  margin: 0 auto 0 0;

  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.content-panel {
  min-height: calc(min(100dvh, 100vh) - 204px);
}

footer {
  width: 100%;
  height: 100px;

  background-color: var(--background-color);
}

.inner-content{
  min-width: 400px;
  width: calc(25rem*1dvw);
  max-width: 800px;
}