/* ADDING AUTO SCALING FUNCTIONALITY PER DEVICE */
:root {
  --base-font-size: 16px;
  --base-margin: 0.1rem;
}

@media (max-width: 600px) {
  :root {
    --base-font-size: 14px;
    --base-margin: 0.1rem;
  }
  .navButtons nav {
    display: flex;
    flex-direction: row;
    width: 100vw;
    padding: 0;
    margin: 0;
    justify-content: space-between;
  }
  .navButtons a {
    flex: 1 1 0;
    text-align: center;
    width: 100%;
    font-size: 1rem;
    padding: 1rem 0;
    box-sizing: border-box;
    margin: 0;
    border-radius: 0;
  }
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: radial-gradient(to top left, #371b89, #604c81);
  font-size: var(--base-font-size);
  margin: var(--base-margin);
}
header {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(to bottom right, #2D1B4A, #371b89);
}

#Tap {
  font-size: 0.8em;
          color: #c6d6ef; /* Before hover */
          background: linear-gradient(to right, #a2d1f0, #e6db64, #f683b3, #24c6f3, #f3f3f5); /* Gradient colors */
          -background-clip: text; /* Clip gradient to text */
          -webkit-background-clip: text; /* clip gradient to text*/
          -webkit-text-fill-color: transparent; /* Fill text with gradient */
          text-decoration: none; /* Remove underline */
}
#Tap:hover {
  text-decoration: underline; /* Underline on hover */
  background: linear-gradient(to right, rgb(140, 249, 253), #faf299, #e4a3be, #9e93fc); /* Gradient colors */
  -webkit-background-clip: text; /* Clip gradient to text */
}
header h1 {
  font-family: 'Viaoda Libre', serif;
  font-size: 3rem;
  color: #FFFFFF;
}
header p {
  font-size: 1.2rem;
  color: #D8CFF0;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

    /* Style for the navigation buttons */
        .navButtons {
          display: flex;
          justify-content: center;
          margin-top: 20px;
        }
        .navButtons a {
          margin-left: var(--base-margin);
          margin-right: var(--base-margin);

        }

        nav a {
          margin: 0 15px;
          text-decoration: none;
          /* --color: #c37bd1 */
          font-weight: bold;
          padding: 10px 20px;
          background-color: #4b0a68; /* Background color */
          border: 2px solid transparent; /* Transparent border for gradient effect */
          border-radius: 28px;
          background-image: linear-gradient(#171717, #042b22),  /* Gradient colors */
                            linear-gradient(to right,  #c895b6, #c8b96e, #a46153, #498789); /* Gradient colors */                         
          background-origin: border-box; /* Ensure background covers the border */
          background-clip: padding-box, border-box; /* Clip background to padding and border */
          
          transition: all o.3s ease; /* Smooth transition for hover effect */
        }

        /* #adding hover to nav buttons*/
        nav a:hover {
          background-color: #4b0a68; /* Background color on hover */
          color: #fff; /* Text color on hover */
          border: 2px solid transparent; /* Transparent border for gradient effect */
          background-image: linear-gradient(#171717, #042b22),  /* Gradient colors */
          linear-gradient(to right,  #6696ff, #ff5c3b, #fff6c7, #ffc3ea); /* Gradient colors */                         

                          /*  linear-gradient(to right,  #ffc3ea, #fff6c7, #ff5c3b, #6696ff); /* Gradient colors */                         
          background-origin: border-box; /* Ensure background covers the border */
          background-clip: padding-box, border-box; /* Clip background to padding and border */
          transform: scale(1.08); /* Slightly enlarge on hover */
          box-shadow: 0 4px 8px rgba(1, 110, 68, 0.2); /* Shadow effect on hover */
        
        }

        /*--Starting color*/
        nav a[href="#blog"] {
          color: #c6d6ef; /* Before hover */
        }
        #VCButton { /* FIND NEW FUTURIST BUT BRANDING FONT */
          font-family: 'Amarante';
          font-weight: 400;
          font-style: normal;
        }
        /*-Individual hover colors-->*/
        nav a[href="#blog"]:hover {
          color: #e6db64; /* Change color on hover */
        }

        nav a[href="#book"] {
          color: #e6db64; /* Before hover */
        }
        #bookButton {
          font-family: "Amarante", serif;
          font-weight: 400;
          font-style: normal;
        }

        nav a[href="#book"]:hover {
          color: #e7176d; /* Change color on hover */
        }

        nav a[href="#community"] {
          color: #f871a9; /* Before hover */
        }
        #commButton {
          font-family: "Amarante", serif;
          font-weight: 400;
          font-style: normal;
        }
        nav a[href="#community"]:hover {
          color: #0f89db; /* Change color on hover */
        }

        nav a[href="#support"] {
          color: #0f89db; /* Before hover */
        }
        #suppButton {
          font-family: "Amarante", serif;
          font-weight: 400;
          font-style: normal;
        }

        nav a[href="#support"]:hover {
          color: #c6d6ef; /* Change color on hover */
        }
        

nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
}
nav a {
  color: #D8CFF0;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}
nav a:hover {
  color: #FFFFFF;
}
section.hero {
  text-align: center;
  padding: 3rem 2rem;
  background-color: #3A2D60;
}
section.hero h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
section.hero p {
  font-size: 1rem;
  color: #D8CFF0;
  max-width: 600px;
  margin: 0 auto;
}
footer {
  text-align: center;
  padding: 2rem;
  background-color: #140e1d;
  font-size: 0.9rem;
  color: #D8CFF0;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}