 @font-face {
  font-family: Titlefont;
  src: url("/fonts/Scribble%20Markers.otf");
  font-display: auto; }
 body {
   background-image:none;
    background-color: #101919!important;
    padding: 3px;}
     a{ color:#8BC8B0;}
 .contentbox{position:relative;}
     .maps{position: relative;}
    ul {list-style-type: square;padding: 0px 0px 0px 20px;}
     ul.menu{display: flex;list-style: none;flex-wrap: wrap;justify-content: flex-end;}
     .menu{font-family: Menufont;background: rgba(0, 0, 0, 0.5);padding-bottom: 7px;border-bottom: 1px solid #355656;backdrop-filter: blur(1px);}
     .menu li a{width: auto;padding: 0.4em;margin-top: 0.5em;margin-right: 0.5em;font-size: medium;color:#fff;}
    .card{border-image: url(/images/oc-world-frame.gif) 34 / 24px / 3px repeat;background-color:#1b2a2a;}
     .display-4{color:#8BC8B0;text-shadow: 4px 4px 0px #1d2f2f;font-family:Titlefont!important;}
     .contentbox{margin:4%;margin-top: 20%;}
     #background{height: 100%;z-index: -5;display: block;width: 100%;position:absolute;background-size: 100%;background-repeat: no-repeat;filter: sepia(1) hue-rotate(104deg) brightness(0.5);}
        #background2{background-image: url(/images/glitter-star-overlay.gif);height: 100%;z-index: -4;display: block;width: 100%;position:fixed;background-size: 100px;background-repeat:repeat;filter: sepia(1) hue-rotate(104deg) brightness(0.5);opacity:0.2;}
     .border-r{border-right: 1px solid #385858;}
     .border-l{border-left: 1px solid #385858;}
     .border-t{border-top: 1px solid #385858;}
     .border-b{border-bottom: 1px solid #385858;padding-bottom: 1em;}
     .active{text-decoration-line: grammar-error;}
     @media(max-width:800px){#background{width: 208%;background-position: -225px 0px;}}
     img {filter: drop-shadow(4px 4px 0px #527668);filter: sepia(1) hue-rotate(104deg)!important;}
     ::-webkit-scrollbar-thumb {background-color: #68a3a5;}
        o{position:absolute;display:block;width:4px;height:4px;background:#88C4AC;pointer-events:none;animation: cursoreffect 0.5s linear forwards;}
     @keyframes cursoreffect{0%{opacity:1; transform: translate(0,0);}
           100%{opacity:0;transform: translate(var(--x),var(--y));}}
     .nav-link:focus, .nav-link:hover {color: #8bc8af;transform: scale(1.2);
}