@media (min-width: 4000px) { 
    * {
        font-size: 1.5rem;
    }

    body > .core > header > .navbar > .navbar-item a {
        font-size: 2rem;
    }

    body > .core > header > .mobile-navbar {
        display: none;
    }

    h1 {
        display: flex;
        align-items: center;
        font-size: 4.5rem;
    }

    h2 {
        display: flex;
        align-items: center;
        font-size: 4rem;
    }

    h3 {
        display: flex;
        align-items: center;
        font-size: 3.5rem;
    }

    h4 {
        display: flex;
        align-items: center;
        font-size: 3rem;
    }

    h5 {
        display: flex;
        align-items: center;
        font-size: 2.5rem;
    }

    h6 {
        display: flex;
        align-items: center;
        font-size: 2rem;
    }

    #mobile-directory {
        display: none;
    }

    div #obsidian-tux {
        max-width: 10rem;
    }

    div .tux-platform {
        width: 10rem;
    }
}

@media (min-width: 3500px) and (max-width: 3999px) { 
    * {
        font-size: 1.4rem;
    }

    body > .core > header > .navbar > .navbar-item a {
        font-size: 1.75rem;
    }

    body > .core > header > .mobile-navbar {
        display: none;
    }

    .core-button img {
        max-width: 4.5rem;
        max-height: 4.5rem;
    }

    .core-selector {
        gap: 1.9rem;
    }

    div #obsidian-tux {
        max-width: 14rem;
    }

    div .tux-platform {
        width: 14rem;
    }

    h1 {
        font-size: 4.4rem;
    }

    h2 {
        font-size: 3.9rem;
    }

    h3 {
        font-size: 3.4rem;
    }

    h4 {
        font-size: 2.9rem;
    }

    h5 {
        font-size: 2.3rem;
    }

    h6 {
        font-size: 1.9rem;
    }

    #mobile-directory {
        display: none;
    }

    div #obsidian-tux {
        max-width: 10rem;
    }

    div .tux-platform {
        width: 10rem;
    }
}

@media (min-width: 3000px) and (max-width: 3499px) { 
    * {
        font-size: 1.28rem;
    }

    body > .core > header > .navbar > .navbar-item a {
        font-size: 1.63rem;
    }

    body > .core > header > .mobile-navbar {
        display: none;
    }

    .core-button img {
        max-width: 4.3rem;
        max-height: 4.3rem;
    }

    .core-selector {
        gap: 1.8rem;
    }

    div #obsidian-tux {
        max-width: 11rem;
    }

    div .tux-platform {
        width: 11rem;
    }

    h1 {
        font-size: 4.3rem;
    }

    h2 {
        font-size: 3.8rem;
    }

    h3 {
        font-size: 3.3rem;
    }

    h4 {
        font-size: 2.8rem;
    }

    h5 {
        font-size: 2.2rem;
    }

    h6 {
        font-size: 1.8rem;
    }

    #mobile-directory {
        display: none;
    }
}

@media (min-width: 2500px) and (max-width: 2999px) { 
    * {
        font-size: 1.15rem;
    }

    body > .core > header > .navbar > .navbar-item a {
        font-size: 1.5rem;
    }

    body > .core > header > .mobile-navbar {
        display: none;
    }

    .core-button img {
        max-width: 4rem;
        max-height: 4rem;
    }

    .core-selector {
        gap: 1.7rem;
    }

    div #obsidian-tux {
        max-width: 10rem;
    }

    div .tux-platform {
        width: 10rem;
    }

    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 3.5rem;
    }

    h3 {
        font-size: 3rem;
    }

    h4 {
        font-size: 2.7rem;
    }

    h5 {
        font-size: 1.9rem;
    }

    h6 {
        font-size: 1.7rem;
    }

    #mobile-directory {
        display: none;
    }
}

@media (min-width: 2000px) and (max-width: 2499px) { 
    * {
        font-size: 1.03rem;
    }

    body > .core > header > .navbar > .navbar-item a {
        font-size: 1.3rem;
    }

    body > .core > header > .mobile-navbar {
        display: none;
    }

    .core-button img {
        max-width: 4rem;
        max-height: 4rem;
    }

    .core-selector {
        gap: 1.6rem;
    }

    div #obsidian-tux {
        max-width: 8rem;
    }

    div .tux-platform {
        width: 8rem;
    }

    h1 {
        font-size: 3.8rem;
    }

    h2 {
        font-size: 3.3rem;
    }

    h3 {
        font-size: 2.8rem;
    }

    h4 {
        font-size: 2.5rem;
    }

    h5 {
        font-size: 1.7rem;
    }

    h6 {
        font-size: 1.5rem;
    }

    #mobile-directory {
        display: none;
    }

    div #obsidian-tux {
        max-width: 10rem;
    }

    div .tux-platform {
        width: 10rem;
    }
}

@media (min-width: 1500px) and (max-width: 1999px) { 
    * {
        font-size: 1rem;
    }

    body > .core > header > .navbar > .navbar-item a {
        font-size: 1.3rem;
    }

    body > .core > header > .mobile-navbar {
        display: none;
    }

    .core-button img {
        max-width: 4rem;
        max-height: 4rem;
    }

    .core-selector {
        gap: 1.5rem;
    }

    div #obsidian-tux {
        max-width: 8rem;
    }

    div .tux-platform {
        width: 8rem;
    }

    h1 {
        font-size: 3.7rem;
    }

    h2 {
        font-size: 3.2rem;
    }

    h3 {
        font-size: 2.7rem;
    }

    h4 {
        font-size: 2.4rem;
    }

    h5 {
        font-size: 1.6rem;
    }

    h6 {
        font-size: 1.4rem;
    }

    body > .core > main > .main-center-container {
        margin-right: 2.25rem;
    }

    #mobile-directory {
        display: none;
    }

    div #obsidian-tux {
        max-width: 8rem;
    }

    div .tux-platform {
        width: 8rem;
    }
}

/* Old Monitor + Mobile + 1080p half-screen layouts */

@media (min-width: 1000px) and (max-width: 1499px) and (orientation: landscape) { 
    * {
        font-size: 0.9rem;
    }

    body > .core > header > .navbar {
        display: flex;
    }


    body > .core > header > .mobile-navbar {
        display: none;
    }

    body > .core > main {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        margin-top: 5rem;
    }

    body > .core > main > .main-center-container {
        margin-right: 2.3rem;
    }

    .content-container {
        width: fit-content;
    }

    .core-button img {
        max-width: 4rem;
        max-height: 4rem;
    }

    .core-selector {
        gap: 1.4rem;
    }

    div #obsidian-tux {
        max-width: 6rem;
    }

    div .tux-platform {
        width: 6rem;
    }

    h1 {
        font-size: 3.6rem;
    }

    h2 {
        font-size: 2.8rem;
    }

    h3 {
        font-size: 2.6rem;
    }

    h4 {
        font-size: 2.3rem;
    }

    h5 {
        font-size: 1.5rem;
    }

    h6 {
        font-size: 1.3rem;
    }

    #mobile-directory {
        display: none;
    }

    div #obsidian-tux {
        max-width: 7rem;
    }

    div .tux-platform {
        width: 7rem;
    }
}

@media (min-width: 768px) and (max-width: 999px) and (orientation: landscape) { 
    * {
        font-size: 0.8rem;
    }

    body > .core > header > .navbar {
        display: flex;
    }


    body > .core > header > .mobile-navbar {
        display: none;
    }

    body > .core > main {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        margin-top: 4rem;
    }

    body > .core > main > .main-center-container {
        margin-right: 2.25rem;
    }

    .content-container {
        width: fit-content;
        padding: 0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .core-button img {
        max-width: 3rem;
        max-height: 3rem;
    }

    .core-selector {
        gap: 1.3rem;
    }

    div #obsidian-tux {
        max-width: 6rem;
    }

    div .tux-platform {
        width: 6rem;
    }

    h1 {
        font-size: 3.4rem;
    }

    h2 {
        font-size: 2.6rem;
    }

    h3 {
        font-size: 2.4rem;
    }

    h4 {
        font-size: 2.1rem;
    }

    h5 {
        font-size: 1.2rem;
    }

    h6 {
        font-size: 1rem;
    }

    #mobile-directory {
        display: none;
    }

    div #obsidian-tux {
        max-width: 6rem;
    }

    div .tux-platform {
        width: 6rem;
    }
}


@media only screen and (max-width: 1499px) and (orientation: portrait) { 
    * {
        font-size: 1.1rem;
        gap: 1rem;
    }

    body > .core > header > .navbar {
        display: none;
    }


    body > .core > header > .mobile-navbar {
        display: flex;
    }

    body > .core > main {
        flex-direction: column;
        flex: unset;
        align-items: flex-start;
        justify-content: center;
        margin-top: 5rem;
    }

    .category-header {
        width: 100%;
    }

    .content-container {
        width: fit-content;
    }

    #core-approved {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .core-button img {
        max-width: 4rem;
        max-height: 4rem;
    }

    #desktop-directory {
        display: none;
    }

    div #obsidian-tux {
        max-width: 6rem;
    }

    div .tux-platform {
        width: 6rem;
    }

    h1 {
        font-size: 3.8rem;
    }

    h2 {
        font-size: 3rem;
    }

    h3 {
        font-size: 2.8rem;
    }

    h4 {
        font-size: 2.5rem;
    }

    h5 {
        font-size: 1.7rem;
    }

    h6 {
        font-size: 1.5rem;
    }

    ol, ul {
        font-size: 1.1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .main-center-container {
        width: 100%;
    }

    .main-left-container {
        width: 100%;
        min-height: fit-content;
    }

    .main-left-container > .content-container {
        max-width: fit-content;
    }

    .main-right-container {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
    }

    .main-right-container > .section-container-column {
        align-items: flex-start;
        justify-content: flex-start;
        height: max-content;
        width: fit-content;
    }

    #mobile-directory > .section-container-row {
        align-items: flex-start;
        min-width: max-content;
    }

    .mobile-navbar > .mobile-menu > a {
        font-size: 1.3rem;
    }

    .mobile-navbar > .mobile-menu > .category > .category-header {
        font-size: 1.3rem;
    }

    .mobile-navbar > .mobile-menu > .category > .category-content > .category-content-item > a {
        font-size: 1.3rem;
    }

    #tux-container {
        display: none;
    }
}

@media only screen and (max-width: 999px) and (orientation: portrait) { 
    * {
        font-size: 1rem;
        gap: 0.75rem;
    }

    body > .core > header > .navbar {
        display: none;
    }


    body > .core > header > .mobile-navbar {
        display: flex;
    }

    body > .core > main {
        flex-direction: column;
        flex: unset;
        align-items: flex-start;
        justify-content: center;
        margin-top: 5rem;
    }

    .category-header {
        width: 100%;
    }

    .content-container {
        width: fit-content;
    }

    .core-button img {
        max-width: 4rem;
        max-height: 4rem;
    }

    #desktop-directory {
        display: none;
    }

    div #obsidian-tux {
        max-width: 6rem;
    }

    div .tux-platform {
        width: 6rem;
    }

    h1 {
        font-size: 3.6rem;
    }

    h2 {
        font-size: 2.8rem;
    }

    h3 {
        font-size: 2.6rem;
    }

    h4 {
        font-size: 2.3rem;
    }

    h5 {
        font-size: 1.5rem;
    }

    h6 {
        font-size: 1.3rem;
    }

    ol, ul {
        font-size: 1.1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .main-center-container {
        width: 100%;
    }

    .main-left-container {
        width: 100%;
        min-height: fit-content;
    }

    .main-left-container > .content-container {
        max-width: fit-content;
    }

    .main-right-container {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
    }

    .main-right-container > .section-container-column {
        align-items: flex-start;
        justify-content: flex-start;
        height: max-content;
        width: fit-content;
    }

    #mobile-directory > .section-container-row {
        align-items: flex-start;
        min-width: max-content;
    }

    .mobile-navbar > .mobile-menu > a {
        font-size: 1.2rem;
    }

    .mobile-navbar > .mobile-menu > .category > .category-header {
        font-size: 1.2rem;
    }

    .mobile-navbar > .mobile-menu > .category > .category-content > .category-content-item > a {
        font-size: 1.2rem;
    }

    #tux-container {
        display: none;
    }
}