@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");

:root {
    /* Definitive Color */
    --color-red: #ec5858;
    --color-base: #f5f7fa;
    --color-white: #fff;
    --color-green: #00af91;
    --color-table: #eff1f5;
    --color-header: #191d21;
    --color-grey-900: #1f2933;
    --color-grey-800: #1f2933;
    --color-grey-700: #323f4b;
    --color-grey-600: #3e4c59;
    --color-grey-500: #52606d;
    --color-grey-400: #616e7c;
    --color-grey-300: #7b8794;
    --color-grey-200: #9aa5b1;
    --color-grey-100: #cbd2d9;

    /* Devices */
    --device-sm: 640px;
    --device-md: 768px;
    --device-lg: 1024px;
    --device-xl: 1280px;
    --device-2xl: 1440px;

    /* Component Color */
    --color-link: #7069fa;
    --color-link-hover: #8c86ff;
    --color-border-button: #9aa5b1;
    --color-border: #e8e9eb;
    --color-font: #3e4c59;
    --color-font-light: #616e7c;
    --color-font-lighter: #9aa5b1;
    --color-outline: #a0c2ff;

    /* Sizes */
    --size-10: 10px;
    --size-12: 12px;
    --size-14: 14px;
    --size-16: 16px;
    --size-18: 18px;
    --size-20: 20px;
    --size-22: 22px;
    --size-24: 24px;
    --size-28: 28px;
    --size-32: 32px;
    --size-48: 48px;
    --size-64: 64px;

    /* Border Radius */
    --rounded: 4px;
    --rounded-sm: 2px;
    --rounded-md: 5px;
    --rounded-lg: 8px;
    --rounded-circular: 50%;

    /* Grid Sizes */
    --wh-1-2: 50%;
    --wh-1-3: 33.333333%;
    --wh-2-3: 66.666667%;
    --wh-1-4: 25%;
    --wh-2-4: 50%;
    --wh-3-4: 75%;
    --wh-1-5: 20%;
    --wh-2-5: 40%;
    --wh-3-5: 60%;
    --wh-4-5: 80%;
    --wh-1-6: 16.666667%;
    --wh-2-6: 33.333333%;
    --wh-3-6: 50%;
    --wh-4-6: 66.666667%;
    --wh-5-6: 83.333333%;
    --wh-1-12: 8.333333%;
    --wh-2-12: 16.666667%;
    --wh-3-12: 25%;
    --wh-4-12: 33.333333%;
    --wh-5-12: 41.666667%;
    --wh-6-12: 50%;
    --wh-7-12: 58.333333%;
    --wh-8-12: 66.666667%;
    --wh-9-12: 75%;
    --wh-10-12: 83.333333%;
    --wh-11-12: 91.666667%;

    /* Box Shadows */
    --shadow-sm: 0 -1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03),
        0 4px 4px rgba(0, 0, 0, 0.03);
    --shadow-lg: 0 -1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.05),
        0 3px 4px rgba(0, 0, 0, 0.05), 0 5px 8px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 -1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.05),
        0 3px 4px rgba(0, 0, 0, 0.05), 0 5px 8px rgba(0, 0, 0, 0.05),
        0 16px 16px rgba(0, 0, 0, 0.05);

    /* Other Variables */
    --padding-x-sm: 15px;
    --padding-x-lg: 100px;
    --padding-x-xl: 18%;
    --padding-overlap: 50px;
    --padding-std-compact: 15px;
    --padding-std-padded: 20px;
    --font-default: "Roboto", sans-serif;
}

*,
::before,
::after {
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    color: var(--color-font);
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-size: var(--size-14);
    font-family: var(--font-default);
    background-color: var(--color-base);
}

a {
    color: var(--color-link);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.1s ease-in-out;
}
a:hover {
    color: var(--color-link-hover);
}
a.red {
    color: var(--color-red);
}

.global {
    width: 100%;
    min-height: 100vh;
}

.logo {
    width: 161px;
    height: 38px;
    display: block;
    background-image: url(../assets/logo.svg);
}

.logo.square {
    width: 34px;
    height: 32px;
    background-image: url(../assets/logo-square.svg);
}

.body > .content {
    padding: var(--padding-x-sm);
    padding-bottom: 50px;
}

@media (min-width: 640px) {
    .body {
        z-index: 10;
        position: relative;
    }
    .body.overlap {
        margin-top: -50px;
    }
    .body.overlap > div:first-child {
        padding-top: 0;
    }
    .body > .content {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

@media (min-width: 1280px) {
    .body > .content {
        padding-left: var(--padding-x-lg);
        padding-right: var(--padding-x-lg);
    }
}

@media (min-width: 1440px) {
    html,
    body {
        font-size: var(--size-16);
    }
    .body > .content {
        padding-left: var(--padding-x-xl);
        padding-right: var(--padding-x-xl);
        padding-bottom: 80px;
    }
}