/* <=300 pixel width */
@media (max-width: 300px) {
    @font-face {
        font-family: Orbitron;
        src: url("../fonts/Orbitron/Orbitron-VariableFont_wght.ttf");
    }

    /* Overrides for base classes */
    body {
        background-color: rgba(40, 38, 38, 0.973);
        min-height: 100vh;
        overflow: scroll;
        display: block;
    }

    h1 {
        background-color: rgb(69, 68, 68);
        color: rgb(225, 96, 15);
        font-family: Orbitron;
        font-size: 2rem;
        text-align: center;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        position: relative;
        top: 0;
    }

    h2 {
        font-size: 10px;
    }

    h3 {
        background-color: rgb(69, 68, 68);
        color: orangered;
        font-family: Orbitron;
        text-align: center;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    /* Custom Classes */
    .blogArticlesList {
        list-style: none;
        list-style-position: center;
        background-color: rgb(69, 68, 68);
        display: inline-block;
        position: relative;
        border-radius: 10%;
        border-width: 0.5rem;
        border-style: solid;
        border-color: orange;
        margin: 1rem;
        padding: 2rem;
        align-items: center;
        align-self: center;
        align-content: center;
        text-align: center;
        text-shadow: 1rem;
    }

    .blogArticlesListEntry {
        display: block;
        background-color: orange;
        border-radius: 0.4rem;
        border-width: 0.5rem;
        border-color: orange;
        border-style: solid;
        align-self: center;
        align-content: center;
        /* width: 40rem; */
        padding: 0.5rem;
        margin: 0.5rem;
    }

    .blogEntry {
        display: block;
        position: relative;
        align-self: center;
        align-items: center;
        align-content: center;
        color: yellowgreen;
        background-color: rgb(36, 41, 48);
        margin-left: auto;
        margin-right: auto;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 1rem;

        border-radius: 0.4rem;
        border-style: none;
        border-left-style: ridge;
        border-right-style: ridge;
        border-width: 0.3rem;
        border-color: rgb(6, 68, 113);

        /* width: 6rem; */
        height: fit-content;
    }

    .blogEntry > h1 {
        display: block;
        position: relative;

        align-self: center;
        align-items: center;
        align-content: center;

        font-size: 0.6rem;
        font-weight: bold;

        padding-left: 0.7rem;
        padding-right: 0.7rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;

        width: fit-content;

        margin-top: 0.1rem;
        margin-bottom: 0.1rem;
        color: orangered;

        border-radius: 0.4rem;
        border-color: orangered;
        border-left-style: ridge;
        border-right-style: ridge;
    }

    .blogEntry > h2 {
        font-size: 6px;
        border-radius: 1rem;

        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;

        margin-top: 0.2rem;
        margin-bottom: 0.2rem;

        color: orange;
    }

    .blogEntry > p > code {
        display: inline;
        font-weight: normal;
    }

    .blogEntry > p {
        display: block;
        position: relative;
        align-self: center;
        align-content: center;
        font-size: 0.8rem;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-weight: normal;
        color: yellowgreen;
        background-color: rgb(69, 68, 68);

        border-radius: 0.3rem;
        border-style: none;
        border-top-style: ridge;
        border-bottom-style: ridge;
        border-color: orangered;

        width: 4.5rem;
        height: fit-content;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0rem;
        margin-bottom: 0rem;
    }

    .blogEntry ul {
        display: block;
        position: relative;
        align-self: center;
        align-items: center;
        align-content: center;
        background-color: rgb(69, 68, 68);
        border-radius: 2rem;
        border-style: outset;
        border-width: 0rem;
        border-color: orange;
        width: 60%;
        height: fit-content;
        padding-top: 1rem;
        padding-bottom: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
    }

    .blogEntry li {
        display: list-item;
        position: relative;
        align-self: center;
        align-items: center;
        align-content: center;
        font-size: 16px;
        font-family: "Courier New", Courier, monospace;
        background-color: rgb(69, 68, 68);
        width: fit-content;
        height: fit-content;
        padding-left: inherit;
        padding-right: inherit;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
        color: orange;

        list-style-type: disc;
        list-style-position: inside;
    }

    .blogNavbarCategory {
        display: inline-block;
        font-size: 1rem;
        color: orange;
        font-family: Orbitron;
        text-align: center;
        background-color: rgb(6, 68, 113);
        border-color: orange;
        border-width: 0.2rem;
        border-radius: 1rem;
        border-bottom-style: inset;
        align-items: center;
        align-content: center;
        align-self: center;
        /* margin: 1rem;
        padding: 0rem;
        width: 15rem; */
        height: 2rem;
    }

    .blogNavbarCategory:hover .blogArticlesList {
        display: block;
    }

    .contentItemCenter {
        display: block;
        align-items: center;
        align-self: center;
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }

    .fittingComponent {
        background-color: rgb(69, 68, 68);
        color: orangered;
        font-family: Orbitron;
        text-align: center;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }

    .homeEntry {
        display: block;
        position: relative;
        align-self: center;
        align-items: center;
        background-color: rgb(97, 124, 139);
        align-content: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 1rem;
        border-radius: 0.4rem;
        border-style: none;
        border-width: 0.1rem;
        border-color: rgb(6, 68, 113);
        /* width: 7rem; */
        height: fit-content;
        font-family: monospace;
    }

    .navbarItem {
        width: 4em;
        height: 1rem;
        font-size: 0.7rem;
        color: orange;
        font-family: Orbitron;
        text-align: center;
        background-color: rgb(6, 68, 113);
        border-color: orange;
        border-width: 0.3rem;
        border-radius: 0.1rem;
        border-bottom-style: inset;
        align-items: center;
        align-content: center;
        align-self: center;
        margin: 0.2rem;
        padding: 0.1rem;
    }

    .navbarItem:hover {
        background-color: greenyellow;
        border-color: rgb(97, 145, 15);
    }

    .navbarItem:hover .navBarItemLinkText {
        color: black;
    }

        display: inline;
        width: 100px;
        font-size: 20px;
        color: orangered;
        font-family: Orbitron;
        text-align: center;
        background-color: rgb(69, 68, 68);
        border-color: orangered;
        border-radius: 10px;
        border-style: dotted;
    }

    .navBarItemLinkText {
        color: orange;
        font-style: normal;
        text-decoration: none;
    }

    .navBarItemLinkText:link {
        color: orange;
        font-style: normal;
        text-decoration: none;
    }

    .navBarItemLinkText:visited:hover {
        color: black;
        font-style: normal;
        text-decoration: none;
    }

    /* IDs */
    #applicationsContent {
        display: block;
        position: relative;
        align-self: center;
        align-items: center;
        background-color: rgb(144, 141, 141);
        align-content: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
        padding: 1rem;
        border-radius: 10rem;
        border-color: tomato;
        border-style: inset;
        border-width: 0.1rem;
        width: 80%;
    }

    #blogContent {
        display: block;
        position: relative;
        align-self: center;
        align-items: center;
        align-content: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
        padding: 1rem;
        border-radius: 1rem;
        border-color: white;
        border-style: hidden;
        border-width: 0rem;
        background-color: rgb(36, 41, 48);
        text-align: center;
    }

    #blogNavbar {
        display: block;
        list-style-type: none;
        position: relative;
        margin: 0rem;
        /* margin-left: 5rem;
        margin-right: 5rem; */
        padding: 1rem;
        padding-left: 1rem;
        padding-right: 1rem;
        background-color: rgb(69, 68, 68);
        border-radius: 4rem;
        align-items: center;
        align-self: center;
        align-content: center;
        text-align: center;
    }

    #downloadsContent {
        width: 140px;
    }

    #homeContent {
        display: block;
        position: relative;
        align-self: center;
        align-items: center;
        align-content: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
        padding: 1rem;
        border-radius: 1rem;
        border-color: white;
        border-style: hidden;
        border-width: 0rem;
        //background-color: rgb(36, 41, 48);
    }

    #mainContent {
        display: block;
        position: relative;
        align-self: center;
        align-items: center;
        background-color: rgb(69, 68, 68);
        align-content: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
        padding: 1rem;
        border-radius: 1rem;
        border-color: orangered;
        border-style: none;
        border-width: 2rem;
        width: 60vw;
        /* height: 60vh; */
    }

    #navbar {
        display: flex;
        flex-direction: row;
        align-self: center;
        align-content: center;
        align-items: center;
        list-style-type: none;
        width: fit-content;
        height: fit-content;
        margin-left: auto;
        margin-right: auto;
        padding: 5px;
    }
}