@import url("style/site-color-modes.css");


/*-------------------------------------------------------------------------------------------------*/
/* Whole document */
/*-------------------------------------------------------------------------------------------------*/
* {
    /*
    box-sizing: border-box;
    --bg-color: rgb(20, 40, 60);
    --bg-nav: rgba(20, 50, 75, 0.5);
    --nav-hover: rgb(136, 10, 140);
    --text-color: white;
    */
    box-sizing: border-box;
    --bg-color: rgb(67, 0, 51);
    /*color: rgb(193, 0, 164);*/
    --bg-nav: rgba(20, 50, 75, 0.5);
    --nav-hover: rgb(88, 0, 70);
    --text-color: white;

    --nav-text-color: rgb(234, 6, 200);

    /* Tests */
    --bg-color: rgb(63, 1, 51);
    /*color: rgb(234, 6, 200);*/
    
    --bg-color: rgb(241, 94, 219);
    --main-bg-color: rgb(63, 1, 51);
    /*color: rgb(106, 0, 79);*/
    --bg-color: white;
}


:root::weblit-scrollbar {
    display: none;
}


:root {
    -ms-overflow-style: none;
    scrollbar-width: none;
}



/*-------------------------------------------------------------------------------------------------*/
/* Body */
/*-------------------------------------------------------------------------------------------------*/
body {
    margin: 0px;
    padding: 0px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--bg-color);
}


/*-------------------------------------------------------------------------------------------------*/
/* Header */
/*-------------------------------------------------------------------------------------------------*/
header {
    /*height: 20vh;*/
    height: 100px;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

/*
header #headerBackgroundImage {
    display: flex;
    width: 100%;
    height: 100%;
}
    */

/*
header #headerBackgroundImage .bgImage {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    align-items: center;
    background-repeat: no-repeat;
}
*/



/*-------------------------------------------------------------------------------------------------*/
/* Navigation top and navigation top hamburger menu in different css files */
/*-------------------------------------------------------------------------------------------------*/


/*-------------------------------------------------------------------------------------------------*/
/* Main content */
/*-------------------------------------------------------------------------------------------------*/
main {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.2em;
    font-weight: 500;
    max-width: 1000px;
    background: rgb(229, 227, 229);
    margin: auto;
    margin-top: 50px;
    margin-bottom: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
    
}

main article {
    background-color: rgb(190, 190, 190);
    overflow-wrap: break-word;
    overflow-wrap: break-word;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: auto;
    margin-bottom: 00px;
    margin-top: 0px;
    padding: 10px;  
    background: rgba(0, 0, 0, 0.149);
}


main article section a {
    color: black;
    color: rgba(8, 0, 255, 0.726);
}


main article section {
    margin-top: 50px;
    margin-bottom: 50px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin: 0px;
    padding: 0px;
    padding: 10px;
    padding: 20px;
    margin: 50px;

    border: 2px solid rgb(174, 0, 255);
    border-radius: 50px;
    
    text-shadow: 4px 4px 4px rgba(255, 0, 247, 0.299);
    box-shadow: 0 0 20px rgb(255, 0, 247);
    background: rgb(203, 248, 246);
}


main article section:hover {
    background-color: rgba(0, 195, 255, 0.433);
    background-color: rgba(255, 0, 247, 0.694);
    background-color: rgba(0, 187, 255, 0.381);
}



/*-------------------------------------------------------------------------------------------------*/
/* Footer */
/*-------------------------------------------------------------------------------------------------*/

footer {
    margin: 0px;
    padding: 10px;
    z-index: 1002;
}


footer p {
    margin: 0px;
    padding-top: 10px;
}


footer a {
    color: black;
}




#topNavBar.scrolled {
    background: black;
    z-index: 2001;
}




