@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;500;700&display=swap");

:root {
    /* Colors */
    --main-bg-color: linear-gradient(360deg, #e5501e 0%, #ef900a 100%);
    --primary-color: #e47025;
    --secondary-color: #ffffff;
    --footer-bg-color: #333333;

    /* Font families */
    --primary-font: "Rubik", sans-serif;

    /* Font weights */
    --light: 300;
    --medium: 500;
    --bold: 700;

    /* Responsive font sizes using calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
    --twenty: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
    --twentyFour: calc(18px + (24 - 18) * ((100vw - 320px) / (1920 - 320)));
    --twentyFive: calc(20px + (25 - 20) * ((100vw - 320px) / (1920 - 320)));
    --thirtyTwo: calc(25px + (32 - 25) * ((100vw - 320px) / (1920 - 320)));
    --seventyTwo: calc(32px + (72 - 32) * ((100vw - 320px) / (1920 - 320)));
}

* {
    box-sizing: border-box;
    font-family: var(--primary-font);
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--main-bg-color);
    background-attachment: fixed;
}

/* Text variants */
.light24 {
    font-size: var(--twentyFour);
    font-weight: var(--light);
    letter-spacing: calc(var(--twentyFour) * 20 / 1000);
    line-height: calc(var(--twentyFour) * 1.42857);
}

.medium25 {
    font-size: var(--twentyFive);
    font-weight: var(--medium);
    letter-spacing: calc(var(--twentyFive) * 20 / 1000);
    line-height: calc(var(--twentyFive) * 1.42857);
}

.bold20 {
    font-size: var(--twenty);
    font-weight: var(--bold);
    letter-spacing: calc(var(--twenty) * 20 / 1000);
    line-height: calc(var(--twenty) * 1.42857);
}

.bold32 {
    font-size: var(--thirtyTwo);
    font-weight: var(--bold);
    letter-spacing: calc(var(--thirtyTwo) * 20 / 1000);
    line-height: calc(var(--thirtyTwo) * 1.42857);
}

.bold72 {
    font-size: var(--seventyTwo);
    font-weight: var(--bold);
    letter-spacing: calc(var(--seventyTwo) * 20 / 1000);
    line-height: calc(var(--seventyTwo) * 1.42857);
}

/* Text variants end */
.container {
    max-width: calc(1366px - 1.5rem);
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 1.5rem;
}