body {
  margin: 0;
  font-family: 'Nunito', sans-serif;
}

/* HERO */
.hero {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: url('assets/clarity-bg.jpg') center/cover no-repeat;
  background-size: contain;
  background-position: top;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}

/* CONTENT */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: right;
  top: 40px;
  margin-right: 20px;
}

/* FLOATING ELEMENTS */
.float {
  position: absolute;
  width: 80px;
}

.planet-1 { top: 20%; left: 10%; }
.planet-2 { top: 30%; right: 10%; }

.sock-1 { bottom: 25%; left: 15%; }
.sock-2 { bottom: 30%; right: 20%; }

.gear-1 { top: 40%; right: 25%; }
.gear-2 { top: 50%; right: 15%; }

/* SECTIONS */
.section {
  padding: 80px 20px;
  text-align: center;
}

.light {
  background: #f9f9f9;
}

/* BUTTON */
.btn {
  padding: 12px 25px;
  background: #ff6f61;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}