:root {
	--background: white;
	--text: #333333; 
	
	--primary: #457b9d; /* Teal blue */
	--complementary: #ff2f92; /* Pink */
	--text-complementary: #d81b7a; /* A darker pink for text to increase legibility */
	--secondary: #5f6f7a; /* Blueish gray */
}

/* index.css */
body {
  font-family: "Roboto", "Montserrat", "Segoe UI", sans serif;
  background-color: white;
  color: #333333;
  margin: 0;
}

/* General classes */
.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

/* Header */
header {
  width: 100%;
  /* Make sure that the full picture appear */
  min-height: 25em;
  
  background-image: url("img/band.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  /* On small phone screens, the nav might overlap with the background image */
  background-size: 600px 400px; 
}

header h1 {
  margin: 0 0 0 0.5em;
  padding-top: 0.1em;
  padding-left: 0.2em;
  
  font-size: xxx-large;
  color: #457b9d;
}

/* Nav */
nav {
  width: 100%;
}

nav a {
  display: block;
  padding-right: 0.1em;
  
  margin-right: 0.6em;
  margin-left: 0.5em;
  margin-top: 0.1em;
  
  text-align: right;
  
  color: #999999;
  font-size: xxx-large;
  font-weight: bold;
  
  text-decoration: none;
}

nav a span {
  position: absolute;
  left: 0.7em;
  color: white;
}

nav a:hover {
  color: #333333;
  background-color: rgba(128, 128, 128, 0.25);
}

/* Section */
section {
  margin: 0 0.5em 0 0.5em;
  padding: 0.1em 1em 1em 1em;
}

section > h3 {
	font-size: 1.5rem;
	color: var(--primary);
	border-bottom: 0.2rem solid var(--complementary);
}

section > p {
  text-align: center;
}

section > figure {
  text-align: center;
}

section > table {
  margin: auto;
}

section > time {
  display: block;
  text-align: right;
  font-size: small;
}

section > time:before {
  content: "Posted : ";
  font-style: italic;
}

/* EVENT */
section#event {
  margin-top: 1em;
  padding-bottom: 0;
}

section#event > iframe {
  display: block;
  margin: auto;
}

section#event div.concert {
  text-align: center;
  background-color: var(--text-complementary);
  width: 30%;
  margin: auto;
  background-color: #c7dbe7;
  padding: 0.5rem;
  border-radius: 1rem;
}

section#event > p.epigraph {
  text-align: center;
  color: var(--primary);
  font-weight: bold;
  font-size: 1.2rem;
}

section#event hr {
  color: var(--primary);
}

section#event > p.center {
  text-align: center;
}

section#event > p {
  text-align: justify;
}
  
/* ABOUT */
section#about > p {
  text-align: justify;
}

/* MUSIC */
section#music > div {
	text-align: center;
}

/* CONTACT */
section#contact {
  max-width: 800px;
  margin: 2rem auto;
	
  text-align: center;
}

#contact h3 {
  font-size: 2rem;
}

#contact p {
  font-size: 1.1rem;
	text-align: center;
}

#contact a {
  color: var(--primary);
  text-decoration: none;
	
  transition: color 0.3s ease;
}

section#contact > p > a:hover {
  color: var(--text-complementary);
	transform: scale(2);
}

div.socials {
  display: flex;
  justify-content: center;
  
	margin-top: 1.5rem;
  gap: 3rem;
}

div.socials img {
  width: 50px;
  height: 50px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

div.socials a:hover img {
  transform: scale(1.2);
  filter: brightness(1.2); /* subtle glow effect on hover */
}

/* Pied de page */
footer {
  clear: both;
  border-top: 2px solid #457b9d;
  text-align: center;
  width: 100%;
}