*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --accent-clr: #90915e;
  --txt-clr: #fff;
  --bg-clr: #000;
}

body {
  background-color: var(--bg-clr);
  text-align: center;
  font-family: "Roboto", sans-serif;
}

.main-pic {
  width: 100vh;
}

.nav-name {
  border: 3px solid rgb(172, 139, 56);
  padding: 25px;
  position: fixed;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.title {
  color: var(--txt-clr);
  text-shadow: 5px 2px 10px black;
  font-size: 2.7rem;
  margin: 0;
  border-bottom: 2px white solid;
}

.header-2 {
  color: var(--txt-clr);
}

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  list-style: none;
  text-decoration: none;
}

.menu a {
  font-size: clamp(1rem, -0.4286rem + 6.0952vw, 1.6rem);
  color: inherit;
  box-shadow: inset 0 0 0 0 #54b3d6;
  text-decoration: none;
  padding: 8px;
  transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.menu a:visited {
  color: var(--txt-clr);
}

.menu a:hover {
  box-shadow: inset 150px 0 0 0 #68707470;
  color: var(--bg-clr);
  border-radius: 20px;
  padding: 8px 15px;
}

.contact {
  margin-top: 150px;
  display: flex;
  flex-direction: column;
}

.clr-link > a {
  margin-top: 3em;
  text-decoration: none;
  color: crimson;
}

.clr-link > a :hover {
  /* hover state is missing */
  color: crimson;
}

/* utility classes */
.txt-shadow {
  text-shadow: 2px 2px #000000;
}

/* Media queries */

@media (max-width: 800px) {
  body {
    background-color: var(--bg-clr);
  }
}