root {

}

body {
    width: 100%;
    height: 100vh;
    min-height: 100%;
    overflow-x: hidden;
    /*
     Flex Inspiration from https://itq.eu/knowledge/basic-page-layout-using-css-flex/
     */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    background: #41363a;
    background-image: repeating-conic-gradient(#41363a 0 15deg, #34312a 16deg 30deg);
    background-attachment: fixed;
    /*background-color: var(--md-default-bg-color);*/

}

header {
    height: 50px;
}

main {
    flex: auto;

}

nav.navbar {
    display: flex;
}

main.container {
    margin-top: 50px;
    padding-bottom:50px;
    width: 100%;
}

img {
    max-width: 100%;
}

.bg-black {
    background-color: #000;
}
img.logo_1
{
    font-size: 8em;
    background-color: #18191f;
    color: #fff;
    box-shadow: 2px 2px 2px #00000080, 10px 1px 12px #00000080,
    2px 2px 10px #00000080, 2px 2px 3px #00000080, inset 2px 2px 10px #00000080,
    inset 2px 2px 10px #00000080, inset 2px 2px 10px #00000080,
    inset 2px 2px 10px #00000080;
    border-radius: 29px;
    padding: 11px 19px;
    margin: 0 40px;
    animation: animate 3s linear infinite;
    text-shadow: 0 0 50px #0072ff, 0 0 100px #0072ff, 0 0 150px #0072ff,
    0 0 200px #0072ff;
}
img.logo_1{
    animation-delay: 0.3s;
}

@keyframes animate {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}