styles.scss

@use "./reset" as *;
@use "./variables" as *;
@use "./header" as *;
@use "./grid" as *;
@use "./main" as *;
@use "./footer" as *;
@use "./animation" as *;
@use "./popup" as *;

body {
  background-color: $primary-color; //Coffee theme
  color: $white-color;
  padding: 0;
  margin: 0;
  max-width: 2560px;
  max-height: 4093px;
}

.link {
  color: $white-color;
  text-decoration: none;
}

.link:hover {
  color: $secondary-color;
  transition: none;
}

header,
main {
  padding: 0 25px; //Added padding to whole body as I was repeatedly adding 15px padding to each element
} //Did not add to footer as footer must cover the entire width

@media screen and (min-width: 768px) {
  header,
  main {
    padding: 0 50px;
  }
  .main-container {
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    height: 100vh;
  }

  .head-section,
  .about,
  .portfolio,
  .skills,
  .contact {
    scroll-snap-align: start;
  }
}