body {
	font-family:arial, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none
}

.cursor--small {
    width: 5px;
    height: 5px;
    left: -2.5px;
    top: -2.5px;
    border-radius: 50%;
    z-index: 11000;
    background: var(--color-text)


}

.cursor--canvas {
    width: 100vw;
    height: 100vh;
    z-index: 12000
}

#notes, #general {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: center;
	margin-bottom: 1em;
}

#general img{
	width: 500px;
}

#general .texte{
	padding:2em;
}

.bulletins, .e3c, .e_t{
	display: flex;
	flex-direction: column;
	margin: 0.5em 0;
	padding: 1em 2em;
	justify-content: space-evenly;
	border-radius: 1em;
}

.bulletins {
	background-color: #ffe0e0;
}

.e3c {
	background-color: #e0ffe0;
}

.e_t {
	background-color: #ffffff;
}


#premiere, #terminale  {
	margin: 0 4em;
	background-color: #e0e0e0;
	padding:0 2em;
	border-radius:2em;
}

input {
	margin:0.5em;
	width:5em;
}

button {
	margin:0.5em;
	padding:0.5em;
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	background-color: rgb(255, 255, 255);
	color: rgb(0, 81, 255);
	border-radius: 0.5em;
}

button:hover {
	color: #fff;
	background-color: rgb(255, 0, 0);
}
button:surprise {
	background-color: #e0e0e0;

}

#note_finale  {
	display: flex;
	height: 2em;
	background-color: #e0e0e0;
	border-radius:2em;
	align-items: center; /* centre verticalement dans un flexbox*/
	justify-content: center; /* centre horizontalement dans un flexbox*/
}



.area {
  text-align: center;
  font-size: 6.5em;
  color: rgb(255, 0, 0);
  letter-spacing: -7px;
  font-weight: 700;
  text-transform: uppercase;
  animation: blur .75s ease-out infinite;
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}

@keyframes blur {
  from {
    text-shadow:0px 0px 10px rgb(255, 0, 0),
      0px 0px 10px rgb(255, 0, 0), 
      0px 0px 25px rgb(255, 0, 0),
      0px 0px 25px rgb(255, 0, 0),
      0px 0px 25px rgb(255, 0, 0),
      0px 0px 25px rgb(255, 0, 0),
      0px 0px 25px rgb(255, 0, 0),
      0px 0px 25px rgb(255, 0, 0),
      0px 0px 50px rgb(255, 0, 0),
      0px 0px 50px rgb(255, 0, 0),
      0px 0px 50px #ff0000,
      0px 0px 150px #ff0000,
      0px 10px 100px #ff0000,
      0px 10px 100px #ff0000,
      0px 10px 100px #ff0000,
      0px 10px 100px #ff0000,
      0px -10px 100px #ff0000,
      0px -10px 100px #ff0000;
  }
}

.box-container{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 5em;
  height: auto;
  background-color: rgb(255, 0, 0); */
}
.box{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width:300px;
  height: 30em;
  text-align: center;
  box-shadow: 2px 2px 20px rgba(90,118,253,0.15);
  border-radius: 10px;
  background-color: #fff;
  margin: 20px;
  flex-grow: 1;
  padding: 1em;

  transition: 0.5s;
}
.box:hover{
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

.box img{
  height:150px;
  margin:10px;
}
.box h1{
  font-size: 1.5rem;
  color: #22252e;
  letter-spacing: 1px;
  font-weight: 700;
}
 .box p{
  font-size: 1rem;
  color: #ff0000;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 500px;
}
.head-box{
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}
.head-box h2{
  line-height: 55px;
  font-size: 2.2rem;
  color:#22252e;
  letter-spacing: 1px;
  font-weight: 700;
}
.head-box p{
  font-size: 1rem;
  color:#777474;
  width:50%;
}
.azerty{
  background-color: #ff0000;


}