@charset "utf-8";
/* CSS Document */


h1 {
    margin-top: 25px; /* Supprimer la marge supérieure par défaut */
    margin-bottom: 30px; /* Marge inférieure du titre */
    text-align: left;
    color: #F0AADD;
    font-size: 1.3em;
}

footer .fa {
  padding: 5px;
  font-size: 35px;
  width: 30px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
	
}

/* youtube */

.fa-youtube {
  background: #CCA3EFFE;
  
	font-size: 25px;
}
		/* Twitter */
.fa-twitter {
  background: #55ACEE;
  
	font-size: 25px;
}
/* Facebook */
.fa-facebook {
  background: #3B5998;
  
	font-size: 25px;
}
#button-addon1 {
  color: #EE46E6;
}

i {
  color: #EE46E6;
}

.form-control::placeholder {
  font-size: 0.95rem;
  color: #aaa;
  font-style: italic;
}

.form-control.shadow-0:focus {
  box-shadow: none;
}
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
   border: thin;
    color: #646464;
}
  
/* custom styling for all icons */
  .fa-solid,
  .fa-brands,
  .fa-sharp-solid,
.fa {
	color: deeppink;
    border-radius: 0.2em;
    padding: 0.3em;
  }

.active {
    background-color: #7774D6;
    text-align: center;
}



/* Then style the iframe to fit in the container div with full height and width */

ul  {
    color: #555555;
    border-radius: 0.2em;
    padding: 0.3em;
    text-align: left;
    font-size: 16px;
}

.li a:hover {
  background-color: #000;
}
ul > li   {
    text-decoration: none;
    color: #F4C27F;
    font-weight: bold;
}

.li > a {
	
background-color: #000;
text-decoration-color: aquamarine;
}	
		
	
.button:hover { 
background-color: purple;
}

.button {
  background-color: #912ADD;
  border: none;
  color: lightpink;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer; 
}


body {
    padding: 1px;
    font-size: 1.1em;
    color: #933FEF;
	}
p {
    color: #686568;
    font-size: 16px;
    padding: 5px;/* Marge interne de la section blog */
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}

/* Section blog */
.pad {
  padding: 10px; /* Marge interne de la section blog */
	text-align: center;
}

/* Bar HR bas */
.hr {
   /* Couleur de fond des articles */
    border: 2px solid #841A83; /* Bordure des articles */
    padding: 5px; /* Marge interne des articles */
    margin-bottom: 1px; /* Marge entre les articles */
	background-color: #BC1BD1;
    text-align: center;
	color: pink;
}

/* Articles du blog */
.article {
    /* Couleur de fond des articles */
    border: 1px solid #ddd; /* Bordure des articles */
    padding-top: 20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px; /* Marge interne des articles */
    margin-bottom: 10px; /* Marge entre les articles */
    text-align: center;
    color: hsla(351,5%,72%,1);
}

/* Titres des articles */
.article h2 {
    margin-top: 0; /* Supprimer la marge supérieure par défaut */
    margin-bottom: 10px; /* Marge inférieure du titre */
    text-align: left;
    color: #312D33;
    font-size: 1.3em;
}
/* Titres des articles */
.article h3 {
    margin-top: 0; /* Supprimer la marge supérieure par défaut */
    margin-bottom: 10px; /* Marge inférieure du titre */
    color: #F49370;
    text-align: center;
	text-decoration: underline;
	font-size: 1.2em;
	}

.article h4 {
    margin-top: 0; /* Supprimer la marge supérieure par défaut */
    margin-bottom: 10px; /* Marge inférieure du titre */
    color: #4D4343;
    text-align: left;
	text-decoration: underline;
	font-size: 1.1em;
	}
/* Images des articles */
.article img {
  max-width: 100%; /* Largeur maximale des images */
  height: auto; /* Conserver le ratio d'aspect des images */
  margin-bottom: 10px; /* Marge inférieure des images */
}

/* Contenu des articles */
.article p {
    line-height: 1.5; /* Espacement entre les lignes de texte */
    color: #4D4D4D;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
	
}



footer {
  
  color: #fff; /* Change the text color */
  padding: 20px; /* Add padding to the footer */
  display: flex; /* Make the sections display side-by-side */
  justify-content: center; /* Distribute sections evenly */
}

.footer-section {
    padding-top: 10px;
    flex: 1; /* Make each section take up half the space */
    text-align: center; /* Center the content within each section */
    background-color: #EC4FFF;
    background-image: -webkit-linear-gradient(302deg,rgba(255,255,255,1.00) 0%,rgba(247,191,255,1.00) 95.34%);
    background-image: -moz-linear-gradient(302deg,rgba(255,255,255,1.00) 0%,rgba(247,191,255,1.00) 95.34%);
    background-image: -o-linear-gradient(302deg,rgba(255,255,255,1.00) 0%,rgba(247,191,255,1.00) 95.34%);
    background-image: linear-gradient(148deg,rgba(255,255,255,1.00) 0%,rgba(247,191,255,1.00) 95.34%);
}

.footer-section > active {
    background-color: #7A00D7;
    text-align: center;
}

.footer-section h2 {
  margin-bottom: 10px; /* Add space below the heading */
}

.footer-section a {
   /* Change the link color */
  text-decoration: none; /* Remove underline from links */
  margin-bottom: 5px; /* Add space between links */
color: #841A83;
}

.footer-section p {
color: #4E34B9; /* Change the link color */
text-decoration: none; /* Remove underline from links */
margin-bottom: 5px; /* Add space between links */
color: #f2f2f2;
}

.footer-section a:hover {
    opacity: 0.8; /* Change link opacity on hover */
    color: #808080;
    text-align: center;
    padding-top: 10px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #0B0808;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}

/* Add an active class to highlight the current page */
.active {
  background-color: #933FEF;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 20px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
    background-color: #E962E4;
    color: #F5E9E9;
}

.dropdown-content a:hover {
  background-color: #EE46E6;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }

}