html, body{
   margin:0;
   font-family:"Century Gothic",sans-serif;
   background-color:#0129FA;
   overflow-x:hidden;
   }
  /* WebKit стили */
::-webkit-scrollbar {
    width: 0.01vw; /* Ширина полосы прокрутки */
}

::-webkit-scrollbar-thumb {
    background-color: #0129FA; /* Цвет полосы прокрутки */
    border-radius: 0.1vw; /* Закругленные углы полосы прокрутки */
}

::-webkit-scrollbar-track {
    background-color: #92A3FC; /* Цвет фона полосы прокрутки */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #92A3FC; /* Измененный цвет при наведении */
}

/* Mozilla Firefox стили */
/* ширина полосы прокрутки */
* {
  scrollbar-width: thin;
  scrollbar-color: #0129FA #92A3FC;
}

/* стиль полосы прокрутки */
*::-webkit-scrollbar-thumb {
  background-color: #0129FA;
}

/* стиль фона полосы прокрутки */
*::-webkit-scrollbar-track {
  background-color: #92A3FC;
}

/* стиль полосы прокрутки при наведении курсора */
*::-webkit-scrollbar-thumb:hover {
  background-color: #92A3FC;
}

   h1{
	   color:white;
	   font-size:5vw;
	   padding:5vw;
	   padding-bottom:0;
	   letter-spacing:0.1em;
   }
   .text1{
	   font-size:1.5vw;
	   color:white;
	   letter-spacing:0.2em;

   }
   .text2{
	   font-size:1vw;
	   color:white;
	   padding:5vw;
	   opacity:100%;
	   line-height: 1.2;
	   letter-spacing:0.2em;
	   
   }
  .container {
    display: inline-block 	;
    height: 100vh;
    overflow-x: hidden;
    
  }
  

   .close_button{
	 position:absolute;
	text-decoration: none;
	font-family: Arial;
    color: #fff;
	opacity:50%;
	margin-left:90%;
	margin-top:5%;
  }
  
  
  .fixed {
    top: 0;
    left: 0;
    width: 50%;
    background-color: #0129FA; /* Левая часть */
     position: fixed;
  height: 100vh; /* Устанавливаем высоту равной высоте окна просмотра */
  overflow-y: scroll; /* Разрешаем вертикальную прокрутку */
  overflow-x: hidden;
  }
 
  .scrollable {
    display: inline-block;
    flex-direction: column;
    flex: 1;
    float: left;
	top:0;
    margin-left: 50%;
    width: 50%;
    height: 100vh; /* Устанавливаем высоту равной высоте окна просмотра */
  overflow-y: auto; /* Разрешаем вертикальную прокрутку */
    overflow-x: hidden;
  }
  .image {
  top:0;
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  .scrollable img{
	  width:100%;
    display: inline-block;
	float:left;
  }
  .scrollable video{
	  width:100%;
    display: inline-block;
	float:left;
  }
  
  @media (max-width: 768px) {
    .container {
        position:relative;
		display:inline-block;
      flex-direction: column; /* Меняем направление на вертикальное */
    }
    .fixed {
        display:inline-block;
      position:relative;
      width: 100%; /* Занимает всю ширину в мобильной версии */
      height:30%;
    }
    .scrollable {
      width: 100%;
      height:auto;
      margin-left:0;/* Занимает всю ширину в мобильной версии */
    }
  }
  


@-webkit-keyframes pacman{
0% {
    offset-distance: 0;
    }
100% {
    offset-distance: 100%;
    }
}

#openModal{
	position:absolute;
	z-index:2;
	margin-top:25%;
	margin-left:0;
	height:3vw;
	width:3vw;
	animation-name: pacman;
    offset-path: path('M 0,20 H 1700 M 30 -50 V 1000 M 20 200 V -700  z');
	animation-iteration-count: infinite;
	animation-duration: 60s;
	animation-timing-function: linear;
}

.modal {
  display: none;
  position: fixed;
  z-index: 3;
  left: 15%;
  top: 0;
  width: 70%;
  height: 70%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
}
	@media (max-width:1199px){
	    .modal{
        float:left;
        left:0;
        width:100%;
        height:90%
    }
		}
				@media (max-width:899px){
				    .modal{
        float:left;
        left:0;
        width:100%;
        height:90%;
    }
				}

			    @media (orientation:portrait){
    .modal{
        float:left;
        left:0;
        width:100%;
        height:50%;
    }

    iframe {
    width: 1024px;
    transform: scale(.5);
    transform-origin: 0 0;
    margin-left:-20%;
}

}