:root {
  --head-bg: rgb(56, 60, 69);
  --works-bg: rgb(82, 82, 82);
  --about-bg: rgb(65, 65, 65);
  --contact-bg: rgb(58, 58, 58);
  --foot-bg: rgb(31, 31, 31);
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

  
  /* Removes the blue box on small devices */
  -webkit-tap-highlight-color: transparent;
  -ms-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent;
  -khtml-tap-highlight-color: transparent;
}

body {
  overflow-y: hidden;
  height: 100vh;
}

main {
  position: fixed;
  top: var(--nav-height);
  left: 0px;
  width: 100%;
  height: 100%;
  /* padding: 10px; */
  overflow-y: auto;
  scroll-behavior: smooth;
  background-color: black;
}

/* debug */
section {
  /* display: block; */
  /* width: 100%; */
  /* min-width: 700px; */
  /* margin-top: 10px; */
  /* margin-bottom: 10px; */
  padding: 60px 20px;
}

header {
  /* background-color: aquamarine; */
  background-color: var(--head-bg);
}

#works {
  background-color: var(--works-bg);
  height: fit-content;
}

#about {
  background-color: var(--about-bg);
}

#contact {
  background-color: var(--contact-bg);
}

#foot {
  height: 400px;
  background-color:var(--foot-bg);

}

.section-title{
  font-size: 30px;
  color: white;
  text-align: center;
  /* margin-top: 20px; */
  margin-bottom: 20px;
}


.separator{
  height: 10px;
}

.header-works{
  background-image: linear-gradient(var(--head-bg),var(--works-bg));
}

.works-about{
  background-image: linear-gradient(var(--works-bg),var(--about-bg));
}

.about-contact{
  background-image: linear-gradient(var(--about-bg),var(--contact-bg));
}

.contact-foot{
  background-image: linear-gradient(var(--contact-bg),var(--foot-bg));
}