/* Basic reset for body */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Prevent horizontal scroll on desktop */
}

/* Button styling */
button, a.button {
  padding: 1.3em 3em;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #fff;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  text-decoration: none; /* Remove underline for links */
  display: inline-block; /* Make links look like buttons */
  margin: 0 10px; /* Space between buttons */
}

button:hover, a.button:hover {
  background-color: #23c483;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}

button:active, a.button:active {
  transform: translateY(-1px);
}

/* Navigation styling */
.navigation {
  text-align: center;
  margin: 20px 0;
  position: relative; /* For positioning the scroll line */
}

/* Scroll line styling */
.scroll-line {
  position: fixed; /* Fixed position to stay at the bottom of viewport */
  left: 0;
  bottom: 0;
  height: 4px; /* Thickness of the line */
  width: 100%;
  background: linear-gradient(to right, 
    #ff4b2b, /* Red */
    #ff416c, /* Pink */
    #ff4b2b, /* Red */
    #ff416c, /* Pink */
    #ff4b2b, /* Red */
    #ff416c, /* Pink */
    #ff4b2b  /* Red */
  ); /* 7-color gradient */
  background-size: 200% 100%;
  animation: scrollLine 5s linear infinite; /* Animation for scrolling effect */
}

@keyframes scrollLine {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}

/* Content styling */
.content {
  display: flex;
  flex-direction: column; /* Default to vertical stacking for PC */
}

/* Page styling */
.page {
  padding: 20px;
  border: 1px solid #ccc;
  min-height: 100vh; /* Full height for each page */
}

/* Media query for mobile devices */
@media (max-width: 768px) {
  .navigation {
    display: flex; /* Horizontal layout for navigation on mobile */
    justify-content: flex-start; /* Align buttons to start of container */
    overflow-x: auto; /* Allow horizontal scrolling if necessary */
    white-space: nowrap; /* Prevent buttons from wrapping to the next line */
    padding: 10px 0; /* Adjust padding for mobile */
    position: relative; /* Ensure the scroll line is positioned correctly */
  }
  
  .navigation a.button {
    margin: 0 10px; /* Space between buttons on mobile */
  }
}