@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=New+Rocker&display=swap");

   /* -------------------- Global Styles -------------------- */
   body {
     margin: 0;
     padding: 0;
     font-family: "Cinzel", serif !important;
     color: white !important;
     position: relative;
     background-image: url("https://raw.githubusercontent.com/Xioner19/margonem-addons/refs/heads/main/pxfuel%20(1).jpg");
     background-size: cover;
   }
   
   body::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: inherit;
     filter: blur(3px);
     z-index: -1;
     pointer-events: none;
   }
   
   a {
     font-size: 10pt;
   }
   
   div {
     font-size: 10pt;
   }
   
   /* -------------------- Header and Logo -------------------- */
   .logo h1 {
     font-size: 45pt;
     text-transform: uppercase;
     color: #00ffff;
     font-family: "Cinzel", serif !important;
     letter-spacing: 5px;
     animation: glow 2s infinite;
     position: relative;
     z-index: 2;
   }
   
   .logo h1::before {
     content: "";
     position: absolute;
     top: -10px;
     left: -50px;
     right: -50px;
     bottom: -10px;
     background: radial-gradient(circle, rgba(0, 255, 255, 0.781), transparent);
     filter: blur(20px);
     z-index: -1;
     animation: fog 5s infinite ease-in-out;
   }
   
   /* -------------------- Navigation -------------------- */
   nav {
     background-color: #001f2b;
   }
   nav a:not(.sub){
    text-align: center;
   }
   nav a:hover,
   nav a.active,
   nav > ul > .active > a,
   .listitem:hover,
   .sub a:hover {
     background-color: #025169;
     color: #ffffff;
   }
   
   nav.row ul:not(.sub) {
     display: flex;
     flex-wrap: nowrap;
     align-content: center;
     justify-content: center;
     align-items: center;
   }
   
   .sub > li > a,
   .listitem {
     color: #ffffff;
     background-color: #025f7b;
   }
   
   /* -------------------- Buttons -------------------- */
   .btn {
     color: white;
     background: #025169;
     opacity: 0.85;
   }
   
   .btn-gr {
     color: white;
     background: #009898;
   }
   
   .btn-rd {
     background-color: #860000;
     font-family: "Cinzel";
   }
   
   .btn-bl {
     background-color: #008586;
   }
   
   /* -------------------- Alerts -------------------- */
   .alert {
     background-color: #011e25c7;
   }
   
   .alert h2 {
     color: #00d5d5;
   }
   
   /* -------------------- Footer and Links -------------------- */
   footer a,
   .link,
   p a {
     color: #00d0d1;
   }
   
   /* -------------------- Images -------------------- */
   body img[alt*="Item"],
   body .itemborder img {
     background-image: url("https://i.imgur.com/aV5suDt.gif");
     border: transparent;
     box-shadow: inset;
   }
   
   img[data-tip*="* uni"],
   img[stats*="unique"],
   img[data-stats*="unique"] {
     background-position-x: -32px;
     box-shadow: 0 0 6px #daa520;
   }
   
   img[data-tip*="* hero"],
   img[stats*="heroic"],
   img[data-stats*="heroic"] {
     background-position-x: -64px;
     box-shadow: 0 0 6px #0085ff;
   }
   
   img[data-tip*="* leg"],
   img[stats*="legendary"],
   img[data-stats*="legendary"] {
     background-position-x: -128px;
     box-shadow: 0 0 60px 7px #b08;
     animation: wobble-hor-bottom 1.5s ease-in-out 1 forwards;
   }
   
   /* -------------------- Boxes -------------------- */
   .row-shadow {
     background-color: #011e25c7;
     border-radius: 5px;
     border: 3px double #025169;
     box-shadow: 0px 0px 14px 5px rgb(0 50 65);
   }
   
   body .services {
     box-shadow: none !important;
     border: 0px !important;
   }