/* header.css */

/* styles for desktop screens */

header {
	  width: 100%; /* Set the width to 100% for smaller screens */
	  position: relative;
	  height: auto;
	}
	
	header img {
	  position: relative;
	  top: 20px;
	  left: 50%;
	  transform: translateX(-50%);
	  width: 300px;
	  height: 56px;
	  z-index: 1;
	}
	
	 nav {
	  text-align: center;
	  position: fixed;
	  top: 120px;
	  width: 100%;
	  z-index: 2;
	  background-color: #410b47;
	  animation-name: nav;
	  animation-duration: 2s;
	  animation-fill-mode: both;
	  animation-iteration-count: infinite;
	  animation-direction: alternate;
	  /*background: linear-gradient(to right, #410b47 36.75%, #5a0606 72.16%) !important;*/
	  /* background-color: #410b47; /* add background color to the nav element */
	  padding: 5px 0; /* add padding */
	}
	@keyframes nav {
  from {background-color: #410b47;}
  to {background-color: #5a0606;}
}
	
	nav ul {
	  display: inline-block;
	  list-style: none;
	  margin: 0;
	  padding: 0;
	}
	
	nav ul li {
	  display: inline-block;
	  margin-right: 10px;
	}
	
	nav ul li:last-child {
	  margin-right: 0;
	}
	
	nav ul li a {
	  display: block;
	  padding: 10px;
	  text-decoration: none;
	  color: #c4c4c4; /* set text color to white */
	}
	
	nav ul li:hover a {
	  color: #ffa3a3; /* set text color on hover */
	}

/* Media query for smaller screens */
@media only screen and (max-width: 768px) {
  /* Hide the social icons */
  .social-icons {
    display: none;
  }
  
/* Adjust the width of the header */
  nav {
	  text-align: center;
	  position: fixed;
	  top: 120px;
	  width: 100%;
	  z-index: 2;
	  background: linear-gradient(to top, #410b47 0%, #5a0606 100%) !important;
	  /*background-color: #4c0003;*/
	  padding: 5px 0; /* add padding */
	}
	@keyframes nav {
  from {background-color: #410b47;}
  to {background-color: #5a0606;}
}
	nav ul {
	  display: inline-block;
	  list-style: none;
	  margin: 0;
	  padding: 0;
	}


  /* Adjust the width of the example element */
  nav {
    width: 100%; /* Set the width to 100% for smaller screens */
  }
  
   /* Adjust the font size for headings on mobile devices */
  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 18px;
  }

  /* Adjust the font size for paragraphs on mobile devices */
  p {
    font-size: 14px;
  }

  /* Adjust the font size for a specific element with a class on mobile devices */
  nav {
    font-size: 14px;
  }
}