:root {
    --terminal-background: #101010;
    --terminal-primary: #EAEAEA;
    --terminal-accent-strong: #CF0924;
    --terminal-accent: #73A1CD;
    --terminal-accent-alt: #32BB31;
    --terminal-dull: #26A7AD;

    --font-size-header: 28px;
    --font-size-lesser-header: 22px;
    --font-size-body: 18px;

}


body {
    background-color: var(--terminal-background);
    font-size: var(--font-size-body);
    font-family: "JetBrains mono", monospace;
    padding-left: 5%;
    padding-right: 5%;
    align-items: center;
}

.header {
    min-height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    font-size: var(--font-size-header);
    align-items: center;
    padding-bottom: 10px;

}

.header-item {
    color: var(--terminal-accent);
    text-decoration: none;
}

.header-item:hover {
    color: var(--terminal-accent-alt);
    text-decoration: none;
}

.header-item-selected {
    color: var(--terminal-accent-alt);
}

span {
    color: var(--terminal-primary);
}

.apps-item {
    color: var(--terminal-dull);
    font-size: var(--font-size-lesser-header);
}

.apps-item:hover {
    color: var(--terminal-accent);
    font-size: var(--font-size-lesser-header);
}

.apps-description {
    color: var(--terminal-primary);
    font-size: var(--font-size-body);
}

.content {
    width: 90%;
    margin: auto;
}

@media (max-width: 1024px) {
    :root {
        --font-size-header: 28px;
        --font-size-lesser-header: 22px;
        --font-size-body: 18px;
    }
}

@media (max-width: 712px) {
    :root {
        --font-size-header: 24px;
        --font-size-lesser-header: 18px;
        --font-size-body: 14px;
    }
    .content{
        width: 95%;
    }
}

@media (max-width: 512px) {
    :root {
        --font-size-header: 22px;
        --font-size-lesser-header: 16px;
        --font-size-body: 12px;
    }

    .header {
        flex-direction: column;
        padding-bottom: 5%;
        align-items: end;
        gap: 10px;
    }
    .content{
        width: 100%;
    }
}