historydev

const rotate = document.querySelector("#rotate");
const container = document.querySelector(".container");

container.style.transform = `rotate(${45}deg)`;

rotate.addEventListener('input', (e) => {
  const degree = +e.target.value;
  const scaleStep = degree*0.001;
  const scale = degree === 0 && 1 || degree === 360 && 1 || scaleStep > 1 && 1 || scaleStep < 0.75 && 0.75 || scaleStep;
  container.style.transform = `scale(${scale}, ${scale}) rotate(${degree}deg)`;
});

На всю видимую область:
div { width: 100vw; height: 100vh; }

На всю страницу:
div { width: 100%; height: auto; }

Наполни контентом, она растянется.

Закругления работают. Ваша проблема в смещении spacing на -30:

<template>
    <div class="doughnut">
        <canvas ref="chart"></canvas>
    </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {
    Chart,
    DoughnutController,
    ArcElement,
} from 'https://cdn.skypack.dev/chart.js@4.2.1';
  
Chart.register(
    DoughnutController,
    ArcElement,
);

const chart = ref(null);

const data = {
    datasets: [
        {
            data: [40, 22, 8, 30],
            backgroundColor: [
                "#F04B92",
                "#54B2FD",
                "#FFC24B",
                "#49EBCE",
            ],
            display: true,
            offset: 2,
            spacing: -30,
            borderColor: "#fff",
            borderWidth: 2,
            borderRadius: [
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 2, innerStart: 16},
                {outerStart: 16,  outerEnd: 16, innerStart: 16, innerEnd: 16}
            ],
            cutout: "58%",
        }
    ],
    labels: false
};

const config = {
    type: 'doughnut',
    data,
    options: {
        rotation: 270,
        circumference: 180,
        maintainAspectRatio: false,
        responsive: true,
        animation: {
            animateRotate: true
        }
    },
}

onMounted(() => {
  
    const myChart = new Chart(
        chart.value,
        config
    );
  
    const ctx = myChart.canvas.getContext("2d");

    ctx.scale(0.8, 0.8);
});
  
  

</script>

Боль-мень плавный скроллинг:

targetElement.addEventListener("wheel", (event) => {
    //@ts-ignore
    if (event.deltaY !== 0) {
        //@ts-ignore
        targetElement.scrollLeft += (targetElement.scrollWidth/100) * Math.sign(event.deltaY);
        event.preventDefault();
    }
});

media запросы

.block p {}

Полагаю это поможет: https://www.w3schools.com/css/css_rwd_viewport.asp

Используй transition на opacity

Вот так работает:

* {
box-sizing: border-box;
}

Например так:

.tabs__content-item {
  width: 0;
  height: 0;
  overflow: hidden;
  font-size: 16px;
  line-height: 150%;
  max-height: 150px;
}

.tabs__content-item_active {
  height: 150px;
  width: 100%;
}

.flex {
  width: 600px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

AOS.init();

const watch = document.querySelector("#watch");
let milliseconds = 0;
let timer;

function ImgForJs() {
  window.open("https://website-about.neocities.org/main-page.html", "_blank")
  }
function h1ForJs() {
  window.open("https://website-about.neocities.org/main-page.html", "_blank")
  } 

function millisToHuman(milliseconds) {
  return new Date(milliseconds).toISOString().slice(11, 23);
}

const startWatch = () => {
 watch.classList.remove("paused");
  clearInterval(timer);
  timer = setInterval(() => {
    milliseconds += 10;
    const timeStr = millisToHuman(milliseconds);
    result.innerHTML = timeStr;
    watch.innerHTML = timeStr;
  }, 10);
};

const pauseWatch = () => {
  watch.classList.add("paused");
  clearInterval(timer);
};

const resetWatch = () => {
  watch.classList.remove("paused");
  clearInterval(timer);
  // milliseconds = 0;
  watch.innerHTML = "00:00:00:00";
  result.innerHTML = "00:00:00:00";
};

document.addEventListener("click", (e) => {
  const element = e.target;
  if (element.id === "start") startWatch();
  if (element.id === "pause") pauseWatch();
  if (element.id === "reset") resetWatch();
});

const laps = [];

function newLapTime() {
  
  if(laps.length < 6) {
    laps.push(`
      <br/>
      <div> 
        ${millisToHuman(milliseconds)} 
      </div>`
    ); document.querySelector('.lapContainer').innerHTML = laps.join('');
  }
  // milliseconds = 0;

}

Здравствуйте. Вам необходимо позиционирование.

#myDiv {
   position: absolute;
   z-index: 999;
}

Это что шутка? Не смешная)
margin: 0 2px;

clip-path