body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #081820;
  /* background-image: url('../assets/paws_bg.png'); 
  background-repeat: repeat;
  background-size: 320px auto;*/
  color: #78C0D0;
}

.container {
  max-width: 960px;
  margin: auto;
  padding: 20px;
  background-color: #081820;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
  border-radius: 8px;
}

h1, h2, h3 {
  color: #78C0D0;
}

a {
  color: #FDF9B8;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button, input[type="submit"], select {
  background-color: #083038;
  color: #78C0D0;
  border: 1px solid #083038;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}

button:hover, input[type="submit"]:hover {
  background-color: #086870;
}

input, select, textarea {
  border: 1px solid #081820;
  padding: 6px;
  border-radius: 4px;
}

img {
  max-width: 100%;
}

/* Sidebar Navigation */

ul.sidenav {
  list-style-type: none;
  margin: 0;
  padding: 20px;
  width: 200px;
  background-color: #083038;
  height: 100%; /* Full height: 100% */
  position: fixed; /* Make it stick, even on scroll */
  overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

ul.sidenav li a {
  display: block;
  color: #78C0D0;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link and background color on hover */
ul.sidenav li a:hover {
  background-color: #086870;
  color: #FDF9B8;
}

ul.sidenav li a.active {
  background-color: #501088;
  color: #FDF9B8;
} 

.content {
  margin-left: auto;
  padding: 20px;
  height: 1000px;
}

@media screen and (max-width: 900px) {
  ul.sidenav {
    width: 100%;
    height: auto;
    position: relative;
  }
  
  ul.sidenav li a {
    float: left;
    padding: 15px;
  }
  
  div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  ul.sidenav li a {
    text-align: center;
    float: none;
  }
}

/* Ende Sidebar Navidation */

.pet-glow {
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px #ccf)
          drop-shadow(0 0 24px #99f) brightness(1.2);
  /* You can change colors for different glow types! */
}





.pet-rainbow-glow {
  /* Stronger, balanced rainbow effect with more visible color separation */
  filter:
    drop-shadow(0 0 6px #ff3232)
    drop-shadow(0 0 12px #ff9932)
    drop-shadow(0 0 18px #ffe132)
    drop-shadow(0 0 24px #49ff32)
    drop-shadow(0 0 30px #32fff3)
    drop-shadow(0 0 36px #3257ff)
    drop-shadow(0 0 42px #a832ff)
    drop-shadow(0 0 48px #ff32a8)
    brightness(1.13);
}







.pet-mini {
  width: 27% !important; /* 1/3 of 80% is about 27% */
  top: 36.5%;  /* to keep it centered vertically */
  left: 36.5%; /* to keep it centered horizontally */
}











.faq-category h2 {
  background: #083038;
  border-left: 6px solid #78C0D0;
}

.notice {
  background-color: #086870;
  color: #78C0D0;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}