/*Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Alegreya&family=Noto+Sans+Display:wght@500;600&family=Noto+Sans:wght@500;600&family=Roboto&display=swap');
/*div recognition cheat sheet*/
/*
nav,.page_banner, #profile, #quick_links, #contact_resume, #contact_email, #contact_more, #bio_display, #bio_story_select, #motion_project_select
    {
        border: 1px dashed red;
    }
*/
/*Debuging div sizes cheat sheet*/

/*
.test_div
    {
        background-color: bisque;
    }
*/
/*Style guide cheat sheet

dark blue:  #281D54
blue:       #294294
dark gold:  #D9A925
gold:       #FAC739
grey:       #C7C7C7

/* Reset Style Rules */
    HTML, *
        {
            padding:0;
            margin:0;
            border:0;
        }
/*General Rules for all Devices, sorted by HTML Semantic Structure */

/* Body Container Style Rules*/
    body
        {
            min-height: 100%;
            background:linear-gradient(#281D54 ,#294294 20%,80%, #281D54);
            color:#C7C7C7;
            font-family: 'Roboto', sans-serif;
        }
/* Text Rules */
    h1, h2, h3
        {
            color: #fac739;
            font-family: 'Noto Sans Display', sans-serif;
        }
    h1
        {
            z-index: 5;
        }
    h2, h3
        {
            margin-bottom:1em;
        }
    a
        {
            color: #fac739;
            text-decoration:none;
        }
    p
        {
            color:#C7C7C7;
            margin:10px 0 10px;
        }
/* Class Rules */
    .nav_button
        {
            z-index:8;
        }
    #nav_overlay, #project_overlay
        {
            position: fixed; /* Sit on top of the page content */
            display: none; /* Hidden by default */
            width: 100%; /* Full width (cover the whole page) */
            height: 100%; /* Full height (cover the whole page) */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #281D5480; /* Black background with opacity */
            z-index: 7; /* Specify a stack order in case you're using a different order for other elements */
            cursor: pointer; /* Add a pointer on hover */
            /* taken from: https://www.w3schools.com/howto/howto_css_overlay.asp*/
        }
    .button_link
        {
            display:block;
            border: 3px solid #fac739;
            background-color:#294294;
            padding: 10px 24px;
            width:4.75em;
            text-align:center;
            font-family: 'Noto Sans Display', sans-serif;
            font-weight: 500;
            align-self: center;
        }
    .button_link_sub
        {
            display:block;
            border: 3px solid #fac739;
            background-color:#294294;
            padding:5px 0 5px 0;
            width: 80px;
            text-align:center;
            font-family: 'Noto Sans Display', sans-serif;
            font-weight: 500;
        }
    .game_button
        {
            width:6em;
            align-self:center;
            justify-self: center;
        }
    .accordion
        {
            color:#FAC739;
            background-color: #294294;
            width:100%;
            border: 3px solid #FAC739;
            font-family: 'Noto Sans Display', sans-serif;
            font-weight: 600;
            font-size:1em;
            display:flex;
            justify-content:space-between;
            align-items: center;
            padding: 0 0 0 1em;
        }
    .arrow_down
        {
            height:2em;
            transform:rotate(180deg);
        }
    .accordion_panel
        {
            padding:15px 0 10px;
        }
    .page_banner img
        {
            object-fit: contain;
            height:80%;
            /*border: 1px dashed orange;*/
        }
    .bio_story_select form
        {
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
        }
    .radio_button
        {
            display:none;
        }
    .bio_story_button
        {
            width:80px;
            border: 3px solid #D9A925;
            cursor:pointer;
            margin:0 8px;
        }
    .project_section
        {
            display:flex;
            z-index: 11;
        }
    .project_section button   
        {
            width: 3em; 
            height: 3em;
            background:none;
            margin:0 10px;
            padding-top: 5px;
        }
    .tag_select form
        {
            display:flex;
            flex-wrap:wrap;
            justify-content: space-evenly;
        }
    .tag_button
        {
            color:#FAC739;
            border: 3px solid #FAC739;
            background-color:#294294;
            padding:5px 0 5px 0;
            margin: 5px 5px;
            width: 120px;
            text-align:center;
            font-family: 'Noto Sans Display', sans-serif;
            font-weight: 500;
            
        }

    .tag_select button
        {
            color:#FAC739;
            border: 3px solid #fac739;
            background-color:#294294;
            padding:5px 0 5px 0;
            width: 80px;
            text-align:center;
            font-family: 'Noto Sans Display', sans-serif;
            font-weight: 500;
        }
    .project_select form
        {
            display:flex;
            justify-content: space-evenly;
            flex-wrap:wrap;
        }
    .project_select input
        {
            display:none;
        }
    .project_select img
        {
            width: 80px;
            height:auto;
            border: 3px solid #D9A925;
        }
    .arrow_right
        {
            width: 3em; 
            height: 3em;
            border: 2px solid #FAC739;
            background-color: #294294;
            transform: rotate(90deg);
            margin-top:5px;
            z-index: 9;
        }
    .arrow_left
        {
            width: 3em; 
            height: 3em;
            border: 2px solid #FAC739;
            background-color: #294294;
            transform: rotate(270deg);
            margin-top:5px;
            z-index: 9;
        }
    .project_collection
        {
            display:flex;
            margin: 0 0 5px;
            overflow-x:scroll;
        }
    .project_collection img
        {
            object-fit: contain;
        }
    #motion_interactive_button, #illustration_interactive_button, #game_interactive_button
    {
        background:none;
        width: 3em; 
        height: 3em;
        border: 2px solid #FAC739;
        background-color: #294294;
        z-index: 9;
    }
    /*project subpage rules*/
    
    
    /*mobile layout*/
    /*tablet layout*/
    
    
/* List Rules*/
    header li, #quick_links li, footer li,#contact_more li, #bio_story_select li, .resource_list li, .tag_select li, .project_select li, .project_section li, #email_panel li,#game_project_list li,#motion_project_list li, #illustration_project_list li
        {
            list-style-type: none;
        }
    header a, #quick_links a, footer a
        {
            text-decoration:none;
        }

/* Header Rules */
    nav
        {
            display:flex;
            width:100%;
        }
    nav button
        {
            margin:15px;
            width:75px;
            height:75px;
            border: 2px solid #FAC739;
            background-color: #294294;
        }
    nav ul
        {
            width:max-content;
            display:flex;
        }

/* Main Rules */

    /* Contact Page Rules*/
        #contact_resume p
            {
                margin: 0 0 10px;
            }
        #contact_resume a
            {
                text-decoration: underline;
            }
        #quick_links ul img, .accordion_panel img
            {
                width: 80px;
                height:auto;
                border: 3px solid #FAC739;
            }
        .accordion_panel fieldset
            {
                margin-bottom:1em;
                display:flex;
                flex-direction:column;
                align-items: center;
            }
        .accordion_panel legend
            {
                margin-bottom:5px;
                
            }
        #email_information div
            {
                text-align:center;
                max-width: fit-content;
                text-align: right;
            }
        #email_topic div
            {
                text-align:center;
                max-width: fit-content;
                text-align: left;
            }
        .contact_submit input
            {
                padding: 12px 20px;
                color:#FAC739;
                background-color: #294294;
                border: 3px solid #FAC739;
                font-family: 'Noto Sans Display', sans-serif;
                font-weight: 500;
                font-size: 15px;
                margin-right: 5px;
            }
    /* Bio Page Rules*/
        #bio_description, #bio_story, #bio_mission_statement
            {
                font-family: 'Alegreya', serif;
            }
    /* Motion & illustration Rules*/
        #motion_interactive, #illustration_interactive
            {
                z-index: 0;
            }
        #motion_description table, #illustration_description table
            {
                width:80%;
                margin:auto;
                table-layout: fixed;
            }
        .project_table_header
            {
                border: 2px solid;
                color: #FAC739;
                text-align: center;
                width: 33%;
                font-family: 'Noto Sans Display', sans-serif;
                font-weight: 600;
                font-size: 20px;
                padding: 3px 0;
            }
        .project_table_data
            {
                text-align: center;
                font-family: 'Noto Sans Display', sans-serif;
                font-weight: 500;
                font-size: 15px;
                padding: 10px 10px;
                height: 30px;
                overflow: visible;
            }
        #project_table_motion_brief, #project_table_illustration_brief, #project_table_game_brief
            {
                padding-top: 30px;
            }
    /* Game Rules*/
        #game .arrow_left, #game .arrow_right
            {
                display: block;
            }
    /*  Subpage - Induvidual Project Rules*/
        /* .project_intro
        {
            
        } */
        
/* Footer Rules */
    footer
        {
            background-color: #281D54;
        }
/* Hover Rules*/
    /* Index/Nav Hover Rules*/
    .button_link, .button_link_sub, .tag_button
        {
            transition:background-color, color, box-shadow;
            transition-duration: 0.5s;
        }
    .button_link:hover, .button_link_sub:hover, .tag_button:hover
        {
            background-color:#fac739;
            color:#294294;
            box-shadow: 0 0 10px 2px #fac739;
            cursor:pointer;
        }

    /* Contact Hover Rules*/
    .accordion, #bio_grid label img
        {
            transition: box-shadow;
            transition-duration: 0.5s; 
        }
    .accordion:hover, #bio_grid label img:hover
        {
            box-shadow: 0 0 10px 2px #fac739;
        }
    /* Motion/illustration/Gallery Hover Rules*/

    .project_select img, .accordion_panel img
        {
            transition: border, box-shadow;
            transition-duration: 0.5s;
        }
    .project_select img:hover, .accordion_panel img:hover
        {
            border: 3px solid #FAC739;
            box-shadow: 0 0 10px 2px #fac739;
        }
    .arrow_right, .arrow_left, #motion_interactive_button,#illustration_interactive_button, #game_interactive_button
        {
            transition: box-shadow;
            transition-duration: 0.5s;
        }
    .arrow_right:hover,.arrow_left:hover, #motion_interactive_button:hover,#illustration_interactive_button:hover, #game_interactive_button:hover
        {
            box-shadow: 0 0 10px 2px #fac739;
        }
/* Layout Rules based on Screen Sizes */
/* Follows Similar Semantic Structure as General Rules */

/* Mobile View: 0px to 750px */
@media screen and (max-width: 750px)
{
    /* Main/Grid Mobile Rules */
    main    
        {
            width: 100%;
            text-align: center;
        }
        section:not(#sub_project_header_grid)
        {
            min-height:600px;
        }
       .sub_project_header_grid
        {
            min-height: 100px;
        }
    #home_grid
        {
            display:grid;
            grid-template-columns: 1fr;
            grid-template-rows: 8em 24em 1fr;
            margin:auto;
            width:90%;
            height:min-content;
            margin-bottom: 10px;
        }
    #contact_grid
        {
            display:grid;
            grid-template-columns: 1fr;
            grid-template-rows: 8em 2fr 5fr 3fr;
            margin:auto;
            width:90%;
            height:min-content;
            margin-bottom: 10px;
        }
    #bio_grid
        {
            display:grid;
            grid-template-columns: 1fr 3fr 1fr;
            grid-template-rows: 8em 15em 37em 17em 5fr 12em 8em;
            margin:auto;
            width:90%;
            height:min-content;
            margin-bottom: 30px;
            justify-content: center;
        }
    #motion_grid, #illustration_grid, #game_grid
        {
            display:grid;
            grid-template-columns: 1fr 15em 1fr;
            grid-template-rows: 8em 10em 3em 25em 2em 3fr;
            margin:auto;
            width:90%;
            height:min-content;
            margin-bottom: 30px;
        }
        
    #sub_page_grid
        {
            display:grid;
            grid-template-columns: 1fr;
            grid-template-rows: 8em 1fr 5em;
            width:90%;
            margin: auto;
        }
    #sub_project_header_grid
        {
            display:grid;
            grid-template-columns: 2fr 3fr 3fr 2fr;
            grid-template-rows: 8em;
            width:80%;
            margin: auto;
        }    
    #sub_project_grid
        {
            display:grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1em 1fr 1fr ;
            width:80%;
            margin: auto;
        } 
    /* Header mobile Rules */
    /* Nav mobile Layout */
    nav
        {
            flex-direction: column;/*flex-direction should change with screen size*/
            align-items: center;/*note to self: align-items rule for adjusting on the horizontal axis, justify-content for vertical*/
            margin:auto;
             
        }
    nav ul
        {
            flex-direction:column;/*flex direction for the button array, seperate from the nav array*/
            position:absolute;
            z-index: 8;
            margin-top: 8em;
        }
    nav li
        {
            margin: 0 0 2.5em;
        }
    /* Body mobile Rules */
    /* index page mobile rules */
    #home_grid h1
        {
            grid-column:1/span 1;
            grid-row:1/span 1;
        }
    #home_grid .page_banner
        {
            grid-column:1/span 1;
            grid-row:1/span 1;
        }
    #profile
        {
            grid-column:1;
            grid-row:2/span1;
            width: 100%;
            display:flex;
            flex-direction:column;
            align-items:center;
        }
    #profile h1, #profile p
        {
            text-align: center;
        }
    #profile img
        {
            width:200px;
            height:auto;
        }
    #quick_links
        {
            display:flex;
            flex-direction: column;
            grid-row: 3 /span 1;
            grid-column: 1/ span 1;
            width:100%;
            overflow-x:hidden;
            justify-content: center;
        }
    #quick_links h2
        {
            text-align:center;
            margin:5px 0 5px;
        }
    #quick_links ul
        {
            display:flex;
            flex-direction:row;
            align-items:center;
            justify-content: center;
            overflow-x:scroll;
            margin:0 0 15px;
        }
    .quick_links_list li
        {
            margin: 0 0 10px;
        }
    .quick_links_item
        {
            margin: 0 10px;
        }
    #readme
        {
            grid-row: 4/span 1;
            grid-column: 1/span 1;
            padding:0 10px 0 10px;
        }
    /* contact page mobile rules */
    #contact_grid h1
        {
            grid-column:1/span 1;
            grid-row: 1/span 1;
        }
    #contact_grid .page_banner
        {
            grid-column:1/span 1;
            grid-row: 1/span 1;
        }
    #contact_resume
        {
            width:100%;
            grid-column:1;
            grid-row: 2/ span 1;
            margin:0 0 10px;
        }
    #contact_email
        {
            width:100%;
            grid-column:1;
            grid-row: 3/ span 1;
            margin:0 0 10px;
        }
    #contact_more
        {
            width:100%;
            grid-column:1;
            grid-row: 4/ span 1;
            margin:0 0 10px;
        }
    #contact_more ul
        {
            width:20em;
            display:flex;
            justify-items: center;
        }
    .accordion_panel img
        {
            margin: 0 1em;
        }
    /* Bio Page mobile rules*/
    #bio_grid .page_banner
        {
            grid-column: 1/span 3;
            grid-row:1/span 1;
            width:100%;
        }
    #bio_grid h1
        {
            grid-column: 1/span 3;
            grid-row:1/span 1;
        }
    #bio_mission_statement
        {
            grid-column: 1/span 3;
            grid-row:2/span 1;
        }
    #bio_grid .arrow_left
        {
            grid-column: 1/span 1;
            grid-row:4/span1;
            justify-self:center;        
        }
    #bio_interactive
        {
            grid-column: 2/span 1;
            grid-row:4/span1;
            justify-self:center;
            width:11em;
            height:15em;
            display:flex;
            /*border:1px solid red;*/
        }
    #bio_interactive img
        {
            object-fit: contain;
        }
    #bio_grid .arrow_right
        {
            grid-column: 3/span 1;
            grid-row:4/span1;
            justify-self:center;
        }
    #bio_description
        {
            grid-column: 1/span 3;
            grid-row:3/span1;
            width:100%;
            font-family: 'Alegreya', serif;
        }
    #bio_story
        {
            grid-column:1/span 3;
            grid-row:5/span 1;
            align-self: center;
        }
    #bio_story_select
        {
            grid-column: 1/span 3;
            grid-row:6/span1;
            width:100%;
            overflow-x:scroll;
        }
    #bio_story_select ul
        {
            display:flex;
        }
    #bio_story_select li
        {
            margin: 0 10px 0;
        }
    #bio_extra_story
        {
            grid-column: 1/span 3;
            grid-row: 7/span 1;
        }
    /* Motion & illustration Page Mobile Rules*/
    #motion_grid .page_banner, #illustration_grid .page_banner, #game_grid .page_banner
        {
            grid-column: 1/span 3;
            grid-row:1/span 1;
            width:100%;
        }
    #motion_grid h1, #illustration_grid h1, #game_grid h1
        {
            grid-column: 1/span 3;
            grid-row:1/span 1;
        }
    #motion_grid .arrow_left, #illustration_grid .arrow_left, #game_grid .arrow_left
        {
            grid-column: 1/span 1;
            grid-row:2/span 1;
            justify-self: center;
        }
    #motion_interactive, #illustration_interactive, #game_interactive
        {
            grid-column: 1/span 3;
            grid-row:2/span 1;
            width: 17em;
            height:10em;
            display:flex;
            justify-content: center;
            margin-left:auto;
            margin-right:auto;
            /*border:1px solid red;*/
        }
    #motion_interactive img, #illustration_interactive img, #game_interactive img
        {
            height:100%;
            width:auto;
        }

    #motion_interactive_button, #illustration_interactive_button, #game_interactive_button
        {
            grid-column: 2/span 1;
            grid-row:2/span 1;
            justify-self: end;
            margin: 5px 5px;
        }
    #motion_grid .arrow_right, #illustration_grid .arrow_right, #game_grid .arrow_right
        {
            grid-column: 3/span 1;
            grid-row:2/span 1;
            justify-self: center;
        }
    #motion_grid .project_section, #illustration_grid .project_section, #game_grid .project_section
        {
            grid-column: 2/span 1;
            grid-row: 3/span 1;
            margin: 10px;
            justify-self: center;
        }
    #motion_description, #illustration_description, #game_description
        {
            grid-column: 1/span 3;
            grid-row:4/span 1;
            margin-top: 33px;
        }
    #motion_grid .resource_list,#illustration_grid .resource_list
        {
            grid-column:1/span 3;
            grid-row:5/span 1;
        }
    #motion_project_select, #illustration_project_select, #game_project_select
        {
            grid-column: 1/span 3;
            grid-row:6/span 1;
        }
    #motion_project_list, #illustration_project_list, #game_project_list
    {
        display:none;
    }
    /* Game Page Mobile Rules*/

    /*
    #game_grid .page_banner
        {
            grid-column:1/span 1;
            grid-row:1/span 1;
        }
    #game_grid h1
        {
            grid-column:1/span 1;
            grid-row:1/span 1;
        }
    
    #game_interactive
        {
            grid-column:1/span 1;
            grid-row:2/span 1;
            width: 17em;
            height:10em;
            display:flex;
            justify-content: center;
            margin-left:auto;
            margin-right:auto;
        }
    #game_interactive_button
        {
            grid-column:1/span 1;
            grid-row: 2/span 1;
            justify-self: end;
            align-self: start;
        }
    #game_grid .project_section
        {
            grid-column:1/span 1;
            grid-row: 3/span 1;
            justify-self:center;
        }
    #game_description
        {
            grid-column: 1/span 1;
            grid-row: 4/span 1;
        }
    */

    /* sub page projects mobile rules*/
    
    .project_intro, .sub_page_asset
    {
        flex-direction: column;
        margin: 0;
    }
    .project_intro
    {
        width : 80%;
        margin: auto;
    }
    
    .sub_page_asset
    {
        min-height:50em;
        justify-content: start;
        align-items: center;
    }
    .asset_visual img
    {
        width: 15em;
        height: 15em;
    }
    .asset_description
    {
        max-width : 18em;
        padding-left: 0;

    }

    #asset_01
    {
        grid-column: 1/span 1;
        grid-row: 2/span 1;
    }
    #asset_02
    {
        grid-column: 1/span 1;
        grid-row: 3/span 1;
    }
    /* Game Page mobile rules*/
    #game_link
        {
            display:none;
        }
    /* Footer Mobile Rules */
    footer
        {
            display:flex;
            flex-direction:column;
            align-items:center;
            height:3em;
            justify-content: center;
            padding-bottom: 10px;
        }
    footer p
        {
            margin: 0 0 5px;
        }
    footer ul
        {
            display:flex;
        }
    footer li   
        {
            margin: 0 0 0 1em;
            padding: 0 1em;
        }
}
/* Tablet View: 751px to 1279px */
@media screen and (min-width: 751px) and (max-width: 1279px)
{
    /* Main Rules/Grid Rules */
    main    
        {
            width: 100%;
            text-align: center;
        }
    section:not(#sub_project_header_grid)
    {
        min-height:800px;
    }
    .sub_project_header_grid
    {
        min-height: 100px;
    }
    #home_grid
        {
            display:grid;
            grid-template-columns: 1fr ;
            grid-template-rows: 10em 12em 11em;
            margin:auto;
            width:80%;
            height:min-content;
            margin-bottom: 10px;
        }
    #contact_grid
        {
            display:grid;
            grid-template-columns: 1fr;
            grid-template-rows: 10em 12em 5fr 3fr;
            margin:auto;
            width:60%;
            height:min-content;
            margin-bottom: 10px;
        }
    #bio_grid
        {
            display:grid;
            grid-template-columns: 3em 3fr 3fr 3em;
            grid-template-rows: 10em 12em 7fr 6fr 10em 7em;
            margin:auto;
            width:80%;
            height:min-content;
            margin-bottom: 30px;
        }
    #motion_grid, #illustration_grid, #game_grid
        {
            display:grid;
            grid-template-columns: 3em 21em 3em 3fr;
            grid-template-rows: 10em 12em 3em 12em 2fr;
            margin:auto;
            width:90%;
            height:min-content;
            margin-bottom: 30px;
        }
    
    #sub_page_grid
    {
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 10em 12em 1fr;
        width:80%;
        margin: auto;
    }    
    #sub_page_project_grid
    {
        display:grid;
        grid-template-columns: 1fr;
        grid-template-rows: 10em 12em 1fr;
        width:90%;
        margin: auto;
    }
    /* Header Tablet Rules */
    /* Nav Tablet Layout */
    nav
        {
            flex-direction: column;/*flex-direction should change with screen size*/
            align-items: center;/*note to self: align-items rule for adjusting on the horizontal axis, justify-content for vertical*/
            margin:auto;
             
        }
    nav ul
        {
            flex-direction:column;/*flex direction for the button array, seperate from the nav array*/
            position:absolute;
            z-index: 10;
            margin-top: 8em;
        }
    nav li
        {
            margin: 0 0 2.5em;
        }
    /* Body Tablet Rules */
    /* Index Page Tablet Rules*/
    h1
        {
            grid-column:1/span 1;
            grid-row:1/span 1;
        }
    .page_banner
        {
            grid-column: 1/span 1;
            grid-row: 1/span 1;
        }
    #profile
        {
            display:flex;
            grid-column:1;
            grid-row:2/span 1;
            justify-content: center;
            align-items: center;
        }
    #profile img, #profile p
        {
            width:18em;
        }
    #quick_links
        {
            grid-column:1;
            grid-row:3/span 1;
            
        }
    #quick_links div
        {
            display:flex;
            justify-content:space-around;
        }
    #quick_links ul
        {
            display:grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr;
            place-items:center;
            margin:0 15px;
        }
    .quick_links_list li
        {
            margin: 0px 0 10px;
        }
    .quick_links_item
        {
            margin: 5% 0 5%;
        }
    #readme
        {
            grid-row:4/span 1;
            grid-column:1/span 1;
        }
    /* Contact Page Tablet Rules*/
    #contact_grid .page_banner
        {
            grid-column: 1/span 1;
            grid-row: 1/span 1;
        }
    #contact_grid h1
        {
            grid-column: 1/span 1;
            grid-row: 1/span 1;
        }
    #contact_resume
        {
            width:100%;
            grid-column:1;
            grid-row: 2/ span 1;
            margin:0 0 10px;
        }
    #contact_email
        {
            width:100%;
            grid-column:1;
            grid-row: 3/ span 1;
            margin:0 0 10px;
        }
    #contact_more
        {
            width:100%;
            grid-column:1;
            grid-row: 4/ span 1;
            margin:0 0 10px;
        }
    #contact_more ul
        {
            display:flex;
            justify-content: space-around;
        }
    #contact_more li
        {
            margin-right: 1em;
        }
    /* Bio Page Tablet Rules*/
    #bio_grid .page_banner
        {
            grid-column: 2/span 2;
            grid-row: 1/span 1;
        }
    #bio_grid h1
        {
            grid-column: 2/span 2;
            grid-row: 1/span 1;
        }
    #bio_mission_statement
        {
            grid-column:2/span 2;
            grid-row: 2/span 1;
        }
    #bio_grid .arrow_left
        {
            grid-column: 1/span 1;
            grid-row: 4/span 1;
            justify-self:center;
            align-self:start;
        }
    #bio_grid .arrow_right
        {
            grid-column: 4/span 1;
            grid-row: 4/span 1;
            justify-self:center;
            align-self:start;
        }
    #bio_interactive
        {
            grid-column:2/span 1;
            grid-row:3/span 1;
            justify-self: center;
            align-self: center;
            display:flex;
            height:20em;
            width:15em;
        }
    #bio_interactive img
        {
            object-fit: contain;
        }
    #bio_description
        {
            grid-column:3/span 1;
            grid-row:3/span 1;
        }
    #bio_story
        {
            grid-column: 2/span 2;
            grid-row:4/span 1;
            align-self: start;
            
        }
    #bio_story_select
        {
            grid-column:2/span 2;
            grid-row: 5/span 1;
            overflow-x: scroll;
        }
    #bio_story_select ul
        {
            display:flex;
            justify-content: space-around;
        }
    #bio_extra_story
        {
            padding-top: 10px;
            grid-column: 2/span 2;
            grid-row: 6/span 1;
        }
    /* Motion & illustration Page Tablet Rules*/
    #motion_grid .page_banner, #illustration_grid .page_banner, #game_grid .page_banner
        {
            grid-column:1/span 4;
            grid-row:1/span 1;
        }
    #motion_grid h1, #illustration_grid h1, #game_grid h1
        {
            grid-column:1/span 4;
            grid-row:1/span 1;
        }
    #motion_interactive, #illustration_interactive, #game_interactive
        {
            grid-column:2/span 1;
            grid-row:2/span 1;
            width: 21em;
            height:12em;
            display:flex;
            justify-content: center;
            /*border:1px solid red;*/
        }
    #motion_interactive img, #illustration_interactive img, #game_interactive img
        {
            height:100%;
            width:auto;
        }
    #motion_interactive_button, #illustration_interactive_button, #game_interactive_button
        {
            grid-column: 2/span 1;
            grid-row:2/span1;
            justify-self: end;
        }
    #motion_grid .arrow_left, #illustration_grid .arrow_left, #game_grid .arrow_left
        {
            grid-column:2/span 1;
            grid-row:3/span 1;
            align-self: center;
            justify-self:start;
        }
    #motion_grid .arrow_right, #illustration_grid .arrow_right, #game_grid .arrow_right
        {
            grid-column:2/span 1;
            grid-row:3/span 1;
            align-self: center;
            justify-self:end;
        }
    #motion_grid .project_section, #illustration_grid .project_section, #game_grid .project_section
        {
            grid-column:2/span 1;
            grid-row:3/span 1;
            place-self: center;
        }
    #motion_description, #illustration_description, #game_description
        {
            grid-column:4/span 1;
            grid-row:2/span 3;
            padding: 0 0.5em 0 0.5em;
        }
    #motion_description h2, #illustration_description h2, #game_descritption h2
        {
            white-space: nowrap;
            overflow:visible;
        }
    #motion_description table, #illustration_description table, #game_description table
        {
            width:100%;
        }
    .project_table_header
        {
            font-size: 15px;
        }
    .project_table_data
        {
            height:20px;
        }
    #motion_grid .resource_list, #illustration_grid .resource_list
        {
            grid-column:1/span 4;
            grid-row:4/span 1;
            align-self:center;
        }
    #motion_project_select, #illustration_project_select, #game_project_select
        {
            grid-column:1/span 4;
            grid-row:5/span 1;
        }
    #motion_project_list, #illustration_project_list, #game_project_list
        {
            display:none;
        }
    /* Game page Tablet rules*/
    /*
        #game_grid .page_banner, #game_grid h1
            {
                grid-column:1/span 1;
                grid-row:1/span 1;
            }
        #game_grid img
            {
                grid-column:1/span 1;
                grid-row:2/span 1;
                justify-self: center;
            }
        #game_grid p
            {
                grid-column:1/span 1;
                grid-row: 3/span 1;
                align-self:center;
            }
    */
    /* Game Page tablet rules*/
    #game_link
        {
            display:none;
        }
    /* Sub-page: Email Form Tablet rules*/
            #email_form_plugin
            {
                grid-column: 1/span 1;
                grid-row: 2/span 2;
            }
    /* Footer Rules */
    footer
        {
            display:flex;
            flex-direction:column;
            align-items:center;
            height:3em;
            justify-content: center;
            padding-bottom: 10px;
        }
    footer p
        {
            margin: 0 0 5px;
        }
    footer ul
        {
            display:flex;
            
        }
    footer li   
        {
            padding-right: 1em;
        }
}
/* Desktop View: 1280px to 1920px and beyond */
@media screen and (min-width: 1280px)
{
    /* Header Rules */
    /* Nav desktop Layout */
    nav
        {
            flex-direction: row-reverse;/*flex-direction should change with screen size*/
            align-items: center;/*note to self: align-items rule for adjusting on the horizontal axis, justify-content for vertical*/
            margin:auto;
            position:absolute;
            margin-top:2em;
        }
    nav ul
        {
            display:block;
            flex-direction:row;/*flex direction for the button array, seperate from the nav array*/
        }
    nav li
        {
            margin-right:1em;
        }
    /* Main/Grid Desktop Rules*/
    main    
        {
            width: 100%;
            text-align: left;
        }
    section:not(#sub_project_header_grid)
    {
        min-height:720px;
    }
   .sub_project_header_grid
    {
        min-height: 100px;
    }
    #home_grid
        {
            display:grid;
            grid-template-columns: 2fr 3fr 3fr 2fr ;
            grid-template-rows: 8em 3fr 11em ;
            margin:auto;
            width:80%;
            height:min-content;
            margin-bottom: 1em;
        }
    #contact_grid
        {
            display:grid;
            grid-template-columns: 8em 4fr 2fr 2fr 4fr 8em;
            grid-template-rows: 8em 6fr;
            margin:auto;
            width:80%;
            height:min-content;
            margin-bottom: 1em;
        }
    #bio_grid
        {
            display:grid;
            grid-template-columns: 1fr 1fr 3fr 3fr 1fr 1fr;
            grid-template-rows: 8em 10em 1fr 1fr 10em 7em;
            margin:auto;
            width:80%;
            height:min-content;
            margin-bottom: 1em;
        }
    #motion_grid, #illustration_grid, #game_grid
        {
            display:grid;
            grid-template-columns: 2fr 1fr 25em 1fr 6fr 2fr;
            grid-template-rows: 8em 14em 4em 4em 18em 1fr;
            margin:auto;
            width:80%;
            height:min-content;
            margin-bottom: 30px;
        }
    
    #sub_page_grid
        {
            display:grid;
            grid-template-columns: 2fr 3fr 3fr 2fr;
            grid-template-rows: 8em 1fr 8em;
            width:80%;
            margin: auto;
        } 
    
    #sub_project_header_grid
    {
        display:grid;
        grid-template-columns: 2fr 3fr 3fr 2fr;
        grid-template-rows: 8em;
        width:80%;
        margin: auto;
    }    
    #sub_project_grid
    {
        display:grid;
        grid-template-columns: 2fr 3fr 3fr 2fr;
        grid-template-rows: 1em 25em 25em 25em 25em 25em 8em;
        width:80%;
        margin: auto;
    } 
    .page_banner, .page_header
        {
            margin-top:1em;
        }
    /* Index Page Desktop Rules*/
    .page_banner
        {
            grid-column: 1/span 1;
            grid-row: 1/span 1;
        }
    h1
        {
            grid-column:1/span 1;
            grid-row: 1/span 1;
        }
    #profile
        {
            grid-column: 2/span 2;
            grid-row: 2/span 1;
            display:flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            text-align: center;
        }
    #profile img, #profile p
        {
            width:19em;
        }
    #quick_links
        {
            grid-column:1/span 4;
            grid-row:3/span 1;
            text-align: center;
        }
    #quick_links div
        {
            display:flex;
            justify-content:center;
        }
    #quick_links ul
        {
            display:grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr;
            place-items:center;
            margin:0 2em;
        }
    .quick_links_list li
        {
            margin: 0px 0 10px;
        }
    .quick_links_item
        {
            margin: 5% 0 5%;
        }
    #readme
        {
            grid-column:1/span 4;
            grid-row:4/span 1;
            text-align: center;
        }
    /* Contact Page Desktop Rules*/
    #contact_grid .page_banner
        {
            grid-column:1/span 1;
            grid-row:1/span 1;
        }
    #contact_grid h1
        {
            grid-column:1/span 2;
            grid-row:1/span 1;
        }
    #contact_resume
        {
            grid-column: 2/span 1;
            grid-row:2/span 1;
            margin: 0 1em 0 1em;
            text-align: center;
        }
    #contact_email
        {
            grid-column: 3/span 2;
            grid-row:2/span 1;
            margin: 0 1em 0 1em;
            text-align: center;
        }
    #contact_more
        {
            grid-column: 5/span 1;
            grid-row:2/span 1;
            text-align: center;

        }
    #contact_more ul
        {
            display:flex;
            flex-direction: column;
        }
    #contact_more li
        {
            margin-right: 1em;
        }
    .accordion_panel img, .accordion_panel p
        {
            margin: 0 0 1em;
        }
    /* Bio page Desktop rules*/
    #bio_grid .page_banner
        {
            grid-column:1/span 1;
            grid-row:1/span 1;
        }
    #bio_grid h1
        {
            grid-column:1/span 1;
            grid-row:1/span 1;
        }
    #bio_mission_statement
        {
            grid-column: 2/ span 4;
            grid-row: 2/span 1; 
        }
    #bio_grid .arrow_left
        {
            grid-column: 2/span 1;
            grid-row:4/span 1;
            justify-self:center;
            align-self:start;
        }
    #bio_grid .arrow_right
        {
            grid-column:5/span 1;
            grid-row:4/span 1;
            justify-self:center;
            align-self:start;
        }
    #bio_interactive
        {
            grid-column:3/span 1;
            grid-row:3/span 1;
            display:flex;
            justify-self: center;
            align-self: center;
            height:20em;
            width:15em;
            /*border:1px solid red;*/
        }
    #bio_interactive img
        {
            object-fit: contain;
        }
    #bio_description
        {
            grid-column:4/span 1;
            grid-row:3/span 1;
            text-align: center;
            align-self:center;
            max-height: max-content;
            margin-bottom: 2em;
        }
    #bio_story
        {
            grid-column: 3/span 2;
            grid-row:4/span 1;
            text-align: center;
            align-self:start;
        }
    #bio_story_select
        {
            grid-column: 3/span 2;
            grid-row:5/span 1;
            text-align: center;
        }
    #bio_extra_story
        {
            grid-column: 3/span 2;
            grid-row:6/span 1;
            text-align: center;
            padding-top:10px;
        }
    /* Motion & illustration page desktop rules*/
    #motion_grid .page_banner, #illustration_grid .page_banner, #game_grid .page_banner
        {
            grid-column:1/span 1;
            grid-row:1/ span 1;
        }
    #motion_grid h1, #illustration_grid h1, #game_grid h1
        {
            grid-column:1/span 1;
            grid-row:1/span 1;
        }
    #motion_interactive, #illustration_interactive, #game_interactive
        {
            grid-column:3/span 1;
            grid-row:2/span 1;
            width: 25em;
            height:14em;
            display:flex;
            justify-content: center;
            justify-self:center;
            /*border:1px solid red;*/
        }
    #motion_interactive img, #illustration_interactive img, #game_interactive img
        {
            height:100%;
            width:auto;
        }
    #motion_interactive_button, #illustration_interactive_button, #game_interactive_button
        {
            grid-column: 3/span 1;
            grid-row:2/span1;
            justify-self: end;
        }
    #motion_grid .arrow_left, #illustration_grid .arrow_left, #game_grid .arrow_left
        {
            grid-column:3/span 1;
            grid-row:3/span 1;
            align-self: center;
            justify-self:start;
        }
    #motion_grid .arrow_right, #illustration_grid .arrow_right, #game_grid .arrow_right
        {
            grid-column:3/span 1;
            grid-row:3/span 1;
            align-self: center;
            justify-self:end;
        }
    #motion_grid .project_section, #illustration_grid .project_section, #game_grid .project_section
        {
            grid-column:3/span 1;
            grid-row:3/span 1;
            align-self: center;
            justify-self: center;
        }
    #motion_description, #illustration_description, #game_description
        {
            grid-column: 5/span 1;
            grid-row:2/span 3;
            justify-self:center;
            text-align: center;
        }
    #motion_description h2, #illustration_description h2, #game_descritpion h2
        {
            white-space: nowrap;
            overflow:visible;
            text-align: center;
        }
    #motion_description table, #illustration_description table, #game_descritpion table
        {
            width:100%;
        }
    .project_table_header
        {
            font-size: 15px;
            width: 20%;
        }
    .project_table_data
        {
            height:20px;
        }
    #motion_grid .resource_list, #illustration_grid .resource_list, #game_grid .resource_list
        {
            grid-column:2/span 4;
            grid-row:4/span 1;
            place-self: center;
            width:80%;
        }
    #motion_grid .resource_list ul, #illustration_grid .resource_list ul, #game_grid .resource_list ul
        {
            justify-content: space-around;
        }
    #motion_project_select, #illustration_project_select, #game_project_select
        {
            grid-column:2/span 4;
            grid-row: 5/span 1;
            place-self: center;
            width:80%;
        }
    #motion_project_select ul, #illustration_project_select ul, #game_project_select ul
        {
            justify-content: space-around;
        }
    #motion_project_select .tag_select, #illustration_project_select .tag_select, #game_project_select .tag_select
        {
            margin:0 0 2em;
        }
    #motion_grid h3, #illustration_grid h3, #game_grid h3
        {
            margin:0 0 13px;
        }
    #motion_project_list, #illustration_project_list, #game_project_list
        {
            grid-column:3/span 2;
            grid-row: 6/span 1;
        }
    
    /* Game Page desktop rules*/
    #game_link
        {
            grid-column: 3/span 1;
            grid-row: 4/span 1;
            padding: 5px 18px;
        }
    
    /* Sub-Page Email Form desktop rules*/
    #email_form_plugin
        {
            grid-column: 2/span 2;
            grid-row: 2/span 1;
        }
    /* Sub-Page Games Embed Desktop rules*/
    #game_embed
        {
            grid-column: 2/span 2;
            grid-row: 2/span 1;
            justify-self:center;
        }
    /* Sub-page project page desktop rules*/
    /*desktop layout*/
    .header_links
    {
        grid-row:1/span 1;
        grid-column:1/span 2;
        z-index: 2;
        display:flex;
    }
    .page_header_extension
    {
        padding-left:0.5em;
    }
    .sub_project_div
    {
        margin:auto;
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        width :100%;
    }
    .project_intro
    {
        display:flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 80%;
        margin:auto;
    }
    .project_intro img
    {
        height:15em;
        width:15em;
        padding-right: 2em;
    }
    .sub_page_asset
    {
        display:flex;
        justify-content:center;
        align-items:center;
        z-index: 0;
    }
    .asset_visual
    {
        padding:  1.5em 0 1.5em 0;
    }
    .asset_visual img
    {
        height:20em;
        width:20em;
        object-fit: contain;
    }
    .asset_description
    {
        height:15em;
        width:800px;
        padding-left:3.5em;
        vertical-align: middle;
    }
    
    .asset_description p
    {
        text-align: left;
        margin:auto;
    }
    .sub_page_header
    {
        width:80%;
        margin:auto;
        text-align: center;
    }
    #asset_01
    {
        grid-row: 2/span 1;
        grid-column: 1/span 4;
        z-index: 0;
    }
    #asset_02
    {
        grid-row: 3/span 1;
        grid-column: 1/span 4;
        z-index: 0;
    }
    #asset_03
    {
        grid-row: 4/span 1;
        grid-column: 1/span 4;
        z-index: 0;
    }
    #asset_04
    {
        grid-row: 5/span 1;
        grid-column: 1/span 4;
        z-index: 0;
    }
    #asset_05
    {
        grid-row: 6/span 1;
        grid-column: 1/span 4;
        z-index: 0;
    }
    /* Footer Rules */
    footer
        {
            display:flex;
            flex-direction:column;
            align-items:flex-end;
            height:5em;
            justify-content: center;
            padding-right: 1em;
        }
    footer p
        {
            margin: 0 0 5px;
        }
    footer ul
        {
            display:flex;
        }
    footer li   
        {
            padding-right:1em;
        }
}