@font-face {
    font-family: Typewriter;
    src: url("JMHTypewriter.otf");
}

@font-face {
    font-family: Runic;
    src: url("BeowulfRunic.ttf");
}

@font-face {
    font-family: Charnelhouse;
    src: url("CharnelHouse.ttf");
}

@font-face {
    font-family: cinta;
    src: url("cinta.ttf");
}

@font-face {
    font-family: skull;
    src: url("Old_Skull_Hellron.ttf");
}
			

			{
				background-image: url("https://i.pinimg.com/236x/fb/48/34/fb48343bf5bb2005ab913a85b936a437.jpg");
			}


			.DONATE-button {
				font: monospace;
				background-color: black;
				color: orange;
				height: 40px;
				width: 120px;
				border-color: orange;
				lighting-color: white;
				font-size: larger ;
				font-display: auto;
				cursor: help;

			}
			
			.imagebutton {
				background-color: transparent;
				border-color: transparent;
				cursor: help;



				


			}
			.imagebutton:hover{
				opacity: 0.5;


			}
			.gif{
				border:5px lightblue;
				width: 360px;
				border-style: dashed;
				box-shadow: 0px 5px 10px 0px black;
			}

			.dropdown {
  			position: relative;
 				display: inline-block;
}				
			.dropdown-content {
  			display: none;
  			position: relative; 
  			min-width: 160px;
  			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  			z-index: 1;
}

			.scroll-image {

				height: 230px;
			}

			.scroll-image:hover {


			}

.dropdown:hover .dropdown-content {display: block;}
			.p{
				font: bold;
			}


div.scroll-container {
	background-image: url("https://i.pinimg.com/736x/24/d6/12/24d612c1315bee6b6e65040acea7bc1b.jpg") ;
	justify-self: center;
	background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  overflow-x: scroll;
  white-space: nowrap;
  padding: 10px;
  width: 700px;
  border: 3px solid black;

  
}
div.scroll-container::-webkit-scrollbar {
  height: 12px;


 }
 div.scroll-container::-webkit-scrollbar-track {
  background: black; /* couleur du fond de la track */
 background-color: whitesmoke;
  border: 3px solid black;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}
div.scroll-container::-webkit-scrollbar-thumb {
  background: floralwhite; /* couleur de la poignée */
  
  border: 2px groove floralwhite;
}
div.scroll-container::-webkit-scrollbar-thumb:hover {
  background:antiquewhite ;
}

div.scroll-container img {
  padding: 5px;
  }
div.box {
  background-image: url("https://i.pinimg.com/736x/24/d6/12/24d612c1315bee6b6e65040acea7bc1b.jpg") ;
  width: 700px;
  border: 3px solid black;
  padding: 10px;
  margin: 10px;
  box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.9);
	justify-self: center;
	background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

			body{
				background-image: url("https://i.pinimg.com/736x/c7/54/54/c754543a8f1b1eadb14e16eaf35edcd7.jpg");
				background-size: 1000px;
				text-align: center;
				align-items: center;
				justify-content:center ;
				cursor: url;
}

		

  .image-glide {
    position: absolute;
    top: 20px;
    left: clamp(0px, 2vw, 100px); /* Glisse de 0px à max 100px */
    width: 300px;
    height: 1500px;
    transform: scale(0.55);
    transform-origin: top left;
    z-index: 1000;
    pointer-events: none; /* pour qu'elle ne gêne pas les clics */
  }

  /* En dessous de 600px, on peut la cacher ou la recentrer */
  @media (max-width: 300px) {
    .image-glide {
      display: none;
    }
  }
.audio-player {
    display: flex;
    align-items: center;
    gap: 10px;
    background: black;
    padding: 10px 15px;
    border: 4px groove floralwhite;
    color: floralwhite;
    font-family: cinta;
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 3px 0px 10px black;
  }

  button {
    background: none;
    border: none;
    color: floralwhite;
    font-size: 20px;
    cursor: pointer;
    font-family: cinta;
  }

  input[type="range"] {
    width: 100px;
  }

  audio {
    display: none;
  }

			}
		  .chat-container {
      width: 400px;
      background-image:url("https://i.pinimg.com/736x/c7/54/54/c754543a8f1b1eadb14e16eaf35edcd7.jpg");
      border: 2px solid black;
      border-radius: 15px;
      box-shadow: 0 0 20px floralwhite;
      display: flex;
      flex-direction: column;
      overflow: hidden;

    }

    .chat-messages {
      padding: 15px;
      height: 400px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;

    }

    .chat-bubble {
      background: linear-gradient(145deg, #222, #000);
      background-image:url("https://i.pinimg.com/736x/c7/54/54/c754543a8f1b1eadb14e16eaf35edcd7.jpg");
      border: 2px solid black;
      padding: 10px 15px;
      max-width: 80%;
      align-self: flex-start;
      box-shadow: 0 0 10px black;
      font-size: 20px;
      font-family: Typewriter;
    }

    .chat-input {
      display: flex;
      border-top: 1px solid #333;
      background: #111;
    }

    .chat-input input {
      flex: 1;
      padding: 10px;
      border: none;
      background: black;
      color: white;
      font-size: 14px;
      outline: none;
      font-family: cinta;

    }

    .chat-input button {
      padding: 10px 15px;
      background: floralwhite;
      color: black;
      border: 3px black groove ;
      cursor: pointer;
      transition: background 0.3s;
    }

    .chat-input button:hover {
      opacity: 0.9;
    }