/* #region CSS Reset */

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

* {
    margin: 0;
}

body {
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
input,
button,
select,
label {
    line-height: 1.2;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/* #endregion CSS Reset */

/* #region Colors */

:root {
    --color-000: #ffffff;
    --color-999: #000000;

    --color-grey-050: #f8f8f8;
    --color-grey-100: #ebebeb;
    --color-grey-200: #d9d9d9;
    --color-grey-300: #bebebe;
    --color-grey-400: #939393;
    --color-grey-500: #808080;
    --color-grey-600: #6d6d6d;
    --color-grey-700: #5d5d5d;
    --color-grey-800: #515151;
    --color-grey-900: #484848;
    --color-grey-950: #2d2d2d;

    --color-primary-050: #f0effe;
    --color-primary-100: #e5e3fc;
    --color-primary-200: #c8c4fa;
    --color-primary-300: #aea8f7;
    --color-primary-400: #958cf5;
    --color-primary-500: #796bf1;
    --color-primary-600: #614ced;
    --color-primary-700: #4926e5;
    --color-primary-800: #341aab;
    --color-primary-900: #230f7a;
    --color-primary-950: #1a0a62;

    --color-accent-050: #eff0f7;
    --color-accent-100: #dee2f0;
    --color-accent-200: #c1c9e2;
    --color-accent-300: #a1add4;
    --color-accent-400: #8192c5;
    --color-accent-500: #6479b2;
    --color-accent-600: #4e608e;
    --color-accent-700: #3b486c;
    --color-accent-800: #28324d;
    --color-accent-900: #151b2c;
    --color-accent-950: #0c111d;
}

:root,
.color-grey {
    --color-050: var(--color-grey-050);
    --color-100: var(--color-grey-100);
    --color-200: var(--color-grey-200);
    --color-300: var(--color-grey-300);
    --color-400: var(--color-grey-400);
    --color-500: var(--color-grey-500);
    --color-600: var(--color-grey-600);
    --color-700: var(--color-grey-700);
    --color-800: var(--color-grey-800);
    --color-900: var(--color-grey-900);
    --color-950: var(--color-grey-950);
}

.color-primary {
    --color-050: var(--color-primary-050);
    --color-100: var(--color-primary-100);
    --color-200: var(--color-primary-200);
    --color-300: var(--color-primary-300);
    --color-400: var(--color-primary-400);
    --color-500: var(--color-primary-500);
    --color-600: var(--color-primary-600);
    --color-700: var(--color-primary-700);
    --color-800: var(--color-primary-800);
    --color-900: var(--color-primary-900);
    --color-950: var(--color-primary-950);
}

.color-accent {
    --color-050: var(--color-accent-050);
    --color-100: var(--color-accent-100);
    --color-200: var(--color-accent-200);
    --color-300: var(--color-accent-300);
    --color-400: var(--color-accent-400);
    --color-500: var(--color-accent-500);
    --color-600: var(--color-accent-600);
    --color-700: var(--color-accent-700);
    --color-800: var(--color-accent-800);
    --color-900: var(--color-accent-900);
    --color-950: var(--color-accent-950);
}

/* #endregion Colors */

/* #region Fonts */

/* Nunito */

body,
.font-nunito-regular {
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/* Changa One */

h1,
h2,
h3,
h4,
h5,
h6,
.font-changa-one-regular {
    font-family: "Changa One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font-changa-one-regular-italic {
    font-family: "Changa One", sans-serif;
    font-weight: 400;
    font-style: italic;
}

/* #endregion Fonts */

/* #region Global */

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--color-050);
    color: var(--color-800);
}

h1,
h2,
h3 {
    margin: 1.2rem 0 0.8rem;
}

h4,
h5,
h6 {
    margin: 0.8rem 0 0.6rem;
}

p {
    margin: 0.6rem 0;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child,
p:first-child {
    margin-top: 0;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child {
    margin-bottom: 0;
}

/* #endregion Global */

/* #region Wrapper classes */

.wrap-content {
    --gap: clamp(0.5rem, 20vw - 5rem, 2rem);
    --full: minmax(var(--gap), 1fr);
    --wide: minmax(0, 7rem);
    --feature: minmax(0, 5rem);
    --popout: minmax(0, 3rem);
    --content: 2rem;
    --inset: min(71rem, 100% - var(--gap) * 2 - var(--content) * 2);

    display: grid;
    /* beautify ignore:start */
    grid-template-columns:
        [full-start] var(--full)
        [wide-start] var(--wide)
        [feature-start] var(--feature)
        [popout-start] var(--popout)
        [content-start] var(--content)
        [inset-start] var(--inset) [inset-end]
        var(--content) [content-end]
        var(--popout) [popout-end]
        var(--feature) [feature-end]
        var(--wide) [wide-end]
        var(--full) [full-end];
    /* beautify ignore:end */
}

.wrap-content>* {
    grid-column: content;
}

.wrap-content .wrap-inset {
    grid-column: inset;
}

.wrap-content .wrap-popout {
    grid-column: popout;
}

.wrap-content .wrap-feature {
    grid-column: feature;
}

.wrap-content .wrap-wide {
    grid-column: wide;
}

.wrap-content .wrap-content,
.wrap-content .wrap-off {
    grid-column: full;
}

/* #endregion Wrapper classes */

/* #region Button */

.btn-underline,
.btn-outline,
.btn-plain,
.btn-action,
.btn-flat {
    margin: 0;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 0.5rem 1.5rem;
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.25s, color 0.25s, box-shadow 0.1s;
}

.btn-underline,
.btn-outline,
.btn-plain {
    --btn-bg: var(--color-000);
    --btn-fg: var(--color-500);
}

.btn-underline {
    border-bottom-color: currentColor;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.btn-outline {
    border-color: currentColor;
}

.btn-action,
.btn-flat {
    --btn-bg: var(--color-500);
    --btn-fg: var(--color-000);
}

.btn-action {
    --btn-bg1: var(--color-600);

    background-image: linear-gradient(var(--btn-bg) 0%, var(--btn-bg1) 100%);
    box-shadow: inset 0 2px hsla(0, 0%, 100%, 0.2), inset 0 -1px #00000040,
        0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.btn-underline:focus-visible,
.btn-underline:hover,
.btn-outline:focus-visible,
.btn-outline:hover,
.btn-plain:focus-visible,
.btn-plain:hover,
.btn-flat:focus-visible,
.btn-flat:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.btn-underline:hover,
.btn-outline:hover,
.btn-plain:hover {
    --btn-bg: var(--color-050);
    --btn-fg: var(--color-600);
}

.btn-action:hover,
.btn-flat:hover {
    --btn-bg: var(--color-600);
}

.btn-action:hover {
    --btn-bg1: var(--color-700);
}

.btn-action:focus-visible,
.btn-action:hover {
    box-shadow: inset 0 2px hsla(0, 0%, 100%, 0.2), inset 0 -1px #00000040,
        0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.btn-underline:active,
.btn-outline:active,
.btn-plain:active,
.btn-flat:active {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 2px rgba(0, 0, 0, 0.12);
}

.btn-underline:active,
.btn-outline:active,
.btn-plain:active {
    --btn-bg: var(--color-200);
    --btn-fg: var(--color-700);
}

.btn-action:active,
.btn-flat:active {
    --btn-bg: var(--color-700);
}

.btn-action:active {
    --btn-bg1: var(--color-800);

    box-shadow: inset 0 2px hsla(0, 0%, 100%, 0.2), inset 0 -1px #00000040,
        0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 2px rgba(0, 0, 0, 0.12);
}

.btn-underline:disabled,
.btn-outline:disabled,
.btn-plain:disabled,
.btn-action:disabled,
.btn-flat:disabled {
    box-shadow: none;
}

.btn-underline:disabled,
.btn-outline:disabled,
.btn-plain:disabled {
    --btn-bg: var(--color-000);
    --btn-fg: var(--color-200);
}

.btn-action:disabled,
.btn-flat:disabled {
    --btn-bg: var(--color-100);
    --btn-fg: var(--color-400);
}

.btn-action:disabled {
    background-image: none;
}

/* #endregion Button */