/*Initial CSS Start*/
*, html
{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    vertical-align: middle;/*This is mainly added for the image in between text to align in the middle*/
}
/*Initial CSS End*/

/*General CSS Start*/
.light
{
    color: beige;
}
/*General CSS End*/

/*Nav Start*/
#nav
{
    /*height: 25px;*/
    margin: 0;
    padding: 0;
    background : linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab );
    background-size: 400% 400%;
    -webkit-animation: gradientBG 10s ease infinite;
            animation: gradientBG 10s ease infinite;
}

@-webkit-keyframes gradientBG
{
    0%
    {
        background-position: 0% 50%;
    }
    50%
    {
        background-position: 100% 50%;
    }
    100%
    {
        background-position: 0% 50%;
    }
}
@keyframes gradientBG
{
    0%
    {
        background-position: 0% 50%;
    }
    50%
    {
        background-position: 100% 50%;
    }
    100%
    {
        background-position: 0% 50%;
    }
}

#logo-img
{
    padding-top: 4px;
    margin: 0px;
    height: auto;
    width: 40px;
}

#logo
{
    margin-left: 10px;
    background: white;
    width: 40px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid blueviolet;
}

#logo:hover
{
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(167, 85, 245, 0.671);
}

#td-logo
{
    padding-top: 5px;
    padding-bottom: 5px;
    width: 40px;
}

/*    box-shadow: 2px 2px 1px 1px rgba(255, 255, 255, 0.1);*/

#burg-img
{
    padding-top: 5px;
    padding-left: 5px;
    margin: 0px;
    height: auto;
    width: 30px;
}

#burg
{
    margin-right: 10px;
    background: white;
    width: 40px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid blueviolet;
}

#burg:hover
{
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(167, 85, 245, 0.671);
}

#td-burg
{
    padding-top: 5px;
    padding-bottom: 5px;
    width: 40px;
}

#td-header
{
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: 'Courier New', Courier, monospace;
}
/*Nav End*/

/*Button Start*/
.button
{
    width:max-content;
    margin: 8px auto 8px auto;
    padding: 5px; 
    border: 1px solid blueviolet;
    border-radius: 5px;
}

.button:hover
{
    background: linear-gradient(65deg, #ee7752, #e73c7e, #23a6d5, #23d5ab );
    color: beige;
}

a
{
    font-family: sans-serif, monospace;
    font-style: normal;
}

a:link
{
    color: black;
}

a:visited
{
    color: black;
}

/*
a:hover
{
    color: beige; 
        I commented it because this changed the text color even if the mouse was on directly
        over the text
        That is the text color changes if the mouse goes to same row as the link
        This caused the link to change to white color and this caused the text to become invisible
        Because the background was alo white
    
}
*/

a:active
{
    color: black;
}
/*Button End*/

/*Container Start*/
.container
{
    width: 700px;
    border: 1px solid blueviolet;
    border-radius: 5px;
    padding: 5px;
    margin: 8px auto 8px auto;
    text-align: left;
}
/*Container End*/

/*Image Container Starts*/

div.image
{   
    border-radius: 5px;
    padding: 5px;
    background-color: white;
    margin: 8px auto 8px auto;
/*    -webkit-filter: drop-shadow(0px 1px 10px #2f4f4f);
    -ms-filter: drop-shadow(0px 1px 10px #2f4f4f);
    -o-filter: drop-shadow(0px 1px 10px #2f4f4f);
    -moz-filter: drop-shadow(0px 1px 10px #2f4f4f);
    filter: drop-shadow(0px 1px 10px #2f4f4f);   */
    width: 302px;
    height: auto;
}

.image>img
{
    width: 300px;
}

.image>p
{
    padding-top: 6px;
}

/*Image Container Ends*/

/*Video Container Starts*/

.video
{
    border-radius: 5px;
    padding: 5px;
    margin: 8px auto 8px auto;
/*    -webkit-filter: drop-shadow(0px 1px 10px #2f4f4f);
    -ms-filter: drop-shadow(0px 1px 10px #2f4f4f);
    -o-filter: drop-shadow(0px 1px 10px #2f4f4f);
    -moz-filter: drop-shadow(0px 1px 10px #2f4f4f);
    filter: drop-shadow(0px 1px 10px #2f4f4f); */
}

#video
{
    width: 560px;
}

.image>p
{
    padding-top: 6px;
}


/*Video Container Ends*/

/*Emp Styles Start*/
#img-emp
{
    width: 24px;
    height: auto;
    border: 1px solid blueviolet;
    border-radius: 3px;
    background-color: rgba(137, 43, 226, 0.1);
}
em
{
    border: 1px solid blueviolet;
    background-color: rgba(137, 43, 226, 0.1);
    border-radius: 3px;
    height: max-content;
    width: max-content;
    padding-left: 2px;
    padding-right: 2px;
}
/*Emp Styles End*/


/*Popup Style Start*/
.popup
{
    position: absolute;
/*    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    background-color: transparent;
    border-radius: 3px;
    border: 1px solid blueviolet;
    
}
/*Not that we set the 'position' of body to relative
  And the 'position' of div as absolute to place it on-top of the body
  
  Note that 'display :flex or grid' should have it's parent element's position 'set' to relative*/
h5#popup-h5
{
    padding: 5px 0px 0px 0px;
    font-weight: 100;
}

/*

These are example for flex and grid
.popup2
{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    height: 9px;
    width: 9px;
}

.popup3
{
    display: grid;
    place-items: center;
}

*/

/*Pop Style End*/



/*Footer Start*/
.footer
{
    background: rgb(78, 78, 78);
    height: 100px;
}

/*
#id-footer-left
{

}

#id-footer-right
{

}

#id-footer-copyright
{

}
*/

/*Footer End*/