*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  scroll-behavior:smooth;
}

/* NAVBAR */
nav{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  padding:15px 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:transparent;
  transition:0.4s;
  z-index:1000;
}

nav.scrolled{
  background:#111;
  box-shadow:0 2px 10px rgba(0,0,0,0.3);
}

.logo{
  color:white;
  font-size:24px;
  font-weight:bold;
}

ul{
  display:flex;
  list-style:none;
}

ul li{
  margin-left:25px;
}

ul li a{
  text-decoration:none;
  color:white;
  padding:8px 12px;
  border-radius:6px;
  transition:0.3s;
}

/* HOVER EFFECT */
ul li a:hover{
  background:#00c2ff;
  color:black;
}

/* SECTIONS */
section{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:40px;
  color:white;
}

#home{ background:linear-gradient(to right,#141e30,#243b55); }
#about{ background:#ff6b6b; }
#services{ background:#1dd1a1; }
#contact{ background:#576574; }

/* RESPONSIVE */
@media(max-width:768px){
  nav{
    flex-direction:column;
    padding:10px;
  }

  ul{
    margin-top:10px;
    flex-wrap:wrap;
    justify-content:center;
  }

  ul li{
    margin:10px;
  }
}