body {
    font-family: Arial, sans-serif;
    background-color: #ebf6ee;
    padding: 20px;
}
.container {
    background-color: #fbe5b3;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    width: 90%; /* Зробить контейнер адаптивним */
    max-width: 800px; /* Обмежить його максимальну ширину */
    margin-left: auto;
    margin-right: auto; /* Відцентрує контейнер */
}

.last-values {
    text-align: center;
    font-size: 1.2em;
}
.last-values h2 {
    margin-top: 0;
    color: #4A241A;
}
.last-values div {
    margin-bottom: 10px;
}
.last-values span {
    font-weight: bold;
    color: #4A241A;
}
.button-link {
    display: inline-block;
    padding: 10px 15px;
    margin: 5px;
    color: white;
    background-color: #4a241a;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}
.button-link:hover {
    background-color: #8C6C64;
}
.image-container img {
  max-width: 100%;  /* Зображення не буде ширшим за 100% свого контейнера */
  height: auto;     /* Зберігає пропорції */
  display: block;
}
        .range-container {
            text-align: center;
            margin: 20px 0;
        }
        .range-container input[type="range"] {
            width: 80%;
            max-width: 500px;
        }

.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 650px; /* Устанавливаем максимальную ширину для контейнера */
  padding-top: 69.23%; /* Соотношение сторон (450/650)*100 */
  margin: 0 auto;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}