body{
  margin: 0;
  padding: 0;
  font-family: 'Courier New', Courier, monospace;
}
.page{
display: flex;
justify-content: space-between;
flex-direction: column;
width: 100%;
}
.header{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  background: linear-gradient(black, #3a558e);
  margin: 3px;
  border-radius: 10px;
}
.header a{
  text-decoration: none;
  color: aliceblue;
}
.hbg-logo{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.logo img{
  height: 100px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  min-width: 250px;
}
.hamburger-lines {
  display: block;
  height: 26px;
  width: 32px;
  display: none;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger-lines .line {
  display: block;
  height: 4px;
  width: 100%;
  border-radius: 10px;
  background: aliceblue;
}

.hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}
/* Наложение (фон) */
.overlay {
  /* Высота и ширина зависят от того, как вы хотите показать наложение (см. JS ниже) */
  height: 0;
  width: 100%;
  position: fixed; /* Оставаться на месте */
  z-index: 10; /* Сидеть на вершине */
  left: 0;
  top: 0px;/* отступ с верху */
  background-color: rgba(0, 0, 0, 0.714); /* Черный с непрозрачностью */
  overflow-y: scroll; /* Отключить горизонтальную прокрутку */
  transition: 0.5s; /* 0.5 секунды эффект перехода, чтобы скользить в или скользить вниз по наложению (высота или ширина, в зависимости от показа) */
}

/* Расположите содержимое внутри наложения */
.overlay-content {
  position: relative;
  top: 25%; /* 25% с самого начала */
  width: 100%; /* 100% width */
  text-align: center; /* Центрированный текст/ссылки */
  margin-top: 30px; /* 30px верхнее поле, чтобы избежать конфликта с кнопкой закрытия на небольших экранах */
}

/* Навигационные ссылки внутри наложения */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: aliceblue;
  display: block; /* Блок дисплея вместо встроенного */
  transition: 0.3s; /* Эффекты перехода при наведении (цвет) */
}

/* При наведении курсора мыши на навигационные ссылки измените их цвет */
.overlay a:hover, .overlay a:focus {
  color: #06acf9;
}

/* Расположите кнопку закрыть (верхний правый угол) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
.main{
  display: flex;
  flex-direction: row;
  min-height: calc(100vh - 220px);
  margin: 0 3px;
  
}
.nav{
  display:block;
  width: 250px;
  background-color: #3a558e;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  border-radius: 10px;
}
.menu{
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items:stretch;
  flex-direction: column;
  font-size: 1.3rem;
}

.menu a{
  display:block;
  padding: 1rem;
  text-decoration: none;
  position: relative;
  color: #e9fcfa;
  background: #3a558e;
  border-bottom: 1px solid #1b1b2f;
  border-radius: 10px 10px 0 0;
}

.menu  a::before{
  content:'';
  display:block;
  position: absolute;
  top:0;
  left:0;
  height: 100%;
  width: 5px;
  background: #e9fcfa;
  opacity: 0;
  transition: all .5s;
}

.menu  a:hover{
  padding-left: calc(1rem + 15px);
  background: #1b1b2f;
  background: linear-gradient(#3b3b76, #282847);
	color: #89c4ec;
  border-top-right-radius: 10%;
  border-bottom-right-radius: 10%;
}

.menu  a:hover::before{
  opacity: 1;
}
.item:target {
  max-height: 20rem;
}

.articl{
  background-color: #e9f4fc;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  width: 100%;
  margin-left: 3px;
  border-radius: 10px;
}

.card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  background: #e9fcfa;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  padding: 15px 15px;
  margin: 20px 20px ;
  
}
.card-title{
  font-size: 1.5rem;
  font-weight: bold;
}
.card-text{
  font-size: 1.3rem;
}
.card-text-2{
  font-size: 0.3rem;
}
.card:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.collapse {
  background: #e9fcfa;
  padding: 5px 10px;
}

.collapse a {
  display: block;
  font-size: 1rem;
  color: #1b1b2f;
  position: relative;
  font-family: 'Chakra Petch', sans-serif;
}

.collapse a:hover{
text-shadow: 0 0 10px #89c4ecec;
}

/*.collapse a:before {
  content: "";
  border-top: 7px solid #1b1b2f;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  top: 20px;
  right: 20px;
}*/



.content {
  max-height: 0em;
  transition: 0.3s linear 0s;
  overflow: hidden;
  margin: 10px 10px;
 
}
.inner-content p{
  font-size: 1.2rem;
}
.collapse + .collapse a {
  border-top: 1px solid rgba(101, 130, 135, 0.282);
}
.collapse:target .content {
  max-height: 500em;
}

.collapse:target a:before {
  transform: rotate(-90deg);
}
    
.search-block{
margin-top: 15px;
margin-left: 2px;
margin-bottom: 10px;
}



.search-block form {
display: inline-block;
font-size: 0px;
padding: 2px;
position: relative;
z-index: 1;

}

.search-block input {
background: #3a558e;	
border: 1px solid #141923;
border-radius: 5px 0 0 5px;
color: #89c4ecec;
display: block;
float: left;
font-size: 13px;
font-weight: 400;
height: 40px;
margin: 0px;
padding: 10px 10px;
text-shadow: 0 -1px 0 #000;
width: 200px;
}

.ie .search-block input {
line-height: 40px;
}

.search-block input::-webkit-input-placeholder {
 color: #89c4ecec;
}

.search-block input:-moz-placeholder {
 color: #89c4ecec;
}

.search-block input:focus {
animation: glow 800ms ease-out infinite alternate;
background: #e9fcfa;
border-color: #89c4ecec;
box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
color: #1b1b2f;
outline: none;
}

.search-block input:focus::-webkit-input-placeholder { 
color: #1b1b2f;
}

.search-block input:focus:-moz-placeholder {
color: #1b1b2f;
}

.search-block button {
background: #1b1b2f;
box-sizing: border-box;
border: 1px solid #444;
border-left-color: #000;
border-radius: 0 5px 5px 0;
color: #e9fcfa;
display: block;
float: left;
font-size: 13px;
height: 40px;
line-height: 40px;
margin: 0;
padding: 0;
position: relative;
text-shadow: 0 -1px 0 #000;
width: 80px;
}	

.search-block button:hover,
.search-block button:focus {
background: linear-gradient(#3b3b76, #282847);
color: #89c4ec;
outline: none;
}

.search-block button:active {
background: linear-gradient(#393939, #292929);
box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
top: 1px;
}

.content-text{
  padding: 15px;
}

.footer{
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(#3a558e, black);
  height: 80px;
  margin: 3px;
  border-radius: 10px;
}

.footer a{
  color: #e9fcfa;
  text-decoration: none;
}

.footer a:hover{
color: #89c4ec;
}

@media only screen and (max-width: 600px) {

  .hamburger-lines{
    display: flex;
  }
  .nav{
    display: none;
  }

}
/* Если высота экрана меньше 450 пикселей, измените размер шрифта ссылок и снова установите кнопку закрыть, чтобы они не перекрывались */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}