body {
  text-align: center;
  background-color: #1f1f2e;
  font-family: Trebuchet MS;
}

h1 {
  color: #fff;
}

#output {
  background-color: #000;
  color: #fff;
  width: 600px;
  height: 80px;
  font-size: 48px;
  border-radius: 5px;
  text-align: left;
  padding: 0px 10px 0px 10px;
  box-shadow: 0px 0px 30px -5px #fff;
}

#buttons {
  margin-top: 15px;
}

.button {
  color: #fff;
  text-align: center;
  line-height: 70px;
  display: inline-block;
  background-color: #595959;
  border: 1px solid #33ccff;
  height: 70px;
  width: 100px;
  font-size: 36px;
  margin-right: -4.6px;
  cursor: pointer;
}

.button:hover {
  background-color: #0066ff;
  box-shadow: 0px 0px 30px 0px #fff;
}

.button:active {
  background-color: #80b3ff;
  box-shadow: 0px 0px 30px 0px #000;
}

.number {
  background-color: #404040;
}

.number:active {
  background-color: #80b3ff;
  box-shadow: 0px 0px 30px 0px #000;
}

#zero {
  width: 200px;
}

#decimal {
  font-weight: bold;
}

#equals {
  background-color: #0066ff;
}

#equals:hover {
  background-color: #fff;
  color: #000;
  box-shadow: 0px 0px 30px -5px #fff;
}

#backspace {
  background-color: #333333;
}

#backspace:hover {
  background-color: #99003d;
}

#backspace:active {
  background-color: #ff4d94;
  box-shadow: 0px 0px 30px 0px #000;
}

#clear {
  background-color: #262626;
}

#clear:hover {
  background-color: #cc0000;
}

#clear:active {
  background-color: #ff4d4d;
  box-shadow: 0px 0px 30px 0px #000;
}

#radians, #degrees {
  width: 200px;
}

#radians:hover {
  background-color: #00b38f;
}

#degrees:hover {
  background-color: #00b38f;
}




/* Responsive design pour petits écrans */
@media (max-width: 600px) {
  #output {
    width: 100%; /* Ajuster la largeur à la fenêtre */
    font-size: 24px; /* Taille de police plus petite */
  }

  .button {
    width: 20%; /* boutons prennent 20% de la largeur de l'écran */
    font-size: 20px; /* Taille de police plus petite */
  }

  .row {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  #zero, #radians, #degrees {
    width: 40%; /* boutons plus larges pour 0, radians, degrees */
  }
}