body {
  font-family: Arial, sans-serif;
  margin: 0 auto;
  max-width: 100%;
  background-color: #333434;
  color: #f1f1f1;
  padding: 0;
  box-shadow: inset 0 0 5px rgba(F, F, F, 0.7);
}

.container {
  display: flex;
  gap: 3%;
  width: 100%;
  padding: 0;
  box-shadow: inset 0 0 5px rgba(F, F, F, 0.7);
}

.box {
  flex: 1 1 35%;
  background-color: #033464;
  margin: 1px auto;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 15px;
  color: #F1E12F;
  max-height: 750px;
  overflow-y: auto;
  box-shadow: inset 0 0 5px rgba(F, F, F, 0.7);
}

.flex-container {
  display: flex;
  background-color: #033464;
  gap: 5px;
  margin: 1px auto;
  flex-wrap: wrap;
}

.flex-container > .col {
  flex: 1 1 33%;
  padding: 0;
  box-sizing: border-box;
}

.boxy {
  flex: 1 1 60%;
  color: #F00;
  background-color: #033464;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  border-radius: 15px;
  box-shadow: inset 0 0 5px rgba(F, F, F, 0.7);
}

.flex-container1 {
  display: flex;
  background-color: #033464;
  gap: 5px;
  padding: 0;
  flex-wrap: wrap;
}

.flex-container1 > .col {
  flex: 1 1 80%;
  padding: 0;
  box-sizing: border-box;
}

.navbar {
  display: flex;
  margin: 0 auto;
  padding: 2px 0;
  gap: 0;
  flex-wrap: wrap;
}

.navbar > .col {
  margin: 0 auto;
  gap: 0;
  flex: 1 1 100%;
}

.boz {
  flex: 1 1 45%;
  background-color: #232424;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
}

#chat-box {
  margin: 0;
  border-radius: 15px;
  border: 1px solid #333;
  background: #052737;
  text-align: left;
  color: #FFFFFF;
  height: 370px;
  max-width: 100%;
  overflow-y: auto;
  padding: 3px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.7);
}

.msg {
  margin: 4px 8px 4px 0;
  padding: 10px;
  border-radius: 20px;
  background: #171717;
  color: orange;
  text-align: left;
  font-size: 0.8em;
}

.msg strong {
  color: #4dd0f1;
  font-size: 1em;
  display: inline-block;
  text-align: left;
}

.time {
  font-size: 0.8em;
  color: #ada;
}

form {
  margin-top: 8px;
  display: flex;
  background: #0a0a0a;
  gap: 5px;
  align-items: center;
}

input[type=text] {
  padding: 8px;
  border: 1px solid #555;
  border-radius: 4px;
  max-width: 470px;
  background: #1c1c1c;
  color: #f1f1f1;
}

input[type=text]::placeholder {
  color: #aaa;
}

#name {
  width: 22%;
}

#content {
  flex: 1;
}

#btChanger1 {
  flex: 1 1 60%;
  padding: 2px 2px;
  border: none;
  background: #1F1F1F;
  color: #48C0FC;
  font-size: 1.75em;
  cursor: pointer;
  border-radius: 15px;
  transition: background 0.3s;
}

#btChanger1:hover {
  color: #FEC08E;
  background: #474747;
  cursor: pointer;
  border-radius: 15px;
}

h2 {
  text-align: center;
  background-color: #072F4F;
  color: #00bcd4;
  padding: 15px;
  border-radius: 15px;
}

/* Animations clignotantes solides */
	@keyframes blink-orange {
	   0%, 100% { color: orange; }
	   50% { color: #672727; }
	}

	@keyframes blink-green {
	   0%, 100% { color: lightgreen; }
	   50% { color: #276727; }
	}

	@keyframes blink-magenta {
	   0%, 100% { color: #FF77FF; }
	   50% { color: #672767; }
	}

	@keyframes blink-cyan {
	   0%, 100% { color: cyan; }
	   50% { color: #275767; }
	}

	@keyframes blink-red {
	   0%, 100% { color: red; }
	   50% { color: #772727; }
	}

	a.clignote1 {
	   animation: blink-orange 2s linear infinite;
	   font-weight: bold;
	   text-decoration: underline;
      	   padding: 5px 8px;
      	   border-radius: 6px;
      	   color: orange;
	}

	a.clignote2 {
	   animation: blink-green 2s linear infinite;
	   font-weight: bold;
	   text-decoration: underline;
      	   padding: 5px 8px;
      	   border-radius: 6px;
      	   color: lightgreen;
	}

	a.clignote3 {
	   animation: blink-magenta 2s linear infinite;
	   font-weight: bold;
	   text-decoration: underline;
      	   padding: 5px 8px;
      	   border-radius: 6px;
      	   color: magenta;
	}

	a.clignote4 {
	   animation: blink-cyan 2s linear infinite;
	   font-weight: bold;
	   text-decoration: underline;
      	   padding: 5px 8px;
      	   border-radius: 6px;
      	   color: cyan;
	}

	a.clignote5 {
	   animation: blink-red 2s linear infinite;
	   font-weight: bold;
	   text-decoration: underline;
      	   padding: 5px 8px;
      	   border-radius: 6px;
      	   color: red;
	}

    a:hover {
      color: #111; /* ED1  */
    }