*{
  margin:0;
  padding:0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
:root{
  --bg1:#96acce;
  --bg2:#4371c7;
}
footer{
  font-style: italic;
  color:rgb(223, 137, 137);
  font-size: .8rem;
}



#page{
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
header{
  display: flex;
  justify-content: space-between;
  background-color: var(--bg1);
  padding: .2rem;
}
#menu{
  width: 2rem;
  background: none;
  border: none;
  padding:.2rem;
}
#exo{
  display: block;
  padding:1rem;
  flex:1;
  /* width: 100%; */
}
form,
#enregistrements{
  display: flex;
  gap:.5rem;
  /* margin-top: .5rem; */
}
#nbReps{
  padding: .5rem;
  text-align: center;
  font-size: 3rem;
  width:40%;
}
#nbReps::placeholder{
  opacity: .2;
}
#enregistrer{
  flex:1;
}

main{
  padding:.5rem;

  flex:1;
}
#listeExos{
  display: flex;
  justify-content: space-between;
  /* gap:.5rem; */
  /* height: 2rem; */
}
#listeExos button{
  /* flex:1; */
  width: 4rem;
}
#listing{
  margin-top: .5rem;;
}
#listing li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .2rem;
}
.delete-btn,
.edit-btn{
  width: 1.2rem;
  margin:0 .2rem;
  padding: .1rem;
}


#pageMenu{
  position: absolute;
  top:0;
  right:0;
  height: 100dvh;
  background-color: var(--bg2);
  display: flex;
  flex-direction: column;
  gap:1rem;
  opacity: .9;
  transition: .2s ease-in-out;
  overflow: hidden;
}
#pageMenu button,
#pageMenu input{
  padding:1rem;
}
#pageMenu button#fermeMenu{
  width: 2rem;
  padding:.2rem;
}
.menuFerme{
  width: 0px;
}
.menuOuvert{
  width:45%;
  padding:1rem;
}