article {
 /*  counter-reset: footnotes footbibl;  создать счётчик */
}

 
[id^="ref"] {
  counter-increment: footnotes;
  /* указать, что каждая ссылка, чей id начинается "ref", прибавляет к счётчику единицу */
  text-decoration: none;
  /* убрать подчёркивание */
}

[id^="bibl"] {
  counter-increment: footbibl;
  /* указать, что каждая ссылка, чей id начинается "bibl", прибавляет к счётчику единицу */
  text-decoration: none;
  /* убрать подчёркивание */
}

[id^="ref"]:after {
 content:  counter(footnotes) ;
  /* показать цифру на счётчике  */
  vertical-align: super;
  /* поместить на линию верхнего индекса */
  font-size: 50%;
  /* уменьшить шрифт цифры */
  margin-left: .1em;
}

[id^="bibl"]:after {
 /* content:  ' [' counter(footbibl) ']' ;
  показать цифру на счётчике  */  
  font-size: 110%;
  /* уменьшить шрифт цифры */
  margin-left: .1em;
}

[href^="#ref"] {
  text-decoration: none;
}

[href^="#bibl"] {
  text-decoration: none;
}

[id^="node"]:target,
[id^="ref"]:target {
  /* изменить фон элемента при переходе к id */
  background: LightBlue;
}
[id^="nod"]:target,
[id^="bibl"]:target {
  /* изменить фон элемента при переходе к id */
  background: LightBlue;
}
 

/*    .ex{
  display: block; 
  overflow: scroll;
  /*  width: 100px; */ 
	    border-top-left-radius: 0.5em 0.5em;
		border-top-right-radius: 0.5em 0.5em;
		border-bottom-right-radius: 0.5em 0.5em;
		border-bottom-left-radius: 0.5em 0.5em; 
  color: black;
  padding: 5px;
  border: 1px solid black;    
  background-color: #EBF0F4 ;
/* font-weight: bold;  Жирное начертание */
    font-size: 80%; /* Размер шрифта */
    white-space: pre; /* Переносов в тексте нет */
}
 */


#overflowEx {
  background: #EBF0F4 ;
  color: black;
  padding: 15px;
  width: 100%;
  height: 500px;
  overflow: scroll;
  border: 1px solid #ccc;
}


/*
#btn{
 text-align: center; 
}

 .center { 
    text-align: center; 
  }
 */  

.button {
  border: none;
 /* color: white;*/
  text-align: center;
  text-decoration: none;
  user-select: none;
  display: inline-block;  
  margin: 0px 0px;  
  padding: 0em 0em; 
transition-duration: 0.4s;
  cursor: pointer;
 outline: none;
}

.btn-group .button {
  border: 1px solid #AED6F1 ;
  background-color: #5DADE2;
  color: white;
  text-align: center;
  text-decoration: none;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  cursor: pointer;
  float: left;
}

.btn-group .button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

.btn-group .button:hover {
  background-color: #5DADE2;
}


.ctr {
       display: block;
       margin-left: auto;
       margin-right: auto;
       width: 50%;
    }


figure {
  align:center;
  margin: 220;
  float: left;
}

body {
  background-color: white; 
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  margin: 10px;
  color: black;
  /*  Растягиваем body по высоте html */
  min-height: 100%;
}

main {
   /* Выставляем отступ с высотой footer и header 
   min-height: calc(100vh - 30px - 30px);
    */
    float: left;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 20px;
    color: black;
  /* Растягиваем body по высоте html */
    min-height: 100%;
} 

section {   
}  

* {
  box-sizing: border-box;
}

/* Style the header */
header {
  background-color: white;
  padding: 30px;
  text-align: center;
  font-size: 18px;
}

/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 30%;
  /* height: 300px; only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: white;
  /* height: 300px;  only for demonstration, should be removed */
}

/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
footer {
 /* background-color: #777;*/
  padding: 10px;
  text-align: center;
  clear: both;
  color: black;
}
 
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}

    .formatted-text {
 text-align: justify;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-right: 50px;
    margin-left: 50px;
line-height: 1.3;
word-spacing: 10px;
font-size: 18px;
}
 


/*    .formatted-table{
 padding-top: 0px;
    padding-right: 0px;
    padding-bottom: -10px;
    padding-left: -10px;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-right: 60px;
    margin-left: 60px;
}*/


footer {
  /*
   position: absolute; 
   */
    bottom: 0;
    width: 100%; 
    height: 30px;/*  */
    border-top: 1px solid silver;
  /* горизонтальная линия */
  font-size: 70%;
  /* уменьшить шрифт под горизонтальной линией */
}

aside {
  padding: 12em;
  margin: 12em;
   width: 75%;
  background-color: white;  
} 

   .ctr {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

   div.bloc1 {
  background-color:LightSkyBlue;
		border-top-left-radius: 2em 2em;
		border-top-right-radius: 2em 2em;
		border-bottom-right-radius: 2em 2em;
		border-bottom-left-radius: 2em 2em; 
  color: black;
  border: 1px solid black;
  margin: 0px;
  padding: 0px;
}

  div.bloc2 {
  background-color:LightSkyBlue;
		border-radius: 1em 1em;
		text-align:center; 
  color: black;
  border: 0px solid black;
  margin: 0px;
  padding: px;
}

 div.blocN {
 /* background-color:LightSkyBlue;
		border-radius: 1em 1em; */
		text-align:center; 
   color: black;
  margin: 0px;
  padding: 3px;
}
 

	div.titreblock{ 		   
         /*   font-size: 15px;   */
            font-family:Times New Roman ; 
            font-style: italic;
			background-color:#2986cc;
		    border-top-left-radius: 2em 2em;
		   	border-top-right-radius: 2em 2em;
		 	border-bottom-right-radius: 0em 0em;
			border-bottom-left-radius: 0em 0em; 
			color: white;
            text-align:left;
			border: 1px solid navy;
		    margin: -2px;
 		    padding: -2px;
            margin-top:-13px;  
            padding-top:-13px;
            margin-bottom: -13px;  
            padding-bottom:-13px; 
}
 

table {
  border-collapse: collapse;
  width: 100%;
}

tr {
  border-bottom: none;
}

h1 {
  color: blue;
}

#pNavy {
  text-align: center;
  color: navy;
}

*{
  box-sizing: border-box;
} 

/*   
ul.b {
                     list-style-type: disc;
                      }
ul.c {
                     list-style-type: square;
                      }
 
ul.nn {
                     list-style-type: none;
                      }
 */ 
 
a.n:link, a.n:visited {
  background-color: none;
  color: navy;
  border-style: none;
  padding: 1px 1px;
  display: inline-block;
}

a.nb:hover, a.nb:active {
  background-color: none;
  color: #FFFFFF;
}

a.nb:link, a.nb:visited {
  background-color: none;
  color: #FFD966;
  border-style: none;
  padding: 1px 1px;
  display: inline-block;
}

a.n:hover, a.n:active {
  background-color: none;
  color: navy;
}

   a.bib:link, a.bib:visited {
  background-color: none;
  font-family: Times New Roman;
  color: white;
  border-style: none;
  padding: 1px 1px;
  display: inline-block;
}

a.bib:hover, a.bib:active {
  background-color: none;
  color: yellow;
}

a.bibw:link, a.bibw:visited {
  background-color: none;
  font-family:'Times New Roman';
  color: navy;
  border-style: none;
  padding: 1px 1px;
  display: inline-block;
}

a.bibw:hover, a.bibw:active {
  background-color: none;
  color: yellow;
}

a.bibh:link, a.bibh:visited {
  background-color: none;
  font-family:'Times New Roman';
  color: navy;
  border-style: none;
  padding: 1px 1px;
  display: inline-block;
}

a.bibh:hover, a.bibh:active {
  background-color: none;
  color: #274E13;
}

a.fn:link, a.fn:visited {
  background-color: white;
  color: black;
  border: 1px solid grey;
  border-radius: 3px;
  padding: 1px 1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.fn:hover, a.fn:active {
  background-color: none;
  color: white;
}
 
/*display: block; color: #666;
  text-align: center; padding: 14px 16px; */
/*  

li a {
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
}

li a.active {
  color: white;
  background-color: #04AA6D;
}


li a.nn:link, a:visited {
  color: (internal value);
  text-decoration: underline;
  cursor: auto;
}

li a.nn:link:active, a.nn:visited:active {
  color: (internal value);
}
  /*text-align: center; */
 


#dF { 
    text-align: left;
    background: #def0fc;
    padding: 10px;
    border-left: 3px solid #3498db;
   }
 
#lin{
 text-align: left; 
}

html{
  position: relative;
  min-height: 100%;
}

.wrapper {
  margin-bottom: 100px;
}

.content {
  width: 450px;
  margin: 0 auto;
  padding: 20px;
}

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: #666;
}
 
  .box1 {
    position: relative; /* Относительное позиционирование */
    /* background: #f0f0f0; Цвет фона */
   /* height: 600px;  Высота блока */
   }

   .box2 {
    position: absolute; /* Абсолютное позиционирование   line-height: 1px;*/
    top: 15px; 
    bottom: 5px; /* Положение от нижнего края */
    /* right: 175px; Положение от правого края */  
    /* left: 1035px; Положение от правого края */  
   }

   .box3 {
    position: absolute; /* Абсолютное позиционирование   line-height: 1px;*/
    top: 25px; /* Положение от нижнего края */
    left: 25px; /* Положение от правого края */  
   }

 .layer1 {
    position: relative; /* Относительное позиционирование */
    background: #f0f0f0; /* Цвет фона */
    height: 430px; /* Высота блока */
   }

   .layer2 {
    position: absolute; /* Абсолютное позиционирование   line-height: 1px;*/
    bottom: 175px; /* Положение от нижнего края */
    right: 165px; /* Положение от правого края */  
    left: 705px; /* Положение от правого края */  
   }

   .layer3 {
    position: absolute; /* Абсолютное позиционирование   line-height: 1px;*/
    top: 5px; /* Положение от края */
    left: 5px; /* Положение от правого края */  
    bottom: -15px; /* Положение от нижнего   края */  
   }

   .layer3s {
    position: absolute; /* Абсолютное позиционирование   line-height: 1px;*/
    top: 5px; /* Положение от нижнего края */
    left: 5px; /* Положение от правого края */  
     overflow-y: scroll;
   }

 .layer3P{
    position: absolute; /* Абсолютное позиционирование   line-height: 1px;*/
    top: -45px; /* Положение от нижнего края */
    left: 55px; /* Положение от правого края */  
    bottom: 5px; 
   }


   .layer4 {
    position: absolute; /* Абсолютное позиционирование   line-height: 1px;*/
    top: 30px; /* Положение от верхнего края */
    left: 530px;  /*  Положение от левого края */ 
    right: 15px;  /* Положение от правого края */  
   }

   .layer5 {
    position: absolute; /* Абсолютное позиционирование   line-height: 1px;*/
    top: 265px; /* Положение от верхнего края */
    left: 55px; /* Положение от левого края */ 
    right: 655px;  /* Положение от правого края */  
     color:#483D8B; 
     text-align: center ;/* и */
      font-size: 20px;
       font-family: Courier, sans-serif;  /*comic sans ms  */ 
     -webkit-text-stroke: 1px #000000; 
     text-stroke: 1px #000000; /* Толщина и цвет обводки (стандартное свойство) */
   }

  .layer6 {
   position: absolute;  /*  Абсолютное позиционирование   line-height: 1px;*/
    top: -183px; /* Положение от верхнего края */
    left: 140px;   /* Положение от левого края */ 
    right: 725px; /* Положение от правого края */ 
    bottom:5px;
    padding-top:10px; 
    padding-left:10px; 
    color:#483D8B; 
    text-align: left ;/* и */
    font-size: 24px;
    font-family: Courier, sans-serif;  /*comic sans ms  */ 
    -webkit-text-stroke: 1px #000000; 
    text-stroke: 1px #000000; /* Толщина и цвет обводки (стандартное свойство) */
   }

#dACT{ 
    /*  text-align: left;   
    background: #def0fc; */
    color: #FFFF00;
     /*  padding: 10px;
    border-left: 3px solid #3498db; */
   }

  .bt{
    margin-bottom: -25px; /* Отрицательный отступ между заголовком и текстом */
   }

 .bt2{
    margin-top: 15px; 
    margin-bottom: -8px; /* Отрицательный отступ между заголовком и текстом */
   }

 .fl {    
			 top: 5px;  
             left: 0px;  
             right: 15px; 
             bottom:15px;
             padding-left:0px;  
             padding-right:20px; 
             padding-top:10px;  
             padding-bottom:10px;  
             float:left;
             /* width: 100%; */
             /* heigth: 100vh; */
             display: flex; /*   */
             justifie-content: center;
             /* allign-items: center;  */
             flex-direction: column;/*   */
        }


 .cont {  
             top: 5px;  
             left: 5px;  
             right: 5px; 
             bootem:5px;
             width: 100%;
             heigth: 100vh;
             display: flex;
             justifie-content: center;
             allign-items: center;
             flex-direction: column;
        }

/*  
frame {width: 80vw;
          heigth: 60vh;      
        }
*/  


 .about-image img {
            max-width: 100%;
            border-radius: 5px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .research-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1rem;
        }
        
        .research-card {
            background-color: var(--secondary-color);
            padding: 0.5rem;
            border-radius: 5px;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .research-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }
        
        .research-card h3 {
            color: var(--accent-color);
            margin-top: 0;
        }

        .soft-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .soft-card {
            background-color: var(--secondary-color);
            padding: 0.5rem;
            border-radius: 5px;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .soft-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }
        
        .soft-card h3 {
            color: var(--accent-color);
            margin-top: 0px;
            margin-left: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
        }

 .fli {    
			 top:0px;  
             left: 0px;  
             right: 0px; 
             bottom:0px;
             padding-left:5px;  
             padding-right:5px; 
             padding-top:5px;  
             padding-bottom:5px;  
             float:left;
             /* width: 100%; */
             /* heigth: 100vh; */
             display: flex; /*   */
             justifie-content: center;
             /* allign-items: center;  */
             flex-direction: column;/*   */
        }

 .fl {    
			 top: 5px;  
             left: 0px;  
             right: 15px; 
             bottom:15px;
             padding-left:0px;  
             padding-right:20px; 
             padding-top:10px;  
             padding-bottom:10px;  
             float:left;
             /* width: 100%; */
             /* heigth: 100vh; */
             display: flex; /*   */
             justifie-content: center;
             /* allign-items: center;  */
             flex-direction: column;/*   */
        }

 .fls {    
			 top: 5px;  
             left: 0px;  
             right: 5px; 
             bottom:15px;
             padding-left:0px;  
             padding-right:20px; 
             padding-top:10px;  
             padding-bottom:0px;  
             float:left;
             /* width: 100%; */
             /* heigth: 100vh; */
             display: flex; /*   */
             justifie-content: center;
             /* allign-items: center;  */
             flex-direction: column;/*   */
        }

 .flrprj {    
			 top: 5px;  
             left: 0px;  
             right: 0px; 
             bottom:0px;
             padding-left:0px;  
             padding-right:10px; 
             padding-top:10px;  
             padding-bottom:10px;  
             float:left;
             /* width: 100%; */
             /* heigth: 100vh; */
             display: flex; /*   */
             justifie-content: center;
             /* allign-items: center;  */
             flex-direction: column;/*   */
        }

        .prj-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .prj-card {
            background-color: var(--secondary-color);
            padding: 0.7rem;
            border-radius: 5px;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .prj-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }
        
        .prj-card h3 {
            color: var(--accent-color);
            margin-top: 0;
        }

 .flr {    
			 top: 5px;  
             left: 0px;  
             right: 15px; 
             bottom:15px;
             padding-left:0px;  
             padding-right:20px; 
             padding-top:10px;  
             padding-bottom:10px;  
             float:left;
             /* width: 100%; */
             /* heigth: 100vh; */
             display: flex; /*   */
             justifie-content: center;
             /* allign-items: center;  */
             flex-direction: column;/*   */
        }
        .pub-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1rem;
        }
        
        .pub-card {
            background-color: var(--secondary-color);
            padding: 0.5rem;
            border-radius: 5px;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .pub-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }
        
        .pub-card h3 {
            color: var(--accent-color);
            margin-top: 0;
        }


 .publications-list {
            list-style: none;
            padding: 0;
        }
        
        .publication-item {
            background-color: var(--secondary-color);
            padding: 1.5rem;
            margin-bottom: 1rem;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        
        .publication-item:hover {
            background-color: #3d566e;
        }
        
        .publication-title {
            font-weight: bold;
            color: var(--accent-color);
            margin-bottom: 0.5rem;
        }
        
        .publication-meta {
            color: var(--light-text);
            font-size: 0.9rem;
        }
        


/* Create two columns/boxes that floats next to each other */
nav {
     float: left;/*  float: right;  */
  width: 15%;
   /*  margin-left: 20px;   */
  background: #ccc;

  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}



/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}


.bl {
  width: 50px;
  height: 300px;
}

				/* Style the top navigation bar	    background-image: url('figures/fon3.jpeg');	 */
					.topnav {
					overflow: hidden;
			     background-color: #5DADE2 ;

					}
					
					/* Style the topnav links */
					.topnav a {
					float: right;  	/* */
					display: block;
					color: navy;
					text-align: center;
					padding: 14px 16px;
					text-decoration: none;
					}
					
					.active {
					background-color: #4CAF50;
					color: #FFFF00
                     /*   white; */
					}
					
                     a.is-active {color: #FFD700; background: radial-gradient( #3daee7, #1070b9);}


					.topnav .icon {
					display: none;
					}
					
					.dropdown {
					float: left;
					overflow: hidden;
					}
					
					.dropdown .dropbtn {
					font-size: 13px;    
					border: none;
					outline: none;
					color: Navy;
					padding: 14px 16px;
					background-color: inherit;
					font-family: inherit;
					margin: 0;
					}
					
					.dropdown-content {
					display: none;
					position: absolute;
					background-color: #f9f9f9;
					min-width: 160px;
					box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
					z-index: 1;
					}
					
					.dropdown-content a {
					float: none;
					color: black;
					padding: 12px 16px;
					text-decoration: none;
					display: block;
					text-align: left;
					}
					
										
					.topnav a:hover, .dropdown:hover .dropbtn {
					background-color: LightSteelBlue; 
					color: none;
					}
					
					.dropdown-content a:hover {
					background-color: #ddd;
					color: black;
					}
					
					.dropdown:hover .dropdown-content {
					display: block;
					}
					
					@media screen and (max-width: 600px) {
					.topnav a:not(:first-child), .dropdown .dropbtn {
					display: none;
					}
					.topnav a.icon {
					float: right;
					display: block;
					}
					}
					
					@media screen and (max-width: 600px) {
					.topnav.responsive {position: relative;}
					.topnav.responsive .icon {
					position: absolute;
					right: 0;
					top: 0;
					}
					.topnav.responsive a {
					float: none;
					display: block;
					text-align: left;
					}
					.topnav.responsive .dropdown {float: none;}
					.topnav.responsive .dropdown-content {position: relative;}
					.topnav.responsive .dropdown .dropbtn {
					display: block;
					width: 100%;
					text-align: left;
					}
 



/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
	 nav, article {
		    width: 100%;
 		   height: auto;
 				 }
	}
 
/* Медиа-запрос для мобильных устройств (горизонтальная ориентация) и планшетов (вертикальная ориентация) */ 
@media (max-width: 768px) { 
header, main, footer { 
  padding: 15px; 
} 
h1 { 
  font-size: 28px;
} 
} 

/* Медиа-запрос для мобильных устройств (вертикальная ориентация) */ 
@media (max-width: 480px) { 
header, main, footer { 
  padding: 10px; 
} 
h1 { 
  font-size: 24px; 
}
}