:root {
    --font-color: #000000;
    --font-color-white: #ffffff;

    --color-purple-0: #9d4edd;
    --color-purple-1: #7b2cbf;
    --color-purple-2: #5a189a;
    --color-purple-3: #3c096c;
    --color-purple-4: #240046;

    --color-yellow-0: #ff9e00;
    --color-yellow-1: #ff9100;
    --color-yellow-2: #ff8500;
    --color-yellow-3: #ff7900;
    --color-yellow-4: #ff6d00;

    --color-white-0: #f8f9fa;
    --color-white-1: #e9ecef;
    --color-white-2: #dee2e6;
}

body::-webkit-scrollbar {
    width: 0px;
}

@font-face {
    font-family: 'Montserrat';
    src: url(../fonts/Montserrat-VariableFont_wght.ttf);
}

body {
    margin: 0;
    font-size: 'Montserrat';
    color: var(--font-color);
}

.font-size-48 {
    font-size: 48px;
}
.font-size-32 {
    font-size: 32px;
}
.font-size-24 {
    font-size: 24px;
}
.font-size-16 {
    font-size: 16px;
}

.paddiing-32 {
    padding: 32px;
}
.paddiing-16 {
    padding: 16px;
}

@media screen and (max-width: 1536px) {
    .font-size-48 {
        font-size: calc(48px * 0.8);
    }
    .font-size-32 {
        font-size: calc(32px * 0.8);
    }
    .font-size-24 {
        font-size: calc(24px * 0.8);
    }
    .font-size-16 {
        font-size: calc(16px * 0.8);
    }

    .paddiing-32 {
        padding: calc(32px * 0.8);
    }
    .paddiing-16 {
        padding: calc(16px * 0.8);
    }
}
@media screen and (max-width: 414px) {
    .font-size-48 {
        font-size: calc(32px);
    }
    .font-size-32 {
        font-size: calc(32px);
    }
    .font-size-24 {
        font-size: calc(24px);
    }
    .font-size-16 {
        font-size: calc(16px);
    }

    .paddiing-32 {
        padding: calc(32px);
    }
    .paddiing-16 {
        padding: calc(16px);
    }
}