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

body {
  color: white;
}
.container {
  height: 100vh;
  position: relative;
  background-color: rgb(40, 40, 40, 0.6);
}
.wrapper {
  margin: auto;
  max-width: 1200px;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: white;
}
nav,
section {
  width: 100%;
  padding:0 20px;
}

/* button */
.btn {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  background-color: orange;
  border-radius: 10px;
  color: white;
  transition: all 1s ease-in-out;
}
.btn:hover {
  background-color: red;
}

/* header */
nav {
  height: 100px;
}
nav .wrapper {
  height: 100%;
  display:flex;
  justify-content: space-between; 
  align-items: center;
}
nav .wrapper ul {
  display: flex;
  column-gap: 1rem; 
}
nav .wrapper ul li a {
  padding-bottom: 8px;
}
nav .wrapper ul li a:hover {
  border-bottom: 2px solid orange;
}


/* section */
section {
  height: 80%;
}
section .wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  align-items: center;
  justify-content: center;
}

/* to darken the background image */
.container::before {
  content: "";
  position: absolute;
  background: url(https://images.unsplash.com/photo-1670171336433-1cf9b6124068?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=600&q=60) no-repeat center center/cover ;
  height: 100%;
  width: 100%;
  z-index: -5;
}