/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("fondo.jpeg");
  margin-top: 60px;
  background-color: #54592C;
  color: #242614;
  font-family: Verdana;
}
h1 {
    color: #421b2f; /* text color */
}
h2 {
    color: #421b2f; /* text color */
}
h3 {
    color: #421b2f; /* text color */
}
a:link {
color: #de9c9c; /* unvisited link */
}
a:visited {
color: #1c0b0b; /* visited link */
}

.flor {
  position: absolute;
  top: 100px;
  width: 300px;
  left: 600px;
  margin-right: auto;
}
.logo {
  position: absolute;
  top: 30px;
  width: 220px;
  left: 10px;
  margin-right: auto;
}

ul.custom-bullets {
    list-style: none; /* Remove default bullets */
    padding-left: 30px; /* Space for the image */
}

ul.custom-bullets li {
    background: url('radiohysteriaflorlogo.png') no-repeat left center;
    background-size: 16px 16px; /* Control image size */
    padding-left: 25px; /* Space between image and text */
    text-decoration: none;
}
.barra-izquierda {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  background-image: url("fondoraya.jpg");
  padding: 20px;
  box-sizing: border-box;
}
.contents {
  margin-top: 200px;
  margin-left: 0;
  text-decoration: none;
}
.mosquito {
  position: absolute;
  top: 90px;
  width: 150px;
  right: 30px;
  margin-left: auto;
  z-index: 15
}
.mosquitoconmoneda {
  position: absolute;
  top: 90px;
  width: 150px;
  right: 200px;
  margin-left: auto;
  z-index: 15
}
.mosquito2 {
  position: absolute;
  top: 120px;
  width: 150px;
  right: 400px;
  margin-left: auto;
  z-index: 15
}  
.caja-derecha {
  width: 200px;
  min-height: 250px;
  padding: 20px;
  background-image: url("fondoraya.jpg");
  background-size: contain;
  position: absolute;
  top: 125px;
  right: 60px;
}
.mail {
  position: absolute;
  bottom: 200px;
  right: 130px;
  color: #de9c9c;
  text-decoration: none;
  z-index: 10;
}
.twitter {
  position: absolute;
  bottom: 175px;
  right: 130px;
  color: #de9c9c;
  text-decoration: none;
  z-index: 10
}
.instagram {
  position: absolute;
  bottom: 150px;
  right: 130px;
  color: #de9c9c;
  text-decoration: none;
  z-index: 10
}
.sobre {
  position: absolute;
  bottom: 20px;
  width: 225px;
  min-height: 250px;
  right: 60px;
  z-index: 1;
  pointer-events: none;
}
.construction {
  position: absolute;
  bottom: 100px;
  width: 225px;
  min-height: 250px;
  left: 600px;
  z-index: 1;
}
.cuadro {
  position: absolute;
  bottom: 30px;
  width: 225px;
  min-height: 250px;
  left: 15px;
  z-index: 1;
}
.archive {
  position: absolute;
  bottom: 125px;
  width: 70px;
  min-height: 50px;
  left: 125px;
  z-index: 1;
}

  
.notagato {
    width: 150px;
    height: 50px;
    background-color: #f3f6f4;
    padding: 20px;
    position: absolute;
    top: 30px;
    right:500px;
}

/*buscador*/
.buscador {
    margin-top: 20px;
    background: #4e3434;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 8px #de9c9c;
    position: relative;
}

.buscador h4 {
  margin: 0 0 10px 0;
  color: #de9c9c;
}

.buscador input {
  width: 80%;
  padding: 6px;
  border: 2px solid #de9c9c;
  border-radius: 5px;
  margin-bottom: 10px;
}

.buscador ul {
  list-style: none;
  margin: 0;
  position: absolute;
  right: 210px;
  top: 0;
  width: 160px;
  background: #4e3434;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 8px #de9c9c;
  display: none;
}
.buscador ul.visible {
  display: block;
}

.buscador li a {
  text-decoration: none;
  color: #de9c9c;
}

.buscador li a:hover {
  color: #1c0b0b;
  text-shadow: 0 0 6px #1c0b0b;
}