.pointer {
    cursor: pointer;
}
body {
    text-align: center;
}

.menu {
    display:flex;
    flex-direction:row;
    max-width: 150px;
    justify-content: center;
}

button {
    border-radius: 10px;
    padding: 10px 30px;
    margin-bottom: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #717171;
    color: #CFCFCF;
    cursor: pointer;
}

.bouton{
  opacity:0.7
}

.bouton:hover {
    opacity: 1;
    cursor: pointer;
    color: black;
}

.boutonOff:hover {
    background-color: #FF1F28;
    cursor: pointer;
    color: black;
}

#menu {
    display:flex;
    max-width: 1500px;
    flex-direction:column;
    justify-content: center;
    margin-top: 100px;
}

#menu a, #menu h1 {
    color: black;
    text-decoration: none;
}

#parties {
    display: flex;
    max-height: 400px;
    flex-direction:row;
    justify-content: center;
    margin-top: 40px;
}

#principe {
    display: flex;
    max-height: 400px;
    flex-direction:row;
    justify-content: center;
    margin-top: 50px;
    margin-left: 50px;
    margin-right: 50px;
}

#thermostatiqueParties {
    display: flex;
    background-color: #2F93D3;
    max-width: 300px;
    max-height: 200px;
    border-radius: 10px;
    padding-right: 10px;
    padding-left: 10px;
    margin-left: 50px;
    margin-right: 50px;
    text-align: center;
}

#thermostatiquePrincipe {
    display: flex;
    background-color: #2BCDEC;
    max-width: 300px;
    max-height: 200px;
    border-radius: 10px;
    padding-right: 10px;
    padding-left: 10px;
    margin-left: 50px;
    margin-right: 50px;
    text-align: center;
}
#electroniqueParties {
    display: flex;
    background-color: magenta;
    max-width: 300px;
    max-height: 200px;
    border-radius: 10px;
    padding-right: 10px;
    padding-left: 10px;
    margin-left: 50px;
    margin-right: 50px;
    text-align: center;
    align-items: center;
}

#electroniquePrincipe {
    display: flex;
    background-color: violet;
    max-width: 300px;
    max-height: 200px;
    border-radius: 10px;
    padding-right: 10px;
    padding-left: 10px;
    margin-left: 50px;
    margin-right: 50px;
    text-align: center;
    align-items: center;
    
}

#courbeOn {
  animation: moveCourbeOn 12s ;
  animation-timing-function: linear;
  animation-iteration-count: 3;
  animation-play-state: paused;
}

@keyframes moveCourbeOn {
  from {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
  }
  to {
    stroke-dasharray: 240;
    stroke-dashoffset: 0;
  }
}

#courbeOff {
  animation: moveCourbeOff 12s ;
  animation-timing-function: linear;
  animation-iteration-count: 3;
  animation-play-state: paused;
}

@keyframes moveCourbeOff {
  from {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
  }
  to {
    stroke-dasharray: 240;
    stroke-dashoffset: 0;
  }
}

#electriciteBobine1 {
	animation: moveBobine 0.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}

#electriciteBobine2 {
	animation: moveBobine 0.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}

@keyframes moveBobine {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

#flecheLiquide1 {
	animation: fleche 0.2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}

#flecheLiquide2 {
	animation: fleche 0.3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}

#flecheLiquide3 {
	animation: fleche 0.4s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}

#flecheLiquide4 {
	animation: fleche 0.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}

#flecheEvaporateur1 {
	animation: fleche 0.2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}

#flecheEvaporateur2 {
	animation: fleche 0.3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}

#flecheEvaporateur3 {
	animation: fleche 0.4s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}

#flecheEvaporateur4 {
	animation: fleche 0.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}

@keyframes fleche {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}