Mamboleoo

// Get the canvas element from the DOM
const canvas = document.getElementById('scene');

// Get the canvas dimensions
let width = canvas.offsetWidth; // Width of the scene
let height = canvas.offsetHeight; // Height of the scene

// Store the 2D context
const ctx = canvas.getContext('2d');

Mamboleoo

body {
  margin: 0;
  overflow: hidden;
}
canvas {
  width:100vw;
  height:100vh;
}

Mamboleoo

<canvas id="scene"></canvas>

Mamboleoo

.block {
    margin-bottom: 10rem;
}
@media (min-width: 700px) {
    .block {
        margin-bottom: 12.5rem;
    }
}
@media (min-width: 1400px) {
    .block {

Mamboleoo

.block {
    margin-bottom: 12.5rem; // Fallback for older browsers
    margin-bottom: var(--spacing-l); // Responsive spacings
}

Mamboleoo

.block {
    @include spacing(l, margin-bottom); 
}

Mamboleoo

@mixin spacing($type: 'xl', $property: 'margin-top') {
    #{$property}: map-get($margins, $type);
    #{$property}: var(--margin-#{$type});
}

Mamboleoo

$spacings: (s: 2rem, m: 6rem, l: 12.5rem, xl: 20rem);

Mamboleoo

.block {
    margin-top: var(--spacing-l);
}

Mamboleoo

:root {
    --spacing-s: 1.5rem;
    --spacing-m: 5rem;
    --spacing-l: 10rem;
    --spacing-xl: 10rem;
    @media (min-width: 700px) {
    	--spacing-s: 2rem;
    	--spacing-m: 6rem;
    	--spacing-l: 12.5rem;
    	--spacing-xl: 20rem;