/* MAIN */
:root {
    --primary-bg-color: #23cfcf;
    --secondary-bg-color: #ec2170;
    --grey-color: #d9d9d9;
  }
  
  .content {
    width: 100%;
  }
  body,
  html {
    overflow-x: hidden; /* Prevent horizontal scroll */
  }
  
  body {
    font-family: "Roboto", sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: var(--primary-bg-color);
  }
  
  /* NAVBAR */
  nav,
  .navbar,
  .navbarClass {
    background-color: var(--primary-bg-color);
  }
  nav {
    box-shadow: 0 3px 2px -2px rgb(90, 89, 89);
  }
  .nav-link {
    color: black;
    font-size: calc(1.3rem + 0.5vw);
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
  }
  .nav-link.active {
    text-decoration: underline;
  }
  .nav-link:hover {
    text-decoration: underline;
  }
  
  .navButton {
    color: white;
    font-size: 1.5rem;
    padding: 10px 25px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.5s;
    background-color: #ec2170;
  }
  .navButton:hover {
    background-color: #c73d7b;
  }
  
  /* FOOTER */
  
  footer {
    padding: 50px 0;
    box-shadow: 0 -2px 2px -2px rgb(90, 89, 89);
    text-align: center;
  }
  
  .footerItem a {
    color: black;
    font-size: 1.2rem;
  }