/* ---------------------------------------------------- */
    /* ---------------   GENERAL LAYOUT   ----------------- */
    /* ---------------------------------------------------- */
    body { 
        width:100%; 
        margin:0px;
    }
    .container-flex { 
        margin-left: 0px; 
        width: 100%;
    }
    a {
        color: rgb(255, 255, 255);
    }
    h2 {
        font-family:'Andale Mono', 'Arial Narrow Bold', 'Tahoma regular','Lucida Console','Calibri', sans-serif;
        font-size: 1em;
        text-align: center;
        padding: 5px 10px 5px 20px;
        width: 100%;
        display: inline-block;


        
        border-radius: 5px;
    }
    .zindexAtTop{
                position: relative; 
                z-index: 3;
            }
    #mainBody, #footerAlign, #sideNavBar{
        position: relative;
        z-index: 0;
        top:80px;
    }
    .navbar {
        position: fixed;
        right: 0%;
        top: 3px;
    }
    .p-4 {
        position: fixed;
        z-index: 2;
        top:70px;
        left:5%;
        width: 90%;
        height: 200px;

        border-width:0px 0px 5px 0px;
        border-style: solid;
        border-color: rgb(15, 15, 15);
        border-radius: 0px 0px 10px 10px;
        box-shadow: 0px -10px 70px rgb(51, 51, 51) inset;
        background-color: rgb(134, 134, 146);
        display: none;
        }

        #footerAlign {
            margin-top: -5px;
            box-shadow: 0px -5px 20px rgba(41, 46, 43, 0.718);
        }
    /* --------------------------------- */  

    #dropDown { 
        position: fixed;
        z-index: 2;
        top:-70px;
        width:95%;
        /* height:33px; */
        margin-left: auto;
        margin-right: auto;
        
        border-width: 0px 0px 5px 0px;
        border-style: solid;
        border-color: rgb(110, 11, 202);
        box-shadow: 0px 5px rgb(195, 195, 195), 0px 5px 0.5px rgb(195, 195, 195), 0px 9px rgb(216, 216, 216); 
        
        }
    #dropDown ul{ height:30px; } 

    #dropDown p {
        font-family:'Andale Mono', 'Arial Narrow Bold', 'Tahoma regular','Lucida Console','Calibri', sans-serif;
        font-size: 1em;
        text-align: center;
        padding: 5px 10px 5px 20px;
        margin-top: 10px;
        margin-bottom: 0px;
        width: 100%;
        display: inline-block;
        color: #ffffff;

        position: relative;
        top:-15px;
        
        border-radius: 5px;
        background-color: rgb(110, 54, 189);
        }
    #dropDown .unactiveTab{background-color: rgb(110, 11, 202);}
    #dropDown .unactiveTab:hover{background-color: rgba(120, 13, 219, 0.718); cursor: pointer;}
    #dropDown .unactiveTab:active {background-color: rgba(144, 65, 218, 0.933);}
    
    #dropDown .activeTab{color:#000000; background-color: rgb(255, 255, 255); }
    #dropDown .activeTab:hover{color:#000000; background-color: rgb(255, 255, 255); }
    
    .button {background-color: rgb(56, 56, 56); border-radius: 20px;}
    /*--------------------------------------------*/
    
    #menuBarBlack {
        position: absolute;
        z-index: 1;
        top:70px;

        width:110%;
        height: 100vw;
        background-color:rgba(0, 0, 0, 0.576);
        box-shadow: 0px -10px 70px rgba(41, 46, 43, 0.718) inset;
        display:none;
        } 

    /* ---------------------------------------------------- */
    /* ---------------   BACKGROUND   --------------------- */
    /* ---------------------------------------------------- */
    #invisibleVideoOverlay-leftSide {
        position: absolute;
        z-index: 1;
        width:10%;
        top:70px;
        height: 600px;
        /* background-color:#00000093; */
        } 
    #invisibleVideoOverlay-rightSide {
        position: absolute;
        right:0px;
        z-index: 1;
        width:14.5%;
        top:70px;
        height: 600px;
        /* background-color:#ffffff00; */
        } 

    #contentBackground{
                width: 100%;
                position: absolute;
                z-index: -3;
            }
            video  {
                width: 100%;
                position: absolute;
                z-index: -3;
            }
    #homeBackground, #homeBackground2, #homeBackground3, #contentBackground {
                display: none;
            }

    #homeBackground {
            display: initial;
        }
    /* ---------------------------------------------------- */
    /* ---------------   TOP NAVIGATION LAYOUT   ---------- */
    /* ---------------------------------------------------- */
    .op-logo, .nav-item{
        font-family: 'Futura', 'Helvetica', 'Arial', sans-serif;
    }   
    .op-logo{   margin: 10px;
                border-width: 0px 0px 10px 0px;
                border-style: solid;
                border-color: rgb(255, 206, 0);
                padding-left: 20px;
                padding-right: 50px;
            }
    .nav {border-width: 0px 0px 10px 0px;
        border-style: solid;
        border-color: rgb(110, 11, 202);
        }
    #navBar {
                position: fixed;
                z-index: 3;
                border-width: 0px 0px 10px 0px;
                border-style: solid;
                border-color: rgb(189, 189, 189);
                box-shadow: 0px 10px 25px rgb(53, 53, 53);
                padding-top: 10px;
                font-family:'Futura';
                font-size: 1.3em;
            }
    /*--------------------------------------------*/
    .nav-item{
                background-color: rgb(110, 11, 202);
                margin-left: 10px;
                margin-top: 12px;
            }
    .nav-item:hover{
                color: #ffffff;
                background-color: rgba(120, 13, 219, 0.718); 
                cursor: pointer;
                border-width: 1px 1px 0px 1px;
                border-style: solid;
            }
    .nav-item:active {
                color: #ffffff;
                background-color: rgba(144, 65, 218, 0.933);
            }

    /* ---------------------------------------------------- */
    /* ---------------   MAIN BODY LAYOUT   --------------- */
    /* ---------------------------------------------------- */   

    #tabHome {
        position: relative;
        left:-50px;
            z-index: 0;
            width:75%;
            padding: 0px 20px 0px 20px;
            display: initial;
            }
    #header1, #header2 {
            font-family:'Andale Mono', 'Arial Narrow Bold', 'Tahoma regular','Lucida Console','Calibri', sans-serif;
            background-color: rgba(255, 255, 255, 0.631);
            width: 50%;
            box-shadow: 0px 10px 25px rgb(53, 53, 53);
            }
    #header1, #header2, #headerContent {
            font-weight: bold;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            }
    #header1{  
            color:#0b5ef7;
            font-size: 2.8em;
            border-radius: 15px;
        }
    #header2{ 
            color:#0944b3; 
            font-size: 2.0em;
            border-radius: 10px;
        }
    #headerContent{ 
            color:#ffffff;
            background-color: rgba(66, 66, 66, 0.847); 
            font-size: 1.5em;
            font-family:'Futura', 'Heiti TC', 'Arial Rounded MT', 'Malayalam MN', 'Gill Sans MT', 'Harmonia Sans';
            line-height: 1.5em;
            font-weight: 100;
            margin-bottom: 30px;
            width: 90%;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0px 10px 15px rgb(141, 128, 128), 22px -10px 70px rgba(41, 46, 43, 0.718) inset;
        }

    /* FIX NAMES (BELOW) */
    /* --------------------------------- */

    #tabContent{
        position: static;
        
        z-index: 0;
        width:95%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 70px;
        display: none;
    }
    
    #coding { 
        display: none;
    }
    #photo { 
        display: none;
    }
    #illustration { 
        display: none;
    }
    #math-website { 
        display: none;
    }
    
    h4 a {
        font-family:'Andale Mono', 'Arial Narrow Bold', 'Tahoma regular','Lucida Console','Calibri', sans-serif;
        font-weight: bold;
    }
    /* FIX NAMES (BELOW) */
    /* --------------------------------- */

    .bodyColumn {
        position: static;
        z-index: 0;
        width:100%;
        padding: 20px;
        background-color:rgb(224, 227, 228); 
        border-radius: 0px 0px 10px 10px;
        box-shadow: 0px 10px 30px rgb(133, 133, 133);
    }

    .bodyColumn p{ 
        font-family:'Futura', 'Heiti TC', 'Arial Rounded MT', 'Malayalam MN', 'Gill Sans MT', 'Harmonia Sans';
        font-weight: bold;
        font-size: 1.8em;
        text-align: center;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        padding: 0px 20px 10px 20px;
    }
    .bodyColumn li { display: inline-block;}
    .paragraphPurple {
    background-color: rgb(110, 11, 202);
    color: #ffffff;
    box-shadow: 0px -10px 70px rgb(55, 4, 102) inset, 2px 35px 20px rgb(109, 109, 109);
    border-radius: 5px;
    }
    .bodyColumn .portfolioLinks{        
    width: 40%;
    margin: 10px;
    border-radius: 10px;
    min-width: 240px;
    }

    .bodyColumn #portfolioLinks2{        
    width: 100%;
    margin: 10px;
    border-width:3px;
    border-style: solid;
    border-color: rgb(0, 0, 0);
    border-radius: 10px;
    }
    #portfolioLinks2{min-width: 225px;}
    .bodyColumn #portfolioLinks2:hover{        
        border-color: rgb(0, 4, 255);
        cursor: pointer;
    }


    /* ---------------------------------------------------- */
    /* ---------------   BODY SIDEBAR: external links   --- */
    /* ---------------------------------------------------- */
    #background{
        position: fixed;
        right: 30px;
        top:80px;
        z-index: 1; 
        width:9%;
        height:200px;
        border-radius: 0px 0px 10px 10px;
    }   
    #sideNavBar {
        position: fixed;
        right: 30px;
        z-index: 2;

        font-family:'Futura', 'Heiti TC', 'Arial Rounded MT', 'Malayalam MN', 'Gill Sans MT', 'Harmonia Sans';
        color: #ffffff;
        font-size: 0.9em;
        width:9%;
        height: 200px;
        padding: 30px 10px 0px 30px;
        background-color:rgba(214, 214, 214, 0.576);
        box-shadow: 0px -10px 70px rgba(41, 46, 43, 0.718) inset, 10px 0px 25px rgb(31, 31, 31), -10px 0px 25px rgb(31, 31, 31);
        border-radius: 0px 0px 10px 10px;
        }
    
    #header{ 
            text-decoration: underline;
            line-height: 2em;
        }
    .extPortfolioLinks{        
            width: 65%;
            min-width: 35px;
            border-radius: 10px;
            margin-bottom: 10px;
            margin-right: auto;
            margin-left: auto;
            }   
    /* --------------------------------- */

    /* ---------------------------------------------------- */
    /* ---------------   FOOTER LAYOUT   ------------------ */
    /* ---------------------------------------------------- */   

    #colorsBar { 
            position: static;
            z-index: -4;
            width: 100%;
            height: 0px;
            margin-left: auto;
            margin-right: auto;
            display: -webkit-flex; /* Safari */
            -webkit-flex-direction: row; /* Safari 6.1+ */
            display: flex;
            flex-direction: row;
        } /* GOTTEN FROM w3Schools for flex-direction */
    #colorsBar div { 
        margin:auto;  
        padding: 0px 10px 10px 0px;
        
        }
    
    #colorBar1{
        width: 25%;
        background-color: rgb(89, 0, 97); 
        position: static;
        z-index: 2;
        display: inline-block;
        width: 100%;
        height: 0px;
        }
    #colorBar2{
        width: 25%;
        background-color: rgb(114, 0, 124); 
        position: static;
        z-index: 2;
        display: inline-block;
        width: 100%;
        height: 0px;
        }
    #colorBar3{
        width: 25%;
        background-color: rgb(147, 0, 160); 
        position: static;
        z-index: 2;
        display: inline-block;
        width: 100%;
        height: 0px;
        }
    #colorBar4{
        width: 25%;
        background-color: rgb(181, 0, 197); 
        position: static;
        z-index: 2;
        display: inline-block;
        width: 100%;
        height: 0px;
        }
/* --------------------------------- */
    #sideNavBar2 {
        display: none;
        }
/* --------------------------------- */
    #footer {
        position: static;
        z-index: 2;
        
        font-family:'Andale Mono', 'Arial Narrow Bold', 'Tahoma regular','Lucida Console','Calibri', sans-serif;
        padding: 10px 10px 10px 0px;
        background-color: rgb(31, 38, 48);
        box-shadow: 0px -80px 90px rgba(81, 85, 88, 0.718) inset;
        color: #ffffff;
        text-align: center;
        border-width:5px 0px 0px 0px;
        border-style: solid;
        border-color: rgb(171, 171, 171);
                    
        }

    /* ---------------------------------------------------- */
    /* ---------------   MEDIA QUERIES   ------------------ */
    /* ---------------------------------------------------- */   
    /*         (IN ORDER OF THE SCREEN DOWNSIZING)          */ 

    /* BODY */
    @media only screen and (max-width: 1205px) { /*SUBTRACTED 5PX */

        #navBar {
            font-size: 1.2em;
        }
       /*
        #header1{  
            font-size: 2.3em;
        }
        #header2{ 
            font-size: 1.5em;
        }
        */
        #headerContent{ 
            font-size: 1.3em;
        }
        
    }
    @media only screen and (max-width: 1175px) { /*SUBTRACTED 5PX */

        #navBar {
            font-size: 1.2em;
        }
       /*
        #header1{  
            font-size: 2.3em;
        }
        #header2{ 
            font-size: 1.5em;
        }
        */
        #headerContent{ 
            font-size: 1.29em;
        }
        
    }
    @media only screen and (max-width: 1115px) { /*SUBTRACTED 5PX */

        #navBar {
            font-size: 1.0em;
        }
       
        #header1{  
            font-size: 2.3em;
        }
        #header2{ 
            font-size: 1.5em;
        }
        #headerContent{ 
            font-size: 1.29em;
        }
        
    }
    @media only screen and (max-width: 1050px) { /*SUBTRACTED 5PX */

        #navBar {
            font-size: 1.0em;
        }
       
        #header1{  
            font-size: 2.3em;
        }
        #header2{ 
            font-size: 1.5em;
        }
        #headerContent{ 
            font-size: 1.2em;
        }
        
    }

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

        #header1{  
            font-size: 1.8em;
        }
        #header2{ 
            font-size: 1.0em;
        }
        #headerContent{ 
            font-size: 1.1em;
        }
        #sideNavBar{
            padding-left: 20px;
            padding-right: 0px;
            margin: auto;
        }
    }


/*----------------------------------------------------------------*/
    @media only screen and (max-width: 862px) { 
       
        .nav-item, #sideNavBar, #background {
            display: none;
        }

        #tabHome {
            left:0px;
        }


        #sideNavBar2 {
            display: initial;
            }
        #sideNavBar2 p{
            display: inline-block;
            margin: 10px 0px 0px 0px;
            padding: 0px;

            background-color: rgba(255, 255, 255, 0.357);
            border-width: 5px;
            border-style: solid;
            border-color: rgba(255, 255, 255, 0.239);
            border-radius: 10px;
            }
        .extPortfolioLinks2{        
            width:50px;
            border-radius: 10px;
            margin-bottom: 3px;
            margin-right: auto;
            margin-left: auto;
            }   
    }

    @media only screen and (min-width: 862px) { 
        /* #dropDown, .off {
            display: none;
        } */
        .navbar {
            display: none;
        }
    }
/*----------------------------------------------------------------*/



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

        #navBar {
            font-size: 0.8em;
        }
    }


/*Changing backgrounds*/
    @media only screen and (max-width: 767px) { 

        #homeBackground, #contentBackground{
            
            z-index:-1;
            display: none;
        }
        #homeBackground2{
            display: initial;
            width: 100%;
            position: absolute;
            z-index: -3;
        }
        #header1{  
            font-size: 2.5em;
        }
        #header2{ 
            font-size: 1.7em;
        }
        #headerContent{ 
            font-size: 1.5em;
        }
    }
    @media only screen and (max-width: 664px) { 

        #homeBackground, #homeBackground2, #contentBackground{
            display: none;
        }
        #homeBackground3{
            display: initial;
            width: 100%;
            position: absolute;
            z-index: -3;
        }
    }

/*Changing image placement*/
@media only screen and (max-width: 495px) { 

    .bodyColumn p{ 
        width: 100%;
    }

    #header1{  
        font-size: 1.5em;
        padding-left: 5px;
        padding-right: 5px;
        width:80%;
    }
    #header2{ 
        font-size: 1.1em;
        width:60%;
    }
    #headerContent{ 
        font-size: 1.1em;
    }

}
@media only screen and (max-width: 380px) { 

    .bodyColumn p{
        font-size: 1.5em;
        width: 100%;
    }

}
@media only screen and (max-width: 370px) { 

    .bodyColumn p{
        font-size: 1.3em;
        width: 100%;
    }

}
@media only screen and (max-width: 360px) { 

    .bodyColumn p{
        font-size: 1.1em;
        width: 100%;
    }

}
@media only screen and (max-width: 359px) { 

    .portfolioLinks{
        position: relative;
        left:-5%;
    }

}
@media only screen and (max-width: 345px) { 

    .portfolioLinks{
        position: relative;
        left:-8%;
    }

}
@media only screen and (max-width: 330px) { 

    .portfolioLinks{
        position: relative;
        left:-11%;
    }

}
@media only screen and (max-width: 325px) { 

    .portfolioLinks{
        position: relative;
        left:-13%;
    }

}

/*Changing screen height */
@media only screen and (max-height: 650px), screen and (max-width: 768px){ 

    #footerAlign {
        margin-top: 70px;
        box-shadow: 0px -10px 300px rgba(41, 46, 43, 0.718);
    }

    #header1{  
        font-size: 2.3em;
    }
    #header2{ 
        font-size: 1.5em;
    }
    #headerContent{ 
        font-size: 1.3em;
    }
}


/*Changing font size and Side NavBar dimensions FOR BIGGER SCREENS (bigger than 13-inches)*/
@media only screen and (min-height: 655px){ /*745*/

    #headerContent {
        margin-bottom: 110px;
    }
    #headerContent{ 
        font-size: 1.4em;
    }

}

@media only screen and (min-height: 790px){ 

    #headerContent {
        margin-bottom: 190px;
    }
    #headerContent{ 
        font-size: 1.7em;
    }
}

@media only screen and (min-width: 1290px){ 

    .extPortfolioLinks{ 
        position: relative;
        top:-10px;
        left:10px;      
        width: 45%;
        }   

}
@media only screen and (min-width: 1290px ), screen and (min-height:745px){ 

    .bodyColumn {
        padding-bottom: 150px;
        }
    .panel-heading { 
        margin-top: 55px; 
        font-size: 1.2em;
        }

}

/*---- NO JAVASCRIPT -----*/
#noJS-Black {
    position: fixed;
    z-index: 3;
    top:0px;

    width:100%;
    height: 100%;
    background-color:rgba(0, 0, 0, 0.927);
    } 
#noJS-Content {
    position: relative;
    z-index: 3;
    top:25%;

    font-weight: bold;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

        color:#ffffff;
        background-color: rgba(85, 128, 160, 0.847); 
        font-size: 2.5em;
        font-family:'Futura', 'Heiti TC', 'Arial Rounded MT', 'Malayalam MN', 'Gill Sans MT', 'Harmonia Sans';
        line-height: 1.5em;
        font-weight: 100;
        margin-bottom: 30px;
        width: 90%;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0px 10px 15px rgb(2, 2, 2), 92px -10px 200px rgba(41, 46, 43, 0.718) inset;
    }
@media only screen and (max-width: 695px) { 

    #noJS-Content {

            font-size: 1.8em;
        }
}
@media only screen and (max-width: 360px) { 

    #noJS-Content {

        font-size: 1.4em;
    }
}