/**
 * Clicky Menus v1.2.0
 */

	/**
 * Initial state, hidden off screen
 */
 .clicky-menu ul {
    position: absolute;
    top: 100%;
    left: 0;
    visibility: hidden;
    /*[1]*/
}

.clicky-menu>li {
    position: relative;
}

/**
* No JS fallback
*
* Triggers menus on hover rather than click. Supports keyboard navigation in modern browsers.
*/
.clicky-menu.no-js li:hover>ul {
    visibility: visible;
}

.clicky-menu.no-js li:focus-within>ul {
    /*[2]*/
    visibility: visible;
}

/**
* Open/Close Menu Behavior with JS
*/
.clicky-menu ul[aria-hidden="false"] {
    visibility: visible;
}

/* Prevent offscreen-submenus */
.clicky-menu .sub-menu--right {
    left: auto !important;
    right: 0 !important;
}

/**
* Footnotes
*
* [1] Using `visibility` instead of `display` allows for easier transitions and animation of submenus
* [2] Must be a separate ruleset so that hover works in non-modern browsers
*/


/* DEMO CSS */
body {
    margin: 0;
    padding-top: 0px;
    /* Ensure content is not hidden under the fixed menu */
    min-height: 100vh;
    background-color: #ffffff;
    /* Optional background color */
    /*background: linear-gradient(-37deg, teal, purple, orange) center/cover no-repeat; */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen-Sans, Ubuntu, Cantarell,
        "Helvetica Neue", sans-serif;
}


.scrollable-div {
    margin-top: 170px;
    overflow-y: auto;
    padding: 20px;
}

/* Hidden SVG used for down arrows */
svg[hidden] {
    display: none;
    position: absolute;
}

.top-centered-div {

    background-color: #8c0606;
    width: 100%;
    xheight: 80px;
    /* Adjust height as needed */
    text-align: center;
    color: white;
    font-size: 20px;
    line-height: 80px;
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}



.site-navigation {

    width: 100%;
    position: fixed;
    top: 148px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #eee;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    padding: 5px 0;
    height: 40px;

    display: flex;
    align-items: center;
    height: 30px;

    padding: 2px 0;
    margin: 0 auto;
    justify-content: center;
    border-radius: 4px;
    */
}

.clicky-menu {
    xjustify-content: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 540px) {
    .clicky-menu {
        display: flex;
    }
}

/* General Link & Button Styles */
.clicky-menu a,
.clicky-menu button {
    margin: .25em;
    padding: 0.5em;
    background: transparent;
    color: #000;
    font-family: inherit;
    text-decoration: none;
    border-radius: 3px;
    font-size: 0.85em;
    /* Reduce font size */
}

.clicky-menu a:hover,
.clicky-menu button:hover {
    background: #ffffff;
}

.clicky-menu a:focus,
.clicky-menu button:focus {
    outline: .125em dotted rgb(44, 44, 44);
    outline-offset: -.125em;
}

/* Top Level Items */
.clicky-menu>li {
    flex: 1 1 auto;
    display: flex;
    justify-content: stretch;
    flex-wrap: wrap;
}

.clicky-menu>li>a,
.clicky-menu>li>button {
    flex: 1 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: 0;
    /*font-size: inherit; */
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
}

@media (min-width: 540px) {

    .clicky-menu>li>a,
    .clicky-menu>li>button {
        justify-content: center;
    }
}

/* Icon */
.clicky-menu svg {
    width: 1em;
    height: 1em;
    margin-left: .5em;
}

.clicky-menu [aria-expanded="true"] svg {
    transform: scaleY(-1);
}

/* Submenu Styles */
.clicky-menu ul {
    min-width: 100%;
    margin-top: .25em;
    padding: 0;
    list-style: none;
    background-color: #eee;
    border-radius: 3px;
}

@media (min-width: 540px) {
    .clicky-menu ul {
        box-shadow: 2px 4px 4px rgba(0, 0, 0, .2);
        transform: translateY(1em);
        opacity: .5;
        transition-property: transform opacity;
        transition-duration: .1s;
    }
}

/* Ensure no-js support works by covering the .25em margin-top gap between submenu and parent item with a pseudo-element that extends the "surface" of the submenu. If you don't care as much about no-js mode, you could also just set margin-top: 0 when .no-js is present.  */
.clicky-menu.no-js ul::before {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: .25em;
    top: -.25em;
}

/* Responsive Submenu Behavior */
.clicky-menu ul[aria-hidden="false"] {
    position: static;
    width: 100%;
    flex: 0 0 auto;
}

@media (min-width: 540px) {
    .clicky-menu ul[aria-hidden="false"] {
        position: absolute;
        width: auto;
        transform: translateY(0);
        opacity: 1;
    }
}

/* Submenu Links */
.clicky-menu ul a {
    display: block;
    padding-top: .375em;
    padding-bottom: .375em;
}

@media (min-width: 540px) {
    .clicky-menu ul a {
        padding: .375em 1em;
        white-space: nowrap;
    }
}

.github {
    position: fixed;
    width: 90%;
    left: 5%;
    bottom: 10px;
    text-align: center;
    color: #fff;
}

.github a {
    color: inherit;
}



        .img1 {
        border-radius: 4px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    }