:root {
    --filter-height: 30px;
    --filter-font-size: 11pt;
    --data-font-size: 12pt;
    --color-background: #222529;
    /*--color-border: #353a40;*/
    --color-border: #454a50;
    --color-highlight: dodgerblue;
    --color-text: white;
    --color-text-tooltip: dodgerblue;
}



@font-face {
    font-family: 'Geist Mono';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url(/static/fonts/webfonts/geist-mono-latin-400-normal.woff2) format('woff2'), url(/static/fonts/webfonts/geist-mono-latin-400-normal.woff) format('woff');
}

html,
body {
    margin: 0;
    font-family: "Geist Mono", monospace;
    color: #fff;
    background: darkslateblue;
    /*height: 100%;*/
}

.topnav {
    position: fixed;
    top:0;
    width:100vw;
    display: none;
    font-family: "Poppins", sans-serif ;
    letter-spacing: 1px;
   /* background-color: white;*/
    transition: 0.3s ease-out;
    backdrop-filter: blur(8px) brightness(1.2);
    -webkit-backdrop-filter: blur(8px) brightness(1.2);
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    mask-image: linear-gradient(black 70%, transparent);
    -webkit-mask-image: linear-gradient(black 70%, transparent);
}

.topnav .logo {
    margin: 25px;
    display: none;
}

.topnav .menu {
    display: none;
    margin-top: 25px;
    flex-grow: 1;
    justify-content: flex-end;
    /*position: absolute;*/
}


.topmenu {
    list-style-type: none;
    margin: 0;
    display: none;
    @media (min-width: 200px) {
        display: flex;
    }
    li {
        margin-left: 20px;
    }
}

a {
    color: inherit;
    text-decoration: none;
}

a {
    background:
            linear-gradient(
                    to left,
                    rgba(255, 255, 255, 1),
                    rgba(255, 255, 255, 1),
                    rgba(255, 255, 255, 1)
            );
    background-size: 0 2px, 100% 2px;
    background-position: 0 100%, 100% 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
}
a:hover {
    background-size: 100% 2px, 0 2px;
}

.topnav .right {
    display: flex;
    justify-content: flex-end;
    padding-right: 25px;
    padding-left: 25px;
    border-left: solid #ffffff 1px;
    margin: 25px 25px 25px 25px;
}

.backdrop {
    /* Background pattern from Toptal Subtle Patterns */
    /*background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)), url("/static/images/backdrop.webp") ;*/
    background: darkslateblue;
    height: 100%;
    width: 100%;
    align-items: center;
    background-size: cover;
}

.marque {
    font-family: monospace;
    letter-spacing: 5px;
    text-align: center;
    padding: 25px 25px 25px 25px;
}

.image {
    text-align: center;
    align-content: center;
    align-items: center;
}

.paragraph {
    text-align: left;
    padding-bottom: 10px;
    padding-top: 10px;
}

span {
    padding-bottom: 10px;
    padding-top: 10px;
}