@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  src: url(fonts/Inter-VariableFont_opsz_wght.ttf) format('ttf');
}


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

:root {
    /* Fixed base size */
    --base-size: 4px;
    /* Fluid base size */
    --base-size: calc(0.15625vw + 1px); /* equal to 4px at 1920px screen wide */

    /* Fonts */
    --base-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --inter-font: "Inter", sans-serif, system-ui;

    /* Colors */
    --white-color: #fff;
    --white-color-80: #ffffffCC;
    --white-color-menu: #fff;
    --black-color: #000;
    --black-color-80: #000000cc;
    --line-color: #eaeaea;
    --light-gray-color: #c4c4c4;
    --box-shadow-func: 0 16px 35px 7px rgba(0, 0, 0, 0.2);

    /* Linear Sizes: Example --size-10 equal 10px size at 1920px screen wide */
    --size-1: calc(var(--base-size) / 4);
    --size-2: calc(var(--base-size) / 2);
    --size-3: calc(var(--base-size) / 1.3333);
    --size-4: var(--base-size);
    --size-5: calc(var(--base-size) * 1.25);
    --size-6: calc(var(--base-size) * 1.5);
    --size-7: calc(var(--base-size) * 1.75);
    --size-8: calc(var(--base-size) * 2);
    --size-9: calc(var(--base-size) * 2.25);
    --size-10: calc(var(--base-size) * 2.5);
    --size-11: calc(var(--base-size) * 2.75);
    --size-12: calc(var(--base-size) * 3);
    --size-13: calc(var(--base-size) * 3.25);
    --size-14: calc(var(--base-size) * 3.5);
    --size-15: calc(var(--base-size) * 3.75);
    --size-16: calc(var(--base-size) * 4);
    --size-17: calc(var(--base-size) * 4.25);
    --size-18: calc(var(--base-size) * 4.5);
    --size-19: calc(var(--base-size) * 4.75);
    --size-20: calc(var(--base-size) * 5);
    --size-22: calc(var(--base-size) * 5.5);
    --size-25: calc(var(--base-size) * 6.25);
    --size-30: calc(var(--base-size) * 7.5);
    --size-35: calc(var(--base-size) * 8.75);
    --size-40: calc(var(--base-size) * 10);
    --size-41: calc(var(--base-size) * 10.25);
    --size-45: calc(var(--base-size) * 11.25);
    --size-50: calc(var(--base-size) * 12.5);
    --size-55: calc(var(--base-size) * 13.75);
    --size-60: calc(var(--base-size) * 15);
    --size-65: calc(var(--base-size) * 16.25);
    --size-70: calc(var(--base-size) * 17.5);
    --size-75: calc(var(--base-size) * 18.75);
    --size-80: calc(var(--base-size) * 20);
    --size-85: calc(var(--base-size) * 21.25);
    --size-86: calc(var(--base-size) * 21.5);
    --size-90: calc(var(--base-size) * 22.5);
    --size-95: calc(var(--base-size) * 23.75);
    --size-100: calc(var(--base-size) * 25);
    --size-110: calc(var(--base-size) * 27.5);
    --size-125: calc(var(--base-size) * 31.25);
    --size-150: calc(var(--base-size) * 37.5);
    --size-200: calc(var(--base-size) * 50);
    --size-220: calc(var(--base-size) * 55);
    --size-250: calc(var(--base-size) * 62.5);
    --size-300: calc(var(--base-size) * 75);

    /* Upscaled Sizes: Example --x-10 equal 40px size at 1920px screen wide */
    --x-1: var(--base-size);
    --x-2: calc(var(--base-size) * 2); /* Equal 8px size at 1920px screen wide */
    --x-3: calc(var(--base-size) * 3); /* Equal 12px size at 1920px screen wide */
    --x-4: calc(var(--base-size) * 4); /* Equal 16px size at 1920px screen wide */
    --x-5: calc(var(--base-size) * 5); /* Equal 20px size at 1920px screen wide */
    --x-6: calc(var(--base-size) * 6); /* Equal 24px size at 1920px screen wide */
    --x-7: calc(var(--base-size) * 7); /* Equal 28px size at 1920px screen wide */
    --x-8: calc(var(--base-size) * 8); /* Equal 32px size at 1920px screen wide */
    --x-9: calc(var(--base-size) * 9); /* Equal 36px size at 1920px screen wide */
    --x-10: calc(var(--base-size) * 10); /* Equal 40px size at 1920px screen wide */
    --x-20: calc(var(--base-size) * 20); /* Equal 80px size at 1920px screen wide */
    --x-30: calc(var(--base-size) * 30); /* Equal 120px size at 1920px screen wide */
    --x-40: calc(var(--base-size) * 40); /* Equal 160px size at 1920px screen wide */
    --x-50: calc(var(--base-size) * 50); /* Equal 200px size at 1920px screen wide */
}

html {
    font-size: var(--size-18);
    line-height: 1.2;
    scroll-behavior: smooth;
}

body {
	display: flex;
	flex-direction: column;
	gap: var(--size-15);
	align-items: center;
	justify-content: center;
	height: 100vh;
	height: 100dvh;
	padding: var(--size-35);
    font-family: var(--inter-font);
    background-color: var(--white-color);
    color: var(--black-color);
}

img {
    max-width: 100%;
    height: auto;
}

h1 {
	font-size: var(--size-100);
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.127vw;
	transition: all 0.7s ease;
	cursor: pointer;
}

h1:hover {
	letter-spacing: 1vw;
}