/* Standard CSS of Website */
    body
    {
        margin: 0;
        padding: 0;
        background-color: black;
        color: #9999ff;
        font-family: Sono;
        font-weight: 300;
        font-size: 18px;
    }

    #nav
    {
        position: fixed;
        margin: 0;
        padding: 0;
        width: 100%;
        list-style-type: none;
        text-align: center;
        background-color:mediumslateblue;
    }

    #nav li
    {          
        display: inline-block;
        font-size: 18px;
        width: 65px;
        padding: 8px; 
        border-radius: 25px;
        font-weight: 400;
        background-color:black;
        color:#9999ff;
    }

    #nav li:hover
    {
        transition: 0.8s;
        transition-timing-function: ease-in-out;
        background-color: rgb(208, 220, 230);
        color:#0000B4;
    }

    h2
    {
        color:rgb(208, 220, 230);
        text-align: center;
        margin: 0;
        padding: 0;
        
    }

    i
    {
        color:rgb(208, 220, 230);
    }

    a:visited
    {
        text-decoration: none;
        color:rgb(208, 220, 230);
    }
/* End Of Standard CSS of Website */


/* CSS of Home Page Image Galery */
    .imgrid        
    {                     
        width: fit-content;        /*This fixed grid placement, the width must match the combined columns*/
        margin: 0 auto;            
        display: grid;
        gap: 4px;      /*gap between images */
        grid-template-columns: repeat(3, 0.2fr);
        padding: 0;
    } 

    .imgcard
    {  
        border: 4px solid black;
        width:"400px"; height:"210px";
        margin: 0; padding: 0;
    }

    .imgcard:hover
    {
        transition: 0.8s;
        transition-timing-function: ease-in-out;
        border: 4px solid #9999ff;
    }

    .imgrid-aligner
    {
        margin: 60px 0px 60px 0px;
    }

    #logo 
    {
        margin: 0;
    }

    #lti
    {
        padding-top: 100px; /*This will provide the space for the nav menu at the top */
        text-align: center;
        display: table;
        margin-right: auto;
        margin-left: auto; 
    }

    #lti p
    {
        font-weight: 400;
        text-align: left;
    }
/* End Of CSS of Home Page Image Galery */


/* CSS of Content Thumbnail */
    #imgblock
    {
        float: left;
        width: 510px;
        height: 250px;
        padding: 5px;
        margin: 20px 15px 50px 0px;    
        text-align: center;
    }

    #subtextblock
    {
        margin: 10px 30px 30px 30px;
        font-size: small;
    }

    #textblock
    {   
        width: 350px;
        height: fit-content;
        text-align: left;
    }

    #buttonblock
    {
        text-align: center;
        width: 80px; height: 30px;
        padding: 0;
        margin: 5px 30px 0px 30px;
        border: 2px solid #9999ff;
        background-color: black;
        color:#9999ff;
        font-weight: 100;
        font-size: small;   
    }

    #buttonblock:hover
    {
        transition: 0.8s;
        transition-timing-function: ease-in-out;
        border: none;
        background-color: rgb(208, 220, 230);
        color:#0000B8;
        text-decoration: none;
        font-weight: 100;
        font-size: small;
        border: 2px solid black;
    }

    #projectblock
    {   
        padding-top: 200px;
        width: fit-content; height: fit-content;
        display: table;
        margin-right: auto;
        margin-left: auto;        
    }

    #notimgblock
    {
        float: right;
    }

    #thumbnail
    {
        border: 4px solid black;
    }

    #thumbnail:hover
    {
        transition: 0.8s;
        transition-timing-function: ease-in-out;
        border: 4px solid #9999ff;
    }
/* End Of CSS of Content Thumbnail */


/* CSS of Video Display */

    #vidblock
    {   
        margin: 20px 15px 5px 15px;    
        text-align: center;   
    }

    #notvidblock
    {
        display: table;
        margin-right: auto;
        margin-left: auto;
    }
/* End Of CSS of Video Display */


/* CSS of Long Text Page */
    .longtextblock
    {
        display: table;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
        width: 800px; height: fit-content;
    }

    .longtextblock p
    {
        text-align: left;
        font-weight: 400;
    }
/* End Of CSS of Long Text Page */