body {
    margin: 0;
    font-family: sans-serif;
    font-size: 20px;
    line-height: 1.6;
    color: #000000;
    background-color: rgb(255, 255, 255);
  }
  
  .parallax {
    min-height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 3em;
    text-shadow: 1px 1px 3px rgba(255, 252, 252, 0.6);
  }
  
  .parallax-1 {
    background-image: url(images/richard-jacobs-8oenpCXktqQ-unsplash.jpg);
  }
  
  .parallax-2 {
    background-image: url(images/ray-rui-EW_DbvCx5ik-unsplash.jpg);
  }
  
  .parallax-3 {
    background-image: url(images/eye.jpg);
  }

  .parallax-4 {
 background-image: url(images/richard-jacobs-8oenpCXktqQ-unsplash.jpg);
  }

  .qu {
    position: relative;
  color: #000000; }

 .qu img {
  height: 185px;
  margin-top: -25px;
  margin-left: -20px;
position: absolute;
opacity: 25%;
}

.koko p {
   height: 250px;
  margin-top: -95px;
  margin-left: 830px;
  position: absolute;
  font-size: 15px;
  font-family: 'Dancing Script', cursive;
  color: #000000;
  z-index: 5;
}
  .koko img {
  height: 230px;
  margin-top: -350px;
  margin-left: 850px;
  position: absolute;
}

.nokoko img {
  height: 250px;
  margin-top: 350px;
  margin-left: -335px;
  position: absolute;
}

.nokoko p {
    margin-top: 650px;
  margin-left: -320px;
  margin-right: 1200px;
  position: absolute;
  font-size: 15px;
  font-family: 'Dancing Script', cursive;
  color: #000000;
  z-index: 5;
}
  .parallax-video {
    position: relative;
    overflow: hidden;
    height: 100vh;
  }
  
  .parallax-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    z-index: -1;
    object-fit: cover;
  }
  
  .content {
    padding: 60px 20px;
    max-width: 800px;
    margin: 0 auto;
    background-color: rgb(255, 255, 255);
  }
  
  footer {
    background: #222;
    color: #fff;
    text-align: center;
    padding: 30px 0;
  }
  
  #toggleButton {
    position: fixed;
    top: 20px;
    right: 40px;
    width: 40px;
    height: 40px;
    background: url('images/music.png') no-repeat center center;
    background-size: cover;
    border: none;
    opacity: 65%;
    cursor: pointer;
    z-index: 10;
  }

  #toggleButton.muted {
    background-image: url('images/no music.png');
  }

  audio {
    display: none; /* Скрываем стандартный аудиоплеер */
  }

  .tooltip {
    position: fixed;
    top: 20px;
    right: 120px;
    font-size: 15px;
    font-family: 'Dancing Script', cursive;
    color: #efebeb;
    z-index: 5;
    animation: fadeInText 1s ease-out forwards;
    display: none;  
  }
  
  .tooltip:after {
    content: '➤';
    font-size: 20px;
    margin-left: 20px;
    opacity: 0;
    transform: translateY(-10px);
    animation: showArrow 1.5s 1s ease-out forwards;
  }
  
  @keyframes fadeInText {
    0% {
      opacity: 0;
      transform: translateX(-20px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

   p {
    text-indent: 20px; 
  color: #080808;}
   
    .letter-r {
	font-size: 100pt;
	display: inline-block;
	float: left;
	margin: -40px 30px 50px 0;
	height: 107px;
  color: rgb(136, 134, 220)
}


mark {
  background: rgb(93, 90, 191);
  color: white;
}

  @keyframes showArrow {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }