/* 1. Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* 2. Open Sans */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

/* 3. Lato */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* 4. Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

/* 5. Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* 6. Source Sans 3 */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap');

/* 7. Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* 8. Nunito */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');

/* 9. Raleway */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap');

/* 10. Noto Sans */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700&display=swap');

#f1-main-container, #f1-main-content {
    overflow: visible !important;
}

html {
  font-size: 14px; /* default is 16px */
}

body {
  font-family: 'Roboto', sans-serif;
  user-select: none;
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  height: 100vh;
  scroll-behavior: smooth;
}

.section {
  min-width: 100vw;
  scroll-snap-align: start;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  color: white;
  padding-bottom: 8rem; /* navbar height x 2 */
}

.click-zone {
  position: fixed;
  top: 0;
  width: 10%;
  height: 100%;
  z-index: 50;
}

.left-zone {
  left: 0;
}

.right-zone {
  right: 0;
}

/* Base state: hidden by default */
#loading-overlay.hidden {
  display: none;
}

/* Fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Fade-out animation */
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Active animation states */
#loading-overlay.fade-in {
  display: flex;
  animation: fadeIn 0.5s forwards;
}

#loading-overlay.fade-out {
  display: flex;
  animation: fadeOut 0.5s forwards;
}