html, body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.header{
    width: 100%;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.container{
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; /*nem fontos*/
    margin: 0;
    align-items: center;
    background-color: rgb(248, 248, 232);
}

.dark-container{
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; /*nem fontos*/
    margin: 0;
    align-items: center;
    background-color: rgba(33,33,33);
}

.dark-container .header h1, .dark-container .ps{
    color: white;
}

.contract{
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contract p{
    font-size: 18px;
}

.dark-container .contract p{
    font-size: 18px;
    color: white;
}

.contract li{
    font-size: 16px;
    padding: 6px;
}

.dark-container .contract li{
    font-size: 16px;
    padding: 6px;
    color: white;
}

.buttons{
    width: 30%;
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}

.buttons button{
    height: 46px;
    width: 45%;
    border-radius: 22px;
    border: solid 4px black;
    transition: all 0.8s;
}


.dark-container .buttons button{
    height: 46px;
    width: 45%;
    border-radius: 22px;
    border: solid 4px white;
    transition: all 0.4s;
}

.container .buttons button:hover, .dark-container .buttons button:hover{
    cursor: pointer;
    transform: /*translateY(-2px)*/ scale(0.95);
    transition: all 0.3s;
}
/*
.container .buttons .accept:hover{
    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px rgb(255, 255, 255);
    box-shadow: 0 0 1px #000000, 0 0 2px #000000, 0 0 4px rgb(0, 0, 0);
    transition: all 0.8s;
}

.dark-container .buttons .accept:hover{
    text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 4px rgb(0, 0, 0);
    box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px rgb(255, 255, 255);
    transition: all 0.8s;
}

.container .buttons .decline:hover{
    text-shadow: 0 0 1px #000000, 0 0 2px #000000, 0 0 4px rgb(0, 0, 0);
    box-shadow: 0 0 1px #000000, 0 0 2px #000000, 0 0 4px rgb(0, 0, 0);
    transition: all 0.8s;
}

.dark-container .buttons .decline:hover{
    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px rgb(255, 255, 255);
    box-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 4px rgb(255, 255, 255);
    transition: all 0.8s;
}*/

.buttons p {
    font-weight: bold;
    font-size: 14px;
    margin: 0;
}

.dark-container .buttons p {
    font-weight: bold;
    font-size: 14px;
    margin: 0;
}

.buttons .accept, .buttons .change{
    background-color: black;
    color: white;
    transition: all 0.8s;
}

.dark-container .buttons .accept, .dark-container .buttons .change{
    background-color: white;
}

.dark-container .buttons .accept p, .dark-container .buttons .change p{
    color: black;
}

.buttons .decline, .buttons .back{
    background-color: transparent;
    color: black;
    transition: all 0.8s;
}

.dark-container .buttons .decline, .dark-container .buttons .back{
    background-color: transparent;
    color: white;
}

.atvalto{
    width: 200px;
    height: 50px;
    position: absolute;
    top: 90%;
    left: 85%;
    background-color: rgb(248, 248, 232);
    border-radius: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-shadow: inset 6px 6px 10px rgba(0, 0, 0, 0.15), inset -6px -6px 10px rgba(255, 255, 255, 0.3);
}

.dark-atvalto{
    width: 200px;
    height: 50px;
    position: absolute;
    top: 90%;
    left: 85%;
    background-color: rgb(54, 54, 54);
    border-radius: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-shadow: inset 6px 6px 10px rgba(0, 0, 0, 0.45), inset -6px -6px 10px rgba(36, 36, 36, 0.2);
}

.atvalto .text{
    color: black;
    font-weight:550;
}

.dark-atvalto .text{
    color: white;
    font-weight: 550;
}

.container hr {
    width: 60%;
    height: 1px;
    background: rgb(0, 0, 0);
    border: 0;  
    }

.container .footer, .dark-container .footer{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.dark-container hr {
    width: 60%;
    height: 1px;
    background: rgb(255, 255, 255);
    border: 0;  
}

.container .services{
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.dark-container .services{
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.container .services p{
    font-size: 10px;
    text-align: center;

}

.dark-container .services p{
    font-size: 10px;
    text-align: center;
    color: white;
}

@media screen and (max-width: 850px) {
    .container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        margin: 0;
        align-items: center;
        background-color: rgb(248, 248, 232);
        box-sizing: border-box;
        padding-top: 70px;
    }
    .dark-container{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /*nem fontos*/
        margin: 0;
        align-items: center;
        background-color: rgba(33,33,33);
        box-sizing: border-box;
        padding-top: 70px; 
    }
    
    .buttons{
        width: 90%;
        height: 110px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly ;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .atvalto {
        left: 50%;
        top: 2%;
        transform: translateX(-50%);
    }
    .dark-atvalto {
        left: 50%;
        top: 2%;
        transform: translateX(-50%);
    }

    .header h1{
        
        padding-top: 0px;
        font-size: 20px;
    }
    .contract p{
        font-size: 14px;
    }
    .contract li{
        font-size: 12px;
    }
    .contract .ps{
        font-size: 14px;
    }
    .services p{
        font-size: 6px;
    }

    .header{
      text-align: center;
        align-items: center;
    }
}

/*@media screen and (min-width: 2560px) {
    .atvalto {
        left: 80%;
    }
}*/

  .toggle {
    position: relative;
    width: 50px;  /* kisebb toggle */
    height: 25px; /* kisebb toggle */
    border-radius: 50px;
    background: linear-gradient(to top, #87ceeb, #b3ecff);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
    cursor: pointer;
    overflow: hidden;
    transition: background 0.5s ease-in-out;
  }

  .toggle.night {
    background: linear-gradient(to top, #0f2027, #203a43);
  }

  .thumb {
    position: absolute;
    top: 3.5px;
    left: 3px;
    width: 16px;  /* kisebb thumb */
    height: 16px; /* kisebb thumb */
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffeb3b, #fbc02d);
    box-shadow: 0 0 6px 1.5px #fff59d;
    transition: all 0.5s ease-in-out;
    z-index: 3;
  }

  .toggle.night .thumb {
    left: 28px; /* kisebb toggle miatt kevesebb eltolás */
    background: radial-gradient(circle at 30% 30%, #dcdcdc, #999);
    box-shadow: 0 0 4px 1.5px #b0bec5;
  }

  .clouds, .stars, .shooting-star {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.5s ease-in-out;
  }

  .clouds {
    background: none;
    opacity: 0.8;
  }

  .toggle.night .clouds {
    opacity: 0;
  }

  .clouds::before,
  .clouds::after {
    content: "";
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.85; /* kevésbé áttetsző */
    filter: drop-shadow(0 0 2px rgba(255 255 255 / 0.6));
    animation: moveClouds 20s linear infinite;
  }

  .clouds::before {
    width: 18px;
    height: 18px;
    top: 4px;
    left: -28px;
    box-shadow:
      27px 0px rgba(255, 255, 255, 0.85),
      54px 4px rgba(255, 255, 255, 0.85),
      81px -3px rgba(255, 255, 255, 0.85);
  }

  .clouds::after {
    width: 14px;
    height: 14px;
    top: 8px;
    left: -18px;
    box-shadow:
      27px 2px rgba(255, 255, 255, 0.85),
      54px 0px rgba(255, 255, 255, 0.85),
      81px 4px rgba(255, 255, 255, 0.85);
  }

  .stars {
    opacity: 0;
  }

  .toggle.night .stars {
    opacity: 1;
  }

  .star {
    position: absolute;
    width: 1px;
    height: 1px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 2px 1px white;
    animation: twinkle 3s infinite ease-in-out;
  }

  .shooting-star {
    width: 1px;  /* legkisebb hullócsillag */
    height: 1px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 20%;
    left: 60%;
    opacity: 0;
    box-shadow: 0 0 4px 1.5px white;
    animation: shoot 3s infinite ease-in-out;
  }

  @keyframes moveClouds {
    0% { transform: translateX(0); opacity: 1; }
    49.99% { opacity: 0.8; }
    50% { opacity: 0,5; transform: translateX(-100%); }
    100% { opacity: 0.8; transform: translateX(0); }
  }

  @keyframes twinkle {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.4); }
  }

  @keyframes shoot {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: 1; }
    50% { transform: translate(-20px, 10px); opacity: 0; }
    100% { opacity: 0; }
  }

body, .container, .dark-container, .buttons button, .buttons p,
.contract p, .contract li, .atvalto, .text, .header h1 {
  transition: all 0.4s ease-in-out;
}

/* Általános animáció az összes érintett elemre */
body, .container, .dark-container,
.buttons button, .buttons p,
.contract p, .contract li,
.atvalto, .text,
.header h1 {
  transition: all 0.4s ease-in-out;
}

.container, .dark-container {
  transition: background-color 0.5s ease-in-out;
}

.buttons button {
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.contract p, .contract li, .buttons p, .header h1 {
  transition: color 0.4s ease;
}

.describe{
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
}

.describe > p {
  font-size: 16px;
  margin: 0;
  padding-left: 20px;
}

.dark-container .describe > p{
  color: white;
}

.dark-container h2{
    color: white;
}

.describe .buttons{
  margin-top: 50px;
}