* {
   /* Nav Bar variables */
   --sbi-nav-height: 45px;
   --sbi-nav-background: #252526;
   --sbi-nav-background-hover: #333333;
   --sbi-nav-text-color: #cccccc;
   --sbi-nav-border-radius: 10px;
   /*--sbi-nav-font: ;*/
   
   /* Footer variables */
   --sbi-footer-min-height: 30px;
   --sbi-footer-background: #252526;
   --sbi-footer-text-color: #cccccc;
   /*--sbi-footer-font: ;*/


   /* General variables */
   --sbi-text-color: #cccccc;
   --sbi-background-color: #252526;
   --sbi-font: Open Sans, sans-serif;
   --sbi-accent-text-color: #A11B60;

   /* Content body variables */
   --sbi-content-body-background-color: #333333;

}

.sbi-ogc-declaration {
   width: 100%;
}

.sbi-ogc-declaration h1 {
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 2px;
   margin-right: 2px;
   color: var(--sbi-accent-text-color);
   font-size: 48px;
}

.sbi-divider {
   width: 100%;
   height: 2px;
   background-color: var(--sbi-accent-text-color);
   margin-top: 10px;
   margin-bottom: 10px;
}

.sbi-hero {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 25%;
   margin-top: auto;
}

.sbi-image {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 60%;
   margin-top: 20px;
   margin-bottom: 20px;
}

.sbi-paragraph {
   font-family: monospace;
   font-size: 20px;
}

.sbi-quote {
   font-family: var(--sbi-font);
   font-size: 10pt;
   font-style: italic;
}
/******************/
/* Navigation Bar */
.sbi-nav-bar {
   list-style-type: none;
   margin: 0px;
   padding: 0;
   display: flex;
   justify-content: space-between;
   border-bottom-left-radius: var(--sbi-nav-border-radius);
   border-bottom-right-radius: var(--sbi-nav-border-radius);

   height: var(--sbi-nav-height);
   align-items: center;
   background-color: var(--sbi-nav-background)!important;
}

.sbi-nav-bar li {
   height: 100%;
   height: var(--sbi-nav-height);
}

.sbi-nav-bar:first-child li a {
   border-bottom-left-radius: var(--sbi-nav-border-radius);
}

.sbi-nav-bar:last-child li a {
   border-bottom-right-radius: var(--sbi-nav-border-radius);
}


.sbi-nav-bar li.sbi-nav-logo a{
   padding-left: 10px;
   padding-right: 10px;
}

.sbi-nav-bar li a{
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 50px;
   height: 100%;
   color: var(--sbi-nav-text-color, var(--sbi-text-color));
   font-family: var(--sbi-nav-font, var(--sbi-font));
   text-decoration: none;
   transition: background-color 0.25s ease;
}

.sbi-nav-bar li a:hover{
   background-color: var(--sbi-nav-background-hover);
}

.sbi-nav-right {
   margin-left: auto;
}


.sbi-nav-submenu {
   display: none;
   flex-direction: column;
   position: relative;
   background-color: var(--sbi-nav-background);
   width: 100%; /* match parent link width */
   box-sizing: border-box;
   padding-left: 0px;
   padding-right: 0px;
   list-style-type: none;
   border-left: var(--sbi-accent-text-color) solid 2px;
   border-right: var(--sbi-accent-text-color) solid 2px;
   border-bottom: var(--sbi-accent-text-color) solid 2px;
}

.sbi-nav-with-submenu:hover .sbi-nav-submenu {
   display: flex;
}

.sbi-nav-submenu li {
   padding-left: 0%;
   text-align: center;
   height: 100%;

}

.sbi-nav-submenu li a {
   padding: 10px 0px;
   display: block;
   padding-top: 1rem;
   padding-bottom: 1rem;
   padding-left: 10px;
   padding-right: 10px;
}

/**********/
/* Footer */
.sbi-footer {
   min-height: var(--sbi-footer-min-height);
   display: flex;
   align-items: center;
   background-color: var(--sbi-footer-background);
   color: var(--sbi-footer-text-color, var(--sbi-text-color));
   font-family: var(--sbi-footer-font, var(--sbi-font));
   padding: 10px;
}


/***************/
/* Page layout */

.sbi-page-container {
   /* This code is here for the "Sticky Footer"*/
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   flex-grow: 1;
}


.sbi-page-content {
   flex-grow: 1;
   font-family: var(--sbi-font);
   color: var(--sbi-text-color);
}

.sbi-content-padding {
   display: flex;
   flex-direction: column;
   padding: 10px;
   flex: 1;
   background-color: var(--sbi-content-body-background-color);
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 20px;
   margin-bottom: 20px;
   padding: 20px;

   min-height: 70vh;
}






h1 {
   color: greenyellow;
   font-weight: 800;
}

body {
   /*background-color: var(--sbi-background-color);*/
   /*background-image: linear-gradient(45deg, transparent 20%, var(--sbi-background-color) 25%, transparent 25%), 
                    linear-gradient(-45deg, transparent 20%, var(--sbi-background-color) 25%, transparent 25%), 
                    linear-gradient(-45deg, transparent 75%, var(--sbi-background-color) 80%, transparent 0),
                    radial-gradient(gray 2px, transparent 0);
   
   background-size: 30px 30px, 30px 30px;
   */
   z-index: -50; /* So line animation plays on top of this */
   
   margin: 0px
}