/* ===== SIMPLIESTUI ===== */

/* ===== TABLE OF CONTENT =====

- Container
- Position
- Buttons
- Code
- Horizontal Rule
- Text
- Grids

*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    /* GLOBAL COLORS */
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* NORMAL COLORS */
    --color-primary: #33a5ff;
    --color-secondary: #a8a8a8;
    --color-tertiary: #d0d0d0;
    --color-positive: #3dbe38;
    --color-negative: #e23f3f;

    /* SELECTED COLORS */
    --color-primary-selected: #2d92df;
    --color-secondary-selected: #919191;
    --color-tertiary-selected: #c0c0c0;
    --color-positive-selected: #35a731;
    --color-negative-selected: #cc3333;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Outfit", sans-serif;
}

/* --+ CONTAINER +-- */
.container {
    max-width: 960px;
    margin: 0 auto;
}

@media screen and (max-width: 976px) {
    .container {
        margin: 0 8px;
    }
}

.full-width {
    width: 100%;
}

/* --+ POSITION +-- */
.pos-left, .position-left { margin-right: auto; text-align: left; }
.pos-center, .position-center { margin: 0 auto; text-align: center; }
.pos-right, .position-right { margin-left: auto; text-align: right; }

/* --+ BUTTONS +-- */
.btn {
    padding: 4px 12px;
    border-radius: 4px;
    border-style: inset;
    border: none;
    color: var(--color-white);
    text-align: center;

    background-color: var(--color-primary); /* Stylise the "default" button with primary button style */

    cursor: pointer;
}

.btn.left { border-radius: 4px 0 0 4px; border-right: .5px solid #00000022; }
.btn.center { border-radius: 0; border-inline: .5px solid #00000022; }
.btn.right { border-radius: 0 4px 4px 0; border-left: .5px solid #00000022; }

.btn:hover { background-color: var(--color-primary-selected); text-decoration: none; }

.btn.primary { background-color: var(--color-primary); }
.btn.secondary { background-color: var(--color-secondary); }
.btn.tertiary { background-color: var(--color-tertiary); }
.btn.positive { background-color: var(--color-positive); }
.btn.negative { background-color: var(--color-negative); }

.btn.primary:hover { background-color: var(--color-primary-selected); }
.btn.secondary:hover { background-color: var(--color-secondary-selected); }
.btn.tertiary:hover { background-color: var(--color-tertiary-selected); }
.btn.positive:hover { background-color: var(--color-positive-selected); }
.btn.negative:hover { background-color: var(--color-negative-selected); }

/* --+ CODE +-- */
code {
    border: 1px solid #c2c2c2;
    background-color: #f7f7f7;
    border-radius: 4px;
    padding: 0 2px;
    font-family: "Space Mono", monospace;
}

pre {
    border: 1px solid #c2c2c2;
    background-color: #f7f7f7;
    border-radius: 4px;
    padding: 16px;
    overflow-x: auto;
}

pre > code {
    border: none;
}

/* --+ TEXT +-- */
a, button, p, h6, h5, h4, h3, h2, h1 {
    color: var(--color-black);
    text-align: justify;

    font-size: 16px;
    font-weight: 400;

    text-decoration: none;
    padding: 4px 0px;
}

p, h6, h5, h4, h3, h2, h1 {
    width: 100%;
}

a:hover {
    text-decoration: underline;
}

.text-font-outfit { font-family: "Outfit", sans-serif; }
.text-font-mono { font-family: "Space Mono", monospace; }
.text-font-italic { font-style: italic; }

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

.text-decoration-underline, .text-deco-underline { text-decoration: underline; }
.text-decoration-wavy, .text-deco-wavy { text-decoration: underline wavy; }
.text-decoration-dashed, .text-deco-dashed { text-decoration: underline dashed; }
.text-decoration-crossed, .text-deco-crossed { text-decoration: line-through; }
.text-decoration-reset, .text-deco-reset { text-decoration: none; }

.text-size-12, .text-size-caption { font-size: 12px; }
.text-size-14, .text-size-small { font-size: 14px; }
.text-size-16, .text-size-body { font-size: 16px; }
.text-size-20, .text-size-regular { font-size: 20px; }
.text-size-24, .text-size-medium { font-size: 24px; }
.text-size-28, .text-size-display-small { font-size: 28px; }
.text-size-32, .text-size-display-medium { font-size: 32px; }
.text-size-48, .text-size-display-large { font-size: 48px; }
.text-size-64, .text-size-hero-small { font-size: 64px; }
.text-size-96, .text-size-hero-medium { font-size: 96px; }
.text-size-128, .text-size-hero-large { font-size: 128px; }

.text-weight-100, .text-weight-thin { font-weight: 100; }
.text-weight-200, .text-weight-extralight { font-weight: 200; }
.text-weight-300, .text-weight-light { font-weight: 300; }
.text-weight-400, .text-weight-regular { font-weight: 400; }
.text-weight-500, .text-weight-medium { font-weight: 500; }
.text-weight-600, .text-weight-semibold { font-weight: 600; }
.text-weight-700, .text-weight-bold { font-weight: 700; }
.text-weight-800, .text-weight-extrabold { font-weight: 800; }
.text-weight-900, .text-weight-black { font-weight: 900; }

/* --+ HORIZONTAL RULE +-- */
hr {
    height: 2px;
    border: none;
    width: calc(100% - 32px);
    margin: 16px auto;
    background-color: var(--color-secondary);
}

/* --+ GRIDS +-- */
.grid-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    width: 100%;
}

.grid-spacing-2  { gap: 2px; }
.grid-spacing-4  { gap: 4px; }
.grid-spacing-8  { gap: 8px; }
.grid-spacing-12 { gap: 12px; }
.grid-spacing-16 { gap: 16px; }
.grid-spacing-24 { gap: 24px; }
.grid-spacing-32 { gap: 32px; }

.grid-col-1  { grid-column: span 1; }
.grid-col-2  { grid-column: span 2; }
.grid-col-3  { grid-column: span 3; }
.grid-col-4  { grid-column: span 4; }
.grid-col-5  { grid-column: span 5; }
.grid-col-6  { grid-column: span 6; }
.grid-col-7  { grid-column: span 7; }
.grid-col-8  { grid-column: span 8; }
.grid-col-9  { grid-column: span 9; }
.grid-col-10 { grid-column: span 10; }
.grid-col-11 { grid-column: span 11; }
.grid-col-12 { grid-column: span 12; }

@media screen and (max-width: 768px) {
    .grid-row {
        display: block;
        width: 100%;
    }
    [class*="grid-col-"] {
        width: 100%;
    }

    .grid-spacing-2  { margin: -1px -2px; }
    .grid-spacing-4  { margin: -2px -4px; }
    .grid-spacing-8  { margin: -4px -8px; }
    .grid-spacing-12 { margin: -6px -12px; }
    .grid-spacing-16 { margin: -8px -16px; }
    .grid-spacing-24 { margin: -12px -24px; }
    .grid-spacing-32 { margin: -16px -32px; }

    .grid-spacing-2  [class*="grid-col-"]  { margin: 1px 2px; }
    .grid-spacing-4  [class*="grid-col-"]  { margin: 2px 4px; }
    .grid-spacing-8  [class*="grid-col-"]  { margin: 4px 8px; }
    .grid-spacing-12 [class*="grid-col-"]  { margin: 6px 12px; }
    .grid-spacing-16 [class*="grid-col-"]  { margin: 8px 16px; }
    .grid-spacing-24 [class*="grid-col-"]  { margin: 12px 24px; }
    .grid-spacing-32 [class*="grid-col-"]  { margin: 16px 32px; }
}