@layer {
    @font-face {
        font-family: BebasNeue-Regular;
        src: url('BebasNeue-Regular.ttf');
    }

    @font-face {
        font-family: Inter;
        src: url('Inter-VariableFont_opsz,wght.ttf');
    }

    /*--body fonts--*/
    @font-face {
        font-family: poppinsBold;
        src: url('Poppins-Bold.ttf');
    }

    @font-face {
        font-family: poppinsLite;
        src: url('Poppins-Light.ttf');
    }

    @font-face {
        font-family: poppinsMed;
        src: url('Poppins-Medium.ttf');
    }

    @font-face {
        font-family: poppins;
        src: url('Poppins-Regular.ttf');
    }

    @font-face {
        font-family: poppinsSemiBold;
        src: url('Poppins-SemiBold.ttf');
    }

    @font-face {
        font-family: Montserrat;
        src: url('Montserrat-VariableFont_wght.ttf');
    }

    /*--heading fonts--*/
    @font-face {
        font-family: Jost;
        src: url('Jost-VariableFont_wght.ttf');
    }

    @font-face {
        font-family: Lexend;
        src: url('Lexend-VariableFont_wght.ttf');
    }

    @font-face {
        font-family: Saira;
        src: url('Saira-VariableFont_wdth,wght.ttf');
    }

    @font-face {
        font-family: SigmarOne;
        src: url('SigmarOne-Regular.ttf');
    }

    @font-face {
        font-family: TitanOne;
        src: url('TitanOne-Regular.ttf');
    }

    :root {
        --base-color: #9aa098;
        --accent-color: #b0b9b4;
        --passion-color: rgb(106 35 35);
        --passion-color-adj: rgb(122 41 41);
        --passion-accent-color: rgb(10 97 95);
        --color-visited: rgb(17 17 17 / 50%);
        --ui-color: rgb(122 138 117);
        --ui-visited-color: rgb(97 116 91);
        --ui-hover-color: hsl(106 18% 50%);
        --link-hover: #222222;

    }

    body {
        background-color: var(--base-color);
    }

    /*font-family: BebasNeue-Regular, sans-serif; src: url('BebasNeue-Regular.ttf');}*/
    body {
        padding: 0px;
        margin: 0px;
    }

    a {
        color: var(--passion-color);
    }

    /*header {background: linear-gradient(#443344, #333333);}*/
    header {
        background: linear-gradient(to right, var(--accent-color) 1%, var(--accent-color) 15%, var(--base-color) 100%);
        display: grid;
        grid-template-columns: auto 1fr;
        min-height: 8rem;
    }

    article {
        padding-left: 2rem;
        padding-right: 2rem;
        max-width: 100ch;
    }

    video {
        width: 100%;
    }

    footer {
        display: flex;
        justify-content: center;
    }

    .top-logo span {
        font-family: SigmarOne;
        line-height: 1;
        font-size: 1.75rem;
    }

    .top-logo {
        padding-inline-start: 2rem;
        padding-block-start: .666rem;
    }


    .word-mark span {
        display: block;
    }

    /*.word-mark { padding-inline-start: 1rem; }*/
    /*.top-logo a {text-decoration: none; color: #111111;}*/
    .top-logo a {
        text-decoration: none;

        color: var(--passion-color-adj);
        display: block;
        padding-block-start: .5rem;
    }

    .linkBars {
        display: grid;
    }

    .link-bar {
        font-family: Lexend;
        font-weight: bold;
        margin-inline: 2rem;
        padding-top: 1rem;
        text-align: center;
    }


    .link-bar a {
        font-size: 1rem;
    }

    .link-bar a {
        text-decoration: none;
    }

    .link-bar a {
        font-weight: bold;
        padding-left: 2rem;
        color: #111111
    }

    .link-bar p {
        font-weight: bold;
        padding-left: 2rem;
    }

    .link-bar a:hover {
        font-weight: bold;
        padding-left: 2rem;
        color: #222222
    }

    /*-----------moves stuff right of sidebar----------*/
    /*.content {display: grid; width: 100%; grid-template-columns: 150px 1fr; img {width: 100%}} set size, can be shorter than links inside it*/
    .content {
        display: grid;
        width: 100%;
        grid-template-columns: auto 1fr;

        figure {
            margin: 1rem 0;
        }

        img {
            display: block;

            width: 100%;
        }
    }

    /*.content {display: grid; width: 100%; grid-template-columns: fit-content 1fr; img {width: 100%}} stretches across the screen, content doesn't terminate width wise?*/

    /*-----------Top Bar Alignment----------*/
    .top-nav {
        display: flex;
        justify-content: center;
    }

    .top-nav ol li {
        list-style-type: none;
        margin-inline: 2rem;
        display: inline-block;
    }


    .top-nav a {
        color: var(--passion-color);
        font-family: Lexend;
        font-size: 16px;
        text-decoration: none;
        font-weight: bold;
        font-size: 24px;
    }

    .top-nav a:hover {
        color: #222222;
        font-family: Lexend;
        font-size: 16px;
        font-weight: bold;
        text-decoration: underline;
        font-size: 24px;
    }



    .sub-nav {
        padding: 0 3rem 0 0;
        background-color: var(--accent-color);
        position: relative;
        animation: slideOut;
        animation-duration: 1s;
        animation-iteration-count: 1;

        & ol {

            margin-block-end: 3rem;
            list-style-type: none;
        }
    }

    .sub-nav a {
        padding: .5rem 0;
        display: inline-block;
        font-family: Inter;
        font-size: 1.25rem;
        font-weight: bold;
        text-decoration: none;
        color: var(--passion-color);
    }

    .sub-nav a:link {
        color: var(--passion-color);
    }

    .sub-nav a:hover {
        color: var(--link-hover);
        text-decoration: underline;
    }

    .sub-nav a:visited {
        color: var(--link-hover);
    }


    /*-----------Side bar fonts and links----------*/

    .content .sub-nav {
        color: var(--passion-color);
        font-family: Lexend;
        text-decoration: underline;
        font-weight: bold;
    }

    .content .sub-nav .selected a:hover {
        color: var(--link-hover);
    }

    .content .sub-nav .selected a:visited {
        color: var(--link-hover)
    }

    /*.sub-nav p { color:#222222; font-family: "Helvetica Neue"; font-size: 16px; font-weight: bold; text-decoration:underline;}*/
    .sub-nav p {
        color: #222222;
        font-family: Inter;
        font-size: 16px;
        font-weight: bold;
        text-decoration: underline;
    }



    @keyframes slideOut {
        from {
            left: -130px;
        }

        to {
            left: 0px;
        }
    }


    /*.projectDisplay {display: grid; align-items: center; justify-content: center;}*/
    /*.projectDisplay {display: grid; place-items: center; } all centered*/
    .projectDisplay {
        padding: 2rem 4rem;
    }

    /*.projectDisplay {font-family:Montserrat; }*/
    .projectDisplay {
        font-family: poppins;
    }

    /*.projectDisplay h1 {font-family:Jost; }*/
    .projectDisplay h1 {
        font-family: Lexend;
    }


    .projectDisplay img {
        height: 100%;
    }
	
	
	
	.selected {

        border-block-end: .25rem solid var(--passion-color);
    }
	
	.side-menu,
    .hamb {
        display: none;
    }

	
	.projectDisplay iframe {
		/*height: 100%;*/ 
		aspect-ratio: 9 / 6;
	}

}

@media (width <=442px) {
    header {
        display: grid;
        grid-template-columns: auto;
    }

    .content {
        display: grid;
        grid-template-columns: auto;
    }

    .projectDisplay {
        padding: 1rem 2rem;
    }
	
	
	
	.sub-nav {
        height: 3rem;

        overflow-y: hidden;
        animation: none;

        & .side-menu {
            display: none;
        }
    }
	
	.word-mark span {
        display: inline;
        padding-right: .5rem;
        font-size: 1rem;
    }
	
    .side-menu,
    .hamb {
        display: block;
        padding: 1rem 2rem;
    }
    .sub-nav:has(.side-menu:checked) {
        height: auto;
        overflow-y: visible;
    }
}