* {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

:root {
    /** Base colors */
    --clr-dark-a0: #000000;
    --clr-light-a0: #ffffff;

    /** Theme primary colors */
    --clr-primary-a0: #ba0c2f;
    --clr-primary-a10: #c63a43;
    --clr-primary-a20: #d05758;
    --clr-primary-a30: #da706d;
    --clr-primary-a40: #e38984;
    --clr-primary-a50: #eba09b;

    /** Theme surface colors */
    --clr-surface-a0: #121212;
    --clr-surface-a10: #282828;
    --clr-surface-a20: #3f3f3f;
    --clr-surface-a30: #575757;
    --clr-surface-a40: #717171;
    --clr-surface-a50: #8b8b8b;

    /** Theme tonal surface colors */
    --clr-surface-tonal-a0: #231615;
    --clr-surface-tonal-a10: #382b2a;
    --clr-surface-tonal-a20: #4e4241;
    --clr-surface-tonal-a30: #655a59;
    --clr-surface-tonal-a40: #7d7372;
    --clr-surface-tonal-a50: #968e8d;

    /** Success colors */
    --clr-success-a0: #22946e;
    --clr-success-a10: #47d5a6;
    --clr-success-a20: #9ae8ce;

    /** Warning colors */
    --clr-warning-a0: #a87a2a;
    --clr-warning-a10: #d7ac61;
    --clr-warning-a20: #ecd7b2;

    /** Danger colors */
    --clr-danger-a0: #9c2121;
    --clr-danger-a10: #d94a4a;
    --clr-danger-a20: #eb9e9e;

    /** Info colors */
    --clr-info-a0: #21498a;
    --clr-info-a10: #4077d1;
    --clr-info-a20: #92b2e5;
}

body {
    background-color: var(--clr-surface-tonal-a20);
    background-color: var(--clr-surface-tonal-a0);
    color: var(--clr-light-a0);
    /* font-family: 'Poppings', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background-color: #fff;

    background-color: var(--very-dark-blue);
    color: var(--slightly-transparent-white-main-paragraph);
    min-height: 100vh;
    font-size: 15px; */
    font-family: 'Poppings', sans-serif;
    font-size: 16px;
    position: relative;
    justify-content: center;
    display: grid;
}

.introduction {
    justify-content: center;
}

.introduction h1 {
    top: 0;
}

.introduction p {
    width: 1000px;
}

a {
    color: var(--clr-primary-a20);
}

.youtube {
    display: grid;
    justify-content: center;
}
.github {
    display: grid;
    justify-content: center;
}

.github table {
    display: grid;
    justify-content: center;
}

.github table th {
    background-color: var(--clr-surface-tonal-a10);
    padding: 20px;
    justify-content: center;
    border-style: solid;
    border-radius: 10px;
    border-color: var(--clr-surface-tonal-a20);
    font-weight: 100;
    max-width: 500px;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    margin-left: 200px;
}

@media screen and (max-height: 450px) {
    .navbar {padding-top: 15px;}
    .navbar a {font-size: 18px;}
}

.ai-project {
    text-decoration: none;
    bottom: 0px;
    left: 0px;
    position: fixed;
    z-index: 100;
    padding: 16px;
    opacity: 80%;
    background-color: var(--clr-surface-tonal-a20);
    color: var(--clr-light-a0);
    font-weight: 1000;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    transition: .5s;
}

.ai-project:hover {
    opacity: 100%;
}