@import url('https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css');
:root {
    --base-bg-color: rgb(5, 8, 15);
    --bg-color-modifier: rgb(31, 49, 96);
    --background-color: color-mix(in srgb, var(--base-bg-color), var(--bg-color-modifier) 10%); /*rgb(14, 22, 42)*/
    --background-gradient: conic-gradient(
        from 180deg at 50% 50%, color-mix(in srgb, #2a8af6, var(--background-color) 20%) 0deg,
        color-mix(in srgb, #a853ba, var(--background-color) 20%) 180deg, 
        color-mix(in srgb, #e92a67, var(--background-color) 20%) 1turn);
    --accent-gradient: linear-gradient(90deg,
        color-mix(in srgb, #2a8af6, var(--background-color) 20%),
        color-mix(in srgb, #e92a67, var(--background-color) 20%)
    );
    --color: rgb(216, 223, 244);
    --color-secondary: rgba(161, 165, 179, 255);
    --color-accent: rgb(49, 78, 153);

    --background-secondary: rgb(14, 22, 42);
    --background-containers: color-mix(in srgb, var(--color-accent), rgba(0, 0, 0, 0) 50%);

}

* {
    margin: 0px;
    color: var(--color);
    font-family: DMSans-Regular;
}

body {
    background-color: var(--background-color);
    overflow: auto !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Rubik-Regular;
    font-weight: 200;
}

p {
    color: var(--color-secondary);
}

@font-face {
    font-family: 'Rubik-Regular';
    src: url('../fonts/Rubik-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'DMSans-Regular';
    src: url('../fonts/DMSans-Regular.ttf') format('truetype');
}