@font-face {
    font-family: "custom-sans";
    src: url('assets/fonts/ms-sans-serif-1.otf') format('opentype');
}
:root {
    --font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --color-text: #111111;
    --color-bg: #cdcdcd;
    --color-primary: #7722aa;
    --max-width: 1000px;
    --transition: 0.2s ease-in-out;
}

/* because resetting still important */
*, *::before, *::after {
    box-sizing: border-box;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
    margin: 0;
}

ul[role="list"], ol[role="list"] {
    list-style: none;
}

body {
    min-height: 100vh;
    font-family: var(--font-main);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

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;
}

.container {
    width: min(100% - 2rem, var(--max-width));
    margin-inline: auto;
}