#header{
	border-radius: 30%;
	background-color: rgba(3, 13, 74, 0.5);
	text-align: center;
}
#nav{
font-family:Arial ;
    width: 100%;
    display: table;
    margin: 0 auto;
    transform: translateY(-50%);
}

#nav a
{
	font-family:Arial ;
	border-radius: 35%;
	background-color: rgba(3, 13, 74, 0.5);
    top: 70px;
    position: relative;
    width: 14%;
    display: table-cell;
    text-align: center;
    color: #949494;
    text-decoration: none;
  
    font-weight: bold;
    padding: 10px 15px;
    transition: 0.2s ease color;
}

#nav a:before, #nav a:after
{
    content: "";
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    transition: 0.2s ease transform;
}

#nav a:before
{
    top: 0;
    left: 10px;
    width: 6px;
    height: 6px;
}

#nav a:after
{
    top: 5px;
    left: 18px;
    width: 4px;
    height: 4px
}

#nav a:nth-child(1):before
{
    background-color: yellow;
}

#nav a:nth-child(1):after
{
    background-color: red;
}

#nav a:nth-child(2):before
{
    background-color: #00e2ff;
}

#nav a:nth-child(2):after
{
    background-color: #89ff00;
}

#nav a:nth-child(3):before
{
    background-color: purple;
}

#nav a:nth-child(3):after
{
    background-color: palevioletred;
}
#nav a:nth-child(4):after
{
    background-color: #FF00FF;
}
#nav a:nth-child(4):before
{
    background-color: #6A5ACD;
}
#nav a:nth-child(5):after
{
    background-color: #0000FF;
}
#nav a:nth-child(5):before
{
    background-color: #00FFFF;
}
#nav a:nth-child(6):after
{
    background-color: #00FF7F;
}
#nav a:nth-child(6):before
{
    background-color: #FF4500;
}
#nav a:nth-child(7):after
{
    background-color: #FFDAB9;
}
#nav a:nth-child(7):before
{
    background-color: #9370DB;
}

#indicator
{

    position: absolute;


    width: 60px;
    height: 3px;

    border-radius: 5px;
    transition: 0.2s ease left;
	
}

#nav a:hover
{
    color: #FF1493;
}

#nav a:hover:before, #nav a:hover:after
{
    transform: scale(1);
}

#nav a:nth-child(1):hover ~ #indicator
{
	top:120px;
	left: 3%;
    background: linear-gradient(130deg, yellow, red);
}

#nav a:nth-child(2):hover ~ #indicator
{
    top:120px;
	left: 16%;
    background: linear-gradient(130deg, #00e2ff, #89ff00);
}

#nav a:nth-child(3):hover ~ #indicator
{
	top:120px;
    left: 31%;
    background: linear-gradient(130deg, purple, palevioletred);
}
#nav a:nth-child(4):hover ~ #indicator
{
	top:120px;
    left: 45%;
    background: linear-gradient(130deg, #FF00FF, #6A5ACD);
}
#nav a:nth-child(5):hover ~ #indicator
{
	top:120px;
    left: 58%;
    background: linear-gradient(130deg, #0000FF, #00FFFF);
}
#nav a:nth-child(6):hover ~ #indicator
{
    top:120px;
	left: 72%;
    background: linear-gradient(130deg, #00FF7F, #FF4500);
}
#nav a:nth-child(7):hover ~ #indicator
{
	top:120px;
    left: 87%;
    background: linear-gradient(130deg, #FFDAB9, #9370DB);
}


#ytd-url {
  display: block;
  position: fixed;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  margin: 20px;
  color: #fff;
  font-family: Arial;
  font-size: 14px;
  text-decoration: none;
  background-color: #000;
  border-radius: 4px;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
  z-index: 125;
}

  #article{
	  background-color: rgba(6, 5, 33, 0.7);
	margin-top: 100px; 
	padding: 2%;
	border-radius: 10%;
	rgba(1, 11, 5, 0.5) ;
	
  }
  
 p {
	text-indent: left;
	font-size: 27px;
	font-family: Arial ;
	color: #949494;
	 
 }

 body{
	background-image: url("905.jpg");
	background-size: cover;
	background-attachment: fixed;
 }
 
 
 
 img {
	 position: relative;
    transition: transform 1s ease; /* Плавное увеличение */
    cursor: pointer;
}
img:hover {
    transform: scale(1.1); /* Увеличение в 1.5 раза */
    z-index: 100; /* Поверх остальных элементов */
    position: relative;
}
 
 
 
 


h1 {
color:#FFFFFF;
text-align: center;
font-family:Arial ;
}  

* {box-sizing: border-box;}
body {

	margin: 20px;
}
.slider { 
  position: relative;
	text-align: center;
  top: 5%;
	max-width: 90%; 
	margin: 4% auto;
}
.slides{
	width: 95%;
	margin-left:8.3%;
}

.slides .slide{ /*все изображения справа друг от доруга*/
    height: 35% ; 
	
	 transition: 1s; /* Время эффекта */

	float: left;
	padding: 0 2% 0 0%;
}

.slides .slider-inner{
	width: 300%;
}
.overflow{ 
	width: 90%;
	overflow: hidden;
}

 
 

.arrows label {
	height: 50px;
	width: 50px;
}
/*настройка переключения и положения для левой стрелки*/
#switch1:checked ~ .arrows label:nth-child(7), 
#switch2:checked ~ .arrows label:nth-child(1),
#switch3:checked ~ .arrows label:nth-child(2),
#switch4:checked ~ .arrows label:nth-child(3),
#switch5:checked ~ .arrows label:nth-child(4), 
#switch6:checked ~ .arrows label:nth-child(5), 
#switch7:checked ~ .arrows label:nth-child(6){
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='40' fill='lightgrey'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z'/%3E%3C/svg%3E") center/cover no-repeat; 
	float: left;
	position: absolute;
	left: 2%;

}

/*настройка переключения и положения для правой стрелки*/
#switch1:checked ~ .arrows label:nth-child(2),
#switch2:checked ~ .arrows label:nth-child(3),
#switch3:checked ~ .arrows label:nth-child(4),
#switch4:checked ~ .arrows label:nth-child(5),
	#switch5:checked ~ .arrows label:nth-child(6), 
		#switch6:checked ~ .arrows label:nth-child(7), 
		#switch7:checked ~ .arrows label:nth-child(1){ 
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='40' fill='lightgrey'%3E%3Cpath d='M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z'/%3E%3C/svg%3E") no-repeat center/cover; 
	float: right;
	margin: 0 0 0 2%; 

}

label, a{ 
	cursor: pointer;
}
/*скрываетвсе radio-input*/
input[type="radio"]{ 
	display: none;
}

#switch1:checked ~ .slides .slider-inner{
	margin-left: 0;
}

#switch2:checked ~ .slides .slider-inner{
	margin-left: -25%;
}

#switch3:checked ~ .slides .slider-inner{
	margin-left: -50%;
}

#switch4:checked ~ .slides .slider-inner{
	margin-left: -75%;
	
}

#switch5:checked ~ .slides .slider-inner{
	margin-left: -100%;
}

#switch6:checked ~ .slides .slider-inner{
	margin-left: -125%;
}

#switch7:checked ~ .slides .slider-inner{
	margin-left: -187%;
}


.arrows{ 
	margin: -11% 0 0 0 ;  /*высота стрелок*/


}

.dots label{
	border-radius: 10px;
	display: inline-block; 
	width: 15px;
	height: 15px;
	background: #bbb;
}

.dots{
	margin: 13% 0 0;  /*высота точек*/
	text-align: center;
}

.dots label:hover{ 
	background: #76c8ff;
	border-color: #777 !important;
}

#switch1:checked ~ .dots label:nth-child(1),
#switch2:checked ~ .dots label:nth-child(2),
#switch3:checked ~ .dots label:nth-child(3),
#switch4:checked ~ .dots label:nth-child(4),
#switch5:checked ~ .dots label:nth-child(5),
#switch6:checked ~ .dots label:nth-child(6),
#switch7:checked ~ .dots label:nth-child(7){
	background: #18a3dd;
	border-color: #18a3dd !important;
}

.slides .slider-inner{ 
	transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

.arrows label:hover{ 
	opacity: 0.6;
}

.slide:hover{
	
	
	 transform: scale(1.2); /* Увеличиваем масштаб */
}

 


.arrows label{
	transition: opacity 0.2s ease-out;
}

@media (max-width: 480px) {
	.arrows label {
		width: 25px;
		height: 25px;
	}
	.slide h2 {
		font-size: 1.2em;
		padding: 6px 0;
	}
	.dots {
		margin-top: 16%;
	}
	.dots label {
		width: 10px;
		height: 10px;
	}
	
	.img-same-size {
		width: 1000%; 
		height: 1000%;
		}

	
	 .scale {

    transition: 1s; /* Время эффекта */
   }
   .scale:hover {
	  
    transform: scale(1.1); /* Увеличиваем масштаб */
   }