:root {
    --purple: #4B2242;
    --light-blue: #3E8EDE;
    --green: #80FF80;
    --black: #231F20;
    --gray: #333E48;
    --white: #F8FAFC;
    --font-heading: 'magion-web', sans-serif;
    --font-body: 'Montserrat', sans-serif;
}

html {
    scroll-behavior: smooth;
    font-size: 13px;
}

@media (min-width: 900px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: var(--font-body);
}

h1, h2, h3 {
    font-family: var(--font-heading);
}

.content {
    padding-top: 1.1rem;
}

.text-purple {
    color: var(--purple) !important;
}

.text-white {
    color: var(--white) !important;
}

.text-black {
    color: var(--black) !important;
}

.p-side {
    padding-inline: 3rem;
}

@media (max-width: 576px) {
    .p-side {
        padding-inline: 2rem;
    }
}