:root {

                /* applies to all areas */
                --font-family: courier;
                --font-size: 14px;
                --line-height: 1.3em;
                --font-color: white;
                --link-text-decoration: underline;
             

                /* main content (between sidebars) */
                --content-padding: 25px;
                --content-bg-color: black;

                /* header */
                --header-height: 150px;
                --header-background: url('/images/emptycreep.gif');
                --header-margin-bottom: 0px;

                /* sidebar */
                --sidebar-margin: 10px;
                --sidebar-width: 150px;
                --sidebar-padding: 20px;
                --sidebar-bg-color: #65CAFE;

                /* footer */
                --footer-height: 30px;
                --footer-bg-color: black;

                /* navbar */
                --space-between-navitems: 20px;
                --navbar-margin-bottom: 10px;
                --nav-bg-color: #ba8093;

                /* container */q
                --container-width: 100%;
                background-color: black;

                /* controls the gap between the content and the footer */
                --row-gap: 5px;

                /* To add scrollbars to your sidebars, just make the height a px value and change overflow to 'auto' */

                --sidebar-height: 100%;
                --sidebar-overflow: hidden;
                --background-color: ;
            }
            
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  background-color: white;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
            
.accordion {
  background-color: #280053;
  color: white;
  font-family: "Ragnear";
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: 1px solid white;
  text-align: center;
  outline: none;
  font-size: 24px;
  transition: 0.4s;
  margin: 2px;
}

.active, .accordion:hover {
  background-color: #AC1B6B; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: black;
  overflow: hidden;
  color: white;
}
            
           /* Navbar container */

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  overflow: hidden;
  display: inline-block;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 22px;
  border: 2px solid white;
  outline: none;
  color: white;
  padding: 10;
  display: inline-block;
  background-color: black;
  font-family: "Ragnear"; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #7D568B;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #65CAFE;
  color: black;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
} 

    

            html,
            body {
                margin: 0 auto;
                padding: 0px;
                background-color: black;
                background-image: ;
                font-family: var(--font-family);
                font-size: var(--font-size);
                line-height: var(--line-height);
                color: var(--font-color);
                text-align: center;
                width: 95%;
                   
            }
            
            li {
                color: white;
                font-family: courier;
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            ul {
                text-align: left;
            }
        
            
            h1 {
                
                font-size: 50px;
                font-family: "BrittanySignature";
               
            }
            
            h2 {
                font-size: 15px;
                text-decoration: none;
                text-align: center;
                color: black;
                background-color: #65CAFE;
                padding: 10px;
                border: 10px inset white;
            }
            
            h3 {
                font-size: 15px;
                color: #AC1B6B;
                font-family: "BisdakDisplay";
                text-align: center;
            }
            
            h4 {
                font-family: "AmsterdamOne";
                font-size: 25px;
                color: white;
                padding: 0;
                line-height: 3;
            }
            
            h5 {
              font-family: "HollowSpace";
              background-color: white;
              padding: 15px;
              margin: 0;
              color: black;
              font-size: 35px;
              border: 4px solid #280053;
            }
            
            li:hover {
                background-color: black;
            }
            
            p {
                text-align: left;
            }
        
  
 @font-face {
font-family: "HollowSpace";
src: url("/fonts/HollowSpace-4Bqvl.ttf");
src: url("/fonts/HollowSpace-4Bqvl.woff") format("woff"),
}

            
            @font-face {
font-family: "BrittanySignature";
src: url("/fonts/BrittanySignature.ttf");
src: url("/fonts/brittanysignature-webfont.woff") format("woff"),
}
            
            @font-face {
font-family: "BisdakDisplay";
src: url("/fonts/BisdakDisplay.ttf");
src: url("/fonts/bisdak_display-webfont.woff") format("woff"),
}     

    @font-face {
font-family: "AmsterdamOne";
src: url("/fonts/AmsterdamOne-eZ12l.ttf");
src: url("/fonts/AmsterdamOne-eZ12l.woff") format("woff"),
}


    @font-face {
font-family: "Ragnear";
src: url("/fonts/RagnearDisplayBlack-ZVXvK.ttf");
src: url("/fonts/RagnearDisplayBlack-ZVXvK.woff") format("woff"),
}

.yw-widget-full {
    text-align: center;
    width: 200px;
    padding: 5px;
}

.contentcolumns { 
    width: 450px;
    height: 200px; 
    font-family: courier; 
    padding: 5px; 
    color: white; 
    column-count: 2;

}

.contentresponsive { 
width: 100%; 
height: 515px;
padding: 5px;
background-color: black; 
}

.leftside {
    background-image: url(/images/leftsidebanner53.png);
    padding: 50;
    width: 325;
    height: 1000px;
    margin: 25px;
    border: 1px solid white;
    float: left;
}
                
.rightside {
    background-image: url(/images/rightsidebanner27.gif);
    padding: 50;
    width: 325;
    height: 1000px;
    float: right;
    border: 1px solid white;
    margin: 25px;
}   


.bottombanner {
    margin: 0 auto;
}

.vaults {
    margin: 5 auto;
    color: white;
    background-color: black;
    width: 1500px; 
    height: 200;
    padding: 5;
    background-image: url(/images/vaultsbackground5.png);
    overflow: scroll;
}

.floatleft {
    text-align: left;
}

.search {
    width: 425;
    margin: 0 auto;
    padding: 25;
    background-color: #21184a;
    border: 3px solid #65ACFE;
}

.quoteContainer {
    display: flex;
    flex-direction: column;
    padding: 25px;
    width: 87%;
    background-color: #ba8093;
    border: 3px solid white;
}

#quote {
    font-family: "Ragnear";
    text-align: center;
    font-size: 25px;
    line-height: 1;
}

#author {
    margin-top: 40px;
    margin-bottom: 20px;
    font-family: "BrittanySignature";
    font-size: 40px;
}

.dailycontainer {
    display: flex;
    flex-direction: column;
    padding: 25px;
    width: 87%;
    background-color: #ba8093;
    border: 3px solid white;
}

#daily {
    font-family: "Ragnear";
    text-align: center;
    font-size: 25px;
    line-height: 1;
}


body a {
    color: var(--link-color);
    font-weight: bold;
    text-decoration: var(--link-text-decoration); /* This line specifies underline */
}
            

            #main-container {
                max-width: 100%;
                margin: 0 auto;
                background-color: var(--container-bg-color);
            }

            .flex {
                display: flex;
                margin-bottom: var(--row-gap);
            }

            .content-wrap {
                margin-top: var(--content-margin-top);
            }
            
            #side-nav { 
            background-color: #000000;
            width: 250px; 
            height: 250px;
           position: relative;
             bottom: 350;
            left: 10;
            
            }

            #content-container {
                width: 80%;
                overflow: auto;
                height: 800px;
                margin-bottom: var(--row-gap);
                background-color: var(--content-bg-color);
                padding: 20px;
                border: 1px solid white;
            }

            #left-sidebar {
                width: 175px;
                font color: white;
                margin-right: 10px;
                margin-bottom: var(--row-gap);
                height: 800px;
                overflow: var(--sidebar-overflow);
                background-image: url(/images/left-sidebar-back1.gif);
                border: 1px solid white;
            }

            #right-sidebar {
                width: 175px;
                margin-left: var(--sidebar-margin);
                margin-bottom: var(--row-gap);
                height: 800px;
                overflow: var(--sidebar-overflow);
                background-color: var(--sidebar-bg-color);
                background-image: url(/images/rightsidebar12.gif);
                border: 1px solid white;
            }
 

            #header-contained {
                  border: 1px solid white;
                  width: 50%;
    margin: 0 auto;
    height: var(--header-height);
    margin-bottom: var(--header-margin-bottom);
    background-image: var(--header-background);
    background-position: center center;
    color: #000000;
    repeat: no-repeat; 
                }
            
         
          
            #footer {
                height: 50px;
                width: 50%;  
                margin: 0 auto;
                border: 1px solid white;
                text-align: center;
                font-size: 12px;
                font-family: "BisdakDisplay";
                color: var(--font-color);
                background-color: var(--footer-bg-color);
            }

            #header-full {
                display: none;
                height: var(--header-height);
                margin-bottom: var(--header-margin-bottom);
                background-image: var(--header-background);
                background-position: center center;
            }

            #navbar-contained {
                margin-bottom: var(--row-gap)
                
            }

            #navbar-full {
                display: none;
            }

            .nav {
                margin: 0 auto;
                width: 50%;
                border: 1px solid white;
                text-align: var(--navitems-alignment);
                margin-top: 10;
                padding-top: 1em;
                padding-bottom: 1em;
                margin-bottom: var(--navbar-margin-bottom);
                background-color: var(--nav-bg-color);
                text-align: center;
            }
            
            .nav li {
                display: inline-block;
                padding-right: var(--space-between-navitems);
                background-color: #000000; 
                color: white;
                padding: 10px 10px;
                text-align: center;
                text-decoration: none;
            }

            .wrapper {
                padding: var(--content-padding);
                padding-top: var(--sidebar-padding);
            }

            .sidebar-wrapper {
                padding: var(--sidebar-padding);
                height: var(--sidebar-height);
                overflow: var(--sidebar-overflow);
            }

            .footer-wrapper {
                padding: 5px;
            }

     @media only screen and (max-width: 1200px) {
                .flex {
                    flex-wrap: wrap;
                }

                #left-sidebar {
                    width: 50%;
                    display: inline-block;
                    order: 2;
                    margin-right: 0;
                    margin-bottom: 10px;
                    background-image: none;
                }

                #right-sidebar {
                    width: 50%;
                    display: inline-block;
                    order: 3;
                    margin-left: 0;
                    margin-bottom: 10px;
                    background-image: none;
                    background-color: black;
                }
                
                

                #content-container {
                    width: 100%;
                    display: block;
                    order: 1;
                    margin-bottom: 10px;
                    margin-right: 20px;
                    margin-left: 20px;
                }
                
                   #header-contained {
                    width: 100%;
                    background-repeat: no-repeat;
                }
                
                
}
            
            @media (max-width: 1200px) {
                
                
                 .leftside, .rightside {
    display: none;
  }
  
  .main-container {
      width: 100%;
  }
 
                
                #footer {
                    width: 100%;
                }
                
                .nav {
                    width: 100%;
                }
                
                .bottombanner {
                    width: 100%;
                }
                
                .vaults {
                    width: 100%;
                    background-image: none;
                    background-color: black;
                }
                
            }