/*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;
    align-self:inherit;
    border: 1px solid blueviolet;
    border-radius: 5px;
}

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

.button:hover>a>h4 { /* how cool is that selecton?!!!!!!!!!!*/
    color: beige;
}
/*I tried .button>a>h4:hover but that resulted in only the color change Right when I hover the mouse over the text itself!.
 * But what I want is the color should change to white when the mouse goes over the div itself(because when the mouse is at teh div only the color changes to a linear gradient so at that time only we need the text to be white so it is more visible)
 * So I tried the above selector .button:hover>a>h4 It worked!!*/


a
{
    font-family: 'Courier New', Courier, 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 also 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*/

/*GlowyContainer Start*/
.glowycontainer
{
    width: 700px;
    border: 1px solid blueviolet;
    border-radius: 5px;
    padding: 5px;
    margin: 8px auto 8px auto;

    background : linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab );
    background-size: 400% 400%;
    -webkit-animation: gradientBG 10s ease infinite;
            animation: gradientBG 10s ease infinite;

    /*The above code requires some dependent code above*/
}
/*GlowyContainer End*/

/*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*/