:root {
    --block-negative-bg: rgb(69, 181, 233);
    --block-positive-bg: rgb(224, 69, 69);
    --block-negative-bg-hover: rgb(59, 161, 213);
    --block-positive-bg-hover: rgb(204, 49, 49);
    --block-negative-fg: rgb(69, 181, 233);
    --block-positive-fg: rgb(224, 69, 69);
    --block-negative-fg-hover: rgb(59, 161, 213);
    --block-positive-fg-hover: rgb(204, 49, 49);
    --background-gradient-start: #3859ec;
    --background-gradient-end: #6623aa;
}
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--background-gradient-start) 0%, var(--background-gradient-end) 100%);
    font-family: Arial, sans-serif;
    position: relative;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}
.kettle {
    width: 780px;
    height: 780px;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg height='800px' width='800px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 511.988 511.988' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%23AAB2BC;' d='M149.448,511.988c-2.453,0-4.906-0.844-6.922-2.562c-4.468-3.812-5.015-10.547-1.187-15.031 l21.327-24.999c3.828-4.5,10.562-5.031,15.047-1.203s5.016,10.547,1.188,15.047l-21.328,24.999 C155.464,510.707,152.464,511.988,149.448,511.988z'/%3E%3Cpath style='fill:%23AAB2BC;' d='M362.786,511.988c-3.016,0-6.016-1.281-8.125-3.75l-21.326-24.999 c-3.828-4.5-3.281-11.219,1.188-15.047c4.484-3.828,11.219-3.297,15.047,1.203l21.326,24.999 c3.828,4.484,3.297,11.219-1.188,15.031C367.693,511.144,365.24,511.988,362.786,511.988z'/%3E%3C/g%3E%3Cpath style='fill:%23434A54;' d='M432.38,303.789c-5-40.732-16.453-71.583-16.938-72.88c-1.562-4.156-5.547-6.914-10-6.914H106.793 c-4.453,0-8.421,2.758-9.984,6.914c-0.484,1.297-11.953,32.147-16.953,72.88c-2.953,24.109-3.016,46.687-0.172,67.124 c3.625,26.077,12,48.733,24.905,67.343c28.984,41.858,79.967,63.076,151.528,63.076s122.543-21.218,151.543-63.076 c12.891-18.609,21.266-41.266,24.906-67.343C435.396,350.475,435.349,327.898,432.38,303.789z'/%3E%3Cpath style='opacity:0.1;fill:%23FFFFFF;enable-background:new ;' d='M432.38,303.789c-5-40.732-16.453-71.583-16.938-72.88 c-1.562-4.156-5.547-6.914-10-6.914h-21.328c4.453,0,8.422,2.758,9.984,6.914c0.484,1.297,11.953,32.147,16.953,72.88 c2.953,24.109,3.016,46.687,0.172,67.124c-3.625,26.077-12,48.733-24.906,67.343c-27.516,39.733-74.889,60.857-140.871,62.889 c3.516,0.109,7.062,0.188,10.671,0.188c71.561,0,122.543-21.218,151.543-63.076c12.891-18.609,21.266-41.266,24.906-67.343 C435.396,350.475,435.349,327.898,432.38,303.789z'/%3E%3Cpath style='fill:%23AC92EB;' d='M405.443,149.332c0,5.891-4.766,10.664-10.656,10.664s-10.672-4.773-10.672-10.664 c0-5.89,4.781-10.671,10.672-10.671S405.443,143.442,405.443,149.332z'/%3E%3Cpath style='fill:%23FFCE54;' d='M224.118,10.663c0,5.891-4.781,10.672-10.671,10.672c-5.891,0-10.656-4.781-10.656-10.672 c0-5.89,4.766-10.663,10.656-10.663C219.337,0,224.118,4.773,224.118,10.663z'/%3E%3Cpath style='fill:%2348CFAD;' d='M448.115,85.334c0,5.891-4.781,10.664-10.672,10.664s-10.656-4.773-10.656-10.664 s4.766-10.672,10.656-10.672S448.115,79.443,448.115,85.334z'/%3E%3Cpath style='fill:%23FC6E51;' d='M85.2,149.332c0,5.891-4.766,10.664-10.656,10.664s-10.671-4.773-10.671-10.664 c0-5.89,4.781-10.671,10.671-10.671S85.2,143.442,85.2,149.332z'/%3E%3Cpath style='fill:%23656D78;' d='M405.443,202.659H106.793c-17.64,0-31.999,14.359-31.999,31.999c0,17.648,14.359,32,31.999,32 h298.649c17.656,0,32-14.352,32-32C437.443,217.018,423.099,202.659,405.443,202.659z'/%3E%3Cg%3E%3Cpath style='fill:%23E6E9ED;' d='M349.758,163.965c-0.016-0.023-2.328-3.086-3.438-6.961c-1.312-4.547-0.5-7.852,2.688-11.054 c8.654-8.695,11.529-19.992,8.061-31.812c-2.312-7.937-6.795-13.538-7.373-14.249c-0.016-0.008-0.016-0.008-0.016-0.016 c0,0-0.016-0.008-0.016-0.016l0,0c-1.953-2.359-4.906-3.859-8.219-3.859c-5.891,0-10.656,4.773-10.656,10.664 c0,2.578,0.906,4.937,2.422,6.78l-0.031-0.047c0.031,0.031,2.5,3.156,3.547,7.188c1.094,4.141,0.234,7.227-2.828,10.312 c-8.641,8.672-11.516,20.038-8.078,31.999c2.312,8.094,6.828,13.836,7.328,14.461l0,0c1.953,2.422,4.953,3.977,8.297,3.977 c5.891,0,10.67-4.781,10.67-10.672c0-2.531-0.891-4.859-2.357-6.688v-0.007H349.758z M333.225,113.458l0.016,0.008v0.008 L333.225,113.458z'/%3E%3Cpath style='fill:%23E6E9ED;' d='M274.603,78.67c-3.172-11.937-9.297-20.226-10-21.132v0.008c-1.953-2.555-5.016-4.211-8.485-4.211 c-5.89,0-10.671,4.773-10.671,10.664c0,2.406,0.812,4.625,2.156,6.406v0.008c0.047,0.062,4.484,6.101,6.531,14.312 c2.453,9.836,0.5,18.195-6,25.538c-11.406,12.891-15.031,28.703-10.5,45.726c3.172,11.945,9.312,20.227,10,21.133v-0.008 c1.953,2.562,5.031,4.219,8.484,4.219c5.891,0,10.672-4.781,10.672-10.672c0-2.406-0.812-4.617-2.156-6.406l0.016-0.008 c-0.047-0.055-4.5-6.102-6.547-14.312c-2.453-9.835-0.484-18.187,6.016-25.538C275.508,111.505,279.133,95.701,274.603,78.67z'/%3E%3Cpath style='fill:%23E6E9ED;' d='M186.416,114.138c-2.328-7.937-6.797-13.538-7.391-14.249c0,0-0.016-0.008-0.016-0.016 c0,0,0-0.008-0.016-0.016l0,0c-1.953-2.359-4.906-3.859-8.203-3.859c-5.891,0-10.671,4.773-10.671,10.664 c0,2.578,0.922,4.937,2.437,6.78l-0.047-0.047c0.031,0.031,2.5,3.156,3.547,7.188c1.094,4.141,0.25,7.227-2.828,10.312 c-8.64,8.672-11.515,20.038-8.078,31.999c2.328,8.094,6.828,13.836,7.328,14.461h0.016c1.953,2.422,4.938,3.977,8.297,3.977 c5.891,0,10.656-4.781,10.656-10.672c0-2.531-0.875-4.859-2.359-6.688v-0.008c-0.016-0.023-2.328-3.086-3.438-6.961 c-1.297-4.547-0.5-7.852,2.688-11.054C187.01,137.255,189.869,125.958,186.416,114.138z M162.557,113.458l0.016,0.008v0.008 L162.557,113.458z'/%3E%3C/g%3E%3Cpath style='fill:%23A0D468;' d='M117.449,42.663V31.999c0-5.891-4.766-10.664-10.656-10.664s-10.671,4.773-10.671,10.664v10.664 c-5.891,0-10.672,4.781-10.672,10.672s4.781,10.664,10.672,10.664v10.663c0,5.891,4.781,10.672,10.671,10.672 c5.891,0,10.656-4.781,10.656-10.672V63.999c5.89,0,10.671-4.773,10.671-10.664S123.339,42.663,117.449,42.663z'/%3E%3Cpath style='fill:%23ED5564;' d='M373.443,21.335V10.663c0-5.89-4.766-10.663-10.656-10.663s-10.672,4.773-10.672,10.663v10.672 c-5.889,0-10.67,4.773-10.67,10.664s4.781,10.664,10.67,10.664v10.672c0,5.891,4.781,10.664,10.672,10.664 s10.656-4.773,10.656-10.664V42.663c5.891,0,10.672-4.773,10.672-10.664S379.333,21.335,373.443,21.335z'/%3E%3Cpath style='fill:%23967ADC;' d='M181.448,202.659v86.678c0,5.875,4.781,10.655,10.672,10.655s10.671-4.78,10.671-10.655v-86.678 L181.448,202.659L181.448,202.659z'/%3E%3Cpath style='fill:%23AC92EB;' d='M224.118,202.659v21.336c0,5.891,4.781,10.663,10.672,10.663c5.89,0,10.656-4.772,10.656-10.663 v-21.336H224.118z'/%3E%3Cpath style='fill:%23967ADC;' d='M266.79,202.659v63.999c0,5.897,4.766,10.679,10.654,10.679c5.906,0,10.672-4.781,10.672-10.679 v-63.999L266.79,202.659L266.79,202.659z'/%3E%3Cpath style='fill:%23AC92EB;' d='M309.444,202.659v117.333c0,5.891,4.781,10.656,10.672,10.656s10.672-4.766,10.672-10.656V202.659 H309.444z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 90px;
    text-align: center;
    display: flex;
    justify-content: center;
    color: white;
}
.kettle-value {
    font-size: 90px;
    height: 120px;
    width: 420px;
    text-align: center;
    color: white;
    padding: 15px;
    border-radius: 20%;
    position: absolute;
    margin-top: 400px;
}.kettle-value::after {
    content: "°";
}
.kettle-content {
    height: 200px;
    width: 400px;
    margin-top: 510px;
    position: absolute;
    column-gap: 5px;
    row-gap: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.kettle-content .block {
    width: 70px;
    height: 70px;
    font-size: 40px;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;

}
.kettle-content .block.pos {
    background-color: var(--block-positive-bg);
}
.kettle-content .block.neg {
    background-color: var(--block-negative-bg);
}
.kettle-content .block.pos:hover {
    background-color: var(--block-positive-bg-hover);
}
.kettle-content .block.neg:hover {
    background-color: var(--block-negative-bg-hover);
}
.blocks {
    width: 100px;
    margin-left: 50px;
    margin-right: 50px;
    list-style: none;
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: rgba(0,0,0,0.1);
}
.blocks.negative .block {
    color: var(--block-negative-fg);
}
.blocks.positive .block {
    color: var(--block-positive-fg);
}
.blocks.negative .block:hover {
    color: var(--block-negative-fg-hover);
}
.blocks.positive .block:hover {
    color: var(--block-positive-fg-hover);
}
.block{
    cursor: pointer;
    user-select: none;
}

.save-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: rgba(0,0,0,0.1);
    border-radius: 20px;
    color: white;
    font-size: 1rem;
    cursor: pointer;
}

.save-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
}