/*
header
h1 nav
ul
li a
main
section #cardboard-cat #orange-cat #sleeping-cats
h2 img
*/

:root {
  --red: #6f1d1b;
  --dark-brown: #432818;
  --light-brown: #99582a;
  --dark-beige: #bb9457;
  --light-beige: #ffe6a7;
  --small-font: 22px;
  --large-font: 50px;
  --small-shadow: 5px 5px 5px rgba(59, 59, 59, 0.481);
}
* {
  margin: 0;
  box-sizing: border-box;
}
header {
  min-width: 100svw;
  height: 100px;
  background-color: var(--light-beige);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  top: 0;
  position: sticky;
}
h1 {
  font-size: var(--large-font);
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  color: var(--red);
  text-shadow: var(--small-shadow);
}
nav {
  width: 60%;
  height: 100%;
  display: flex;
  align-items: center;
  box-shadow: var(--small-shadow);
}
ul {
  display: flex;
  list-style-type: none;
  font-size: var(--small-font);
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
}
main {
  background-color: var(--dark-brown);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  min-width: 100svw;
}
h2 {
  color: var(--light-beige);
}
section {
  height: 100svh;
  width: 100svw;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
img {
  margin-top: 10px;
  min-height: 80svh;
  width: auto;
}
a,
a:hover,
a:active,
a:visited {
  color: var(--red);
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  font-weight: 900;
}
h1 a:hover {
  --h1-link-color: white;
  color: var(--h1-link-color);
}