@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;650&display=swap');

:root {
    /* My Colors */
    --red: rgb(254, 22, 22);
    --gray: rgb(50, 50, 50);
    --gray-disabled: rgba(30, 30, 30, 0.5);
    --black: rgb(0, 0, 0);
    --dark-gray: rgb(40, 40, 40);
    --light-gray: rgb(100, 100, 100);
    /* Typography */
    --font: 'Open Sans', sans-serif;
    --font-color: rgb(200, 200, 200);
    --font-color-disabled: rgb(100, 100, 100, 0.5);
    --font-size-base: 1.25em;
    --font-size-lg: 2.5em;
    --font-size-med: 1.5em;
    --font-size-sm: 1.15em;
    --font-weight-med: 10;
    --letter-spacing-base: 0.25px;

    /* Spacing */
    --spacing-xs: 2px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 24px;

    /* Border Radius */
    --radius: 10px;
    --radius-lg: 24px;

    /* Sizes */
    --button-height: 10%;
    --logo-size: 10%;

    /* Shadows */
    --shadow-light: rgba(0, 0, 0, 0.2) 0 3px 5px -1px, rgba(0, 0, 0, 0.14) 0 6px 10px 0, rgba(0, 0, 0, 0.12) 0 1px 18px 0;
    --shadow-medium: rgba(60, 64, 67, 0.3) 0 1px 3px 0, rgba(60, 64, 67, 0.15) 0 4px 8px 3px;
    --shadow-hover: rgba(60, 64, 67, 0.3) 0 2px 3px 0, rgba(60, 64, 67, 0.15) 0 6px 10px 4px;
    --shadow-active: rgba(60, 64, 67, 0.3) 0 4px 4px 0, rgba(60, 64, 67, 0.15) 0 8px 12px 6px;

    /* Border */
    --border-width: 2px;

    /* Motion */
    --transition-time: 0.18s;
}

html {
    background: var(--dark-gray);
    background: linear-gradient(var(--dark-gray) 0%, var(--black) 100%);
    min-height: 100%;
}

.centered {
    display: flex;
    justify-content: center;
    align-items: center;
}

p {
    font-family: var(--font);
    color: var(--font-color);
    font-size: var(--font-size-med);
    letter-spacing: var(--letter-spacing-base);
}
hr {
    border: 5px solid var(--gray);
    border-top: var(--border-width) solid var(--gray);
    margin: var(--spacing-lg) 0;
    border-radius: var(--radius);
}

.hr-small {
    border: 1px solid var(--gray);
    border-top: var(--border-width) solid var(--gray);
    margin: var(--spacing-lg) 0;
    border-radius: var(--radius);
}
div {
    padding: var(--spacing-md);
}

h1 {
    font-family: var(--font);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-lg);
    color: var(--font-color);
}
h2 {
    font-family: var(--font);
    color: var(--font-color);
    font-size: var(--font-size-med);
    letter-spacing: var(--letter-spacing-base);
}
h3 {
    font-family: var(--font);
    color: var(--font-color);
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-base);
}

.double-wide {
    column-count: 2;
}

li {
    font-family: var(--font);
    color: var(--font-color);
    font-size: var(--font-size-base);
    letter-spacing: var(--letter-spacing-base);
}


a{
    color: var(--font-color);

    text-decoration: underline;
}