:root {
  --main-black-color: black;
  --main-yellow-color: #fca311;
  --main-white-color: white;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

.nav {
  background-color: var(--main-black-color);
}
.nav-link {
  color: var(--main-yellow-color);
}
.nav-link:hover {
  color: var(--main-white-color);
}
.nav-link:focus {
  color: var(--main-white-color);
}
.nav-underline .nav-link.active {
  color: var(--main-white-color);
}
.person {
  height: 100vh;
  background-image: url("../img/terminal_scaled.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.skills {
  height: 100vh;
  background: rgba(229, 229, 229, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(229, 229, 229, 0.15);
}
.skills p {
  color: var(--main-white-color);
}
.company-preview {
  height: calc(3rem + 5vh);
}
.exp-link:hover {
  background-color: var(--main-yellow-color);
}
.projects {
  height: 50vh;
}
.proj-link {
  text-align: end;
}
.proj-link:hover {
  background-color: var(--main-yellow-color);
}
.project-img {
  height: 50vh;
  width: 100%;
  object-fit: cover;
}
.captions {
  background-color: red;
}
.values-parent {
  height: 100vh;
  background-image: url("../img/servers_upscaled.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.values {
  height: 100vh;
  background: rgba(229, 229, 229, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(229, 229, 229, 0.15);
}
.values p {
  color: var(--main-white-color);
}