body {
   font-family: 'Montserrat', sans-serif;
   margin: 0;
   padding: 0;
   background-color: rgb(28, 25, 25);
   /* background-image: url('img/noelTEL.svg'); */
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   min-height: 100vh;
   color: white;
}

html, body { 
   height: 100%;
}

.menu-icon {
   display: flex;
   cursor: pointer;
   position: relative;
   top: 15px;
   right: 15px;
   z-index: 1000;
}

.menu-icon div {
   width: 25px;
   height: 3px;
   background-color: white;
   margin: 5px 0;
   transition: 0.4s;
}

h1 {
   font-size: 3em;
}

.container {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: flex-start;
   gap: 10px;
   max-width: 75%;
   margin-left: 10%;
}

.button-container {
   display: flex;
   gap: 50px;
   margin-top: 5%;
   margin-left: 10%;
}

.button-container button {
   font-family: 'Montserrat', sans-serif;
   display: flex;
   justify-content: center;
   align-items: center;
   border: none;
   border-radius: 20px;
   padding: 10px 5%;
   cursor: pointer;
   box-shadow: 0 0 15px orange;
   font-size: 100%;
}

#button1 {
   background-color: orange;
   color: black;
}

#button2 {
   background-color: rgb(50, 41, 23);
   color: white;
}

.f-container {
   display: flex;
   justify-content: right;
   align-items: flex-end;
   gap: 10px;
   margin-left: 150px;
}

nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
}

nav ul li {
   margin: 0 15px;
}

nav ul li a {
   color: white;
   text-decoration: none;
}

nav ul li button {
   font-size: 100%;
   background-color: orange;
   color: black;
   border: none;
   border-radius: 20px;
   padding: 10px 20px;
   cursor: pointer;
   margin-left: 50px;
   box-shadow: 0 0 50px orange;
}

/* Responsive Styles */

@media (min-width: 750px) {
   body {
      background-image: url('img/noelHD.svg'); /* Image pour les grands écrans */
      background-size: 120% 120%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
   }
}

@media (max-width: 750px) {
   body {
      background-image: url('img/noel.jpg'); /* Image pour les petits écrans */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      max-width: 100%;
   }
   h1 {
      font-size: 2em;
   }

   .container {
      max-width: 90%;
      margin-left: 5%;
   }

   .button-container {
      flex-direction: column;
      gap: 20px;
      margin-left: 5%;
   }

   .f-container {
      margin-left: 0;
      justify-content: center;
   }

   nav ul {
      flex-direction: column;
   }

   nav ul li {
      margin: 10px 0;
   }

   nav ul li button {
      margin-left: 0;
   }

   .menu-icon div {
      width: 20px;
      height: 3px;
   }

   .button-container button {
      padding: 10px 10%;
      font-size: 90%;
   }

   nav ul li button {
      padding: 10px 15px;
   }

   .nav-links {
      display: none;
   }
   
   .burger-menu {
      display: flex;
   }

   #toggle-menu:checked ~ .nav-links {
      display: flex;
   }
}