/* FONTS */
/* @font-face {
    font-family: Nova-Alt1;
    // (recomment if Nova-Alt1 uncommented) src: url('fonts/3270.ttf') format('truetype');
    font-display: swap;
} */

@font-face {
    font-family: Nova-Alt1;
    /* src: url('fonts/TerminusModern.ttf') format('truetype'); */
    src: url('fonts/FiraCode-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: Nova;
    /* src: url('fonts/TerminusModern.ttf') format('truetype'); */
    src: url('fonts/FiraCode-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: Nova;
    /* src: url('fonts/TerminusModern.ttf') format('truetype'); */
    src: url('fonts/FiraCode-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: FiraCode;
    src: url('fonts/FiraCode-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
}


/* COLORS */
.color-base {
    color: #FF0000;
}

.color-alt {
    color: var(--background);
}

.color-highlight {
    color: #819595;
}

.color-bg-light {
    color: #1A1616;
}

.color-bg-med {
    color: #222222;
}

.color-bg-dark {
    color: #000000;
}

/* .color-footer-body {
    color: #FFFFFF;
} */

body.dark-theme {
    --fontSize: 1.0rem;
    background: var(--header);
    background-color: var(--header);
    /* --background: var(--header); */
    --background-secondary:var(--color-secondary);
    /* --header: var(--header); */
    --color: var(--background);
    --color: var(--background);
    /* --color-secondary: var(--background-secondary); */
    --color-secondary: yellow;
    --border-color: var(--color-secondary);

    /* --code-color: var(--theme-code-background-color);
    --code-background-color: var(--theme-code-color); */
}

/* :root is "body.light-theme" */
:root {
    --fontSize: 1.0rem;
    --background: #F4FAF8;
    /* --background-secondary: #819595; */
    --background-secondary: #819595;
    --header: #1a1616;
    --color: #010101;
    --color-secondary: #333333;
    --border-color: var(--background);
    --phoneWidth: (max-width:684px);
    --tabletWidth: (max-width:900px);
    --theme-code-color: #f8f8f2;
    --theme-code-background-color: #494A44;
    --code-color: var(--theme-code-color);
    --code-background-color: var(--theme-code-background-color);
}

.main {
    background-color: var(--background-color);
    font-size: var(--fontSize);
    font-family: Nova, Nova-Alt1;
    width: 100%;
    max-width: 800px;
}

.main-logo {
    padding-top: 20px;
}

.container {
    flex-direction: column;
    font-size: var(--fontSize);
    text-align: center;
    background-color: red;
    /* color: var(--color);
    background-color: var(--color-secondary); */
}



/* MAIN */
.container,
.content {
    font-size: var(--fontSize);
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
}

.content {
    /* font-family: Nova, Nova-Alt1; */
    /* font-family: Georgia, 'Times New Roman', Times, serif; */
    font-family: Roboto;
    /* font-family: FiraCode; */
    font-size: var(--fontSize);
    /* background-color: var(--background); */
    flex-direction: column;
    flex: 1 auto;
    align-items: center;
    margin: 50px 0
}

@media (max-width:683px) {
    .content {
        margin-top: 0;
        max-width: 600px;
    }
    .flex-row {
        flex-direction: column;
    }
}

.content-large {
    font-family: Nova;
    font-size: 2.0rem;
}

.content-paragraph {
    font-family: Nova;
    font-size: 1.0rem;
}

.content-medium {
    font-family: Nova;
    font-size: 1.7rem;
}

/* SIDE */
.side {
    background: #1a1616;
    font-family: Nova, Nova-Alt1;
    font-size: 1.0rem;
    flex: 0 0 300px;
}
.side > table {
    width: 100%;
}

@media (max-width:683px) {
    .main {
        margin-top: 0
    }
    .flex-row {
        flex-direction: column;
    }
}

.side-large {
    background-color: #222222;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 1.2em;
    color: #96c3f1;
    border-bottom: 1px var(--background) solid;
}

.side-paragraph {
    text-align: left;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: Nova;
    font-size: 1.0rem;
    border-bottom: 1px #4a4b50 dotted;
}

.side-medium {
    font-family: Nova;
    font-size: 1.5rem;
}

.side-border-left {
    /* border-left: var(--color) 1px solid */
}

.side-border-right {
    /* border-right: var(--color) 1px solid */
}


/* ATTRIBUTES */
.glow {
    /* text-shadow: var(--color) 0px 0px 8px; */
    text-shadow: var(--color-secondary) 0px 0px 8px;
}

a:link {
    text-decoration: none;
    text-shadow: var(--color-secondary) 0px 0px 8px;

}

post.a {
    text-decoration: underline;
}

.inline-svg {
    display: inline-block;
    height: 1.15rem;
    width: 1.15rem;
    top: 0.15rem;
    position: relative;
}

.menu-icon {
    padding: 5px;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    display: flex;
}

.menu {
    font-size: 1.1rem;
    font-family: Nova;
    margin-right: 18px;
    padding-right: 24px;
}

.menu-alt {
    font-size:1.1rem;
    font-family: Nova;
    margin-right: 18px;
    padding-right: 24px;
    display: block
}

.menu a:hover {
    text-decoration: underline;
}

.menu a {
    text-decoration: none
}


/* TOGGLE */
.toggle-contrast {
 /* ID for Javascript */
}

.toggle-sidebar {
    /* ID for Javascript */
}

.toggle-mobile-menu {
    /* ID for Javascript */
    display: none;
}


/* TOGGLE USES THIS CLASS */
.hidden {
    display: none
}

.content-desktop {
    display: block;
}

.content-mobile {
    display: none;
}

/* DISPLAY MOBILE */

@media screen and (max-width:768px) {

    .content-desktop {
        display: none;
    }
    
    .content-mobile {
        display: block;
    }

    .menu {
        position: absolute;
        display: none;
    }
    .menu-alt {
        position: absolute;
        background: var(--background);
        margin: 0;
        list-style: none;
        border-radius: 5px;
        border: none;
        top: 50px;
        right: 10px;
        padding-left: 10px;
    }
    .toggle-mobile-menu {
        display: block;
    }
    .menu-desktop {
        display: none;
    }
    .side {
        border: #96c3f1 1px solid;
    }
    .hidden {
        display: none
    }
}