* {
  margin: 0px;
  padding: 0px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}








.grid {width: 100%;
	display: grid;
	grid-gap: 20px;
	grid-template-areas:
		"header"
		"article"
		"aside"
                "main"
		"footer";
}

header {
	grid-area: header;
}

article {
	grid-area: article;
}

aside {
	grid-area: aside;
}

main {
	grid-area: main;
}




footer {
	grid-area: footer;
}






@media (min-width: 770px) {
	.grid {
		grid-template-columns: 2fr 4fr;
		grid-template-areas:
			"header header"
			"aside article"
			"aside main"
                        "footer footer"
	}
}

@media (min-width: 990px) {
	.grid {
		grid-template-columns: 2fr 4fr 1fr;
		grid-template-areas:
			"header header header"
			"aside article main"
			"aside footer footer"
	}
}










.grid > * {
	background-color: ;
	border: 1px solid #212941;
	border-radius: 5px;
	padding: 8px 15px;
	color: #000;
	font-size: 18px;
	font-family: roboto;
}

.grid > *:nth-child(odd) {
	background-color: ;
}



nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  min-height: 8vh;
  background-color: #FFFFFF;
  font-family: 'Poppins', sans-serif;
}

nav .logo a {
  color: #000000;
  letter-spacing: 5px;
  font-size: 25px;
text-decoration: none;
}

nav .nav-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  width: 30%;
}

nav .nav-links li {
  list-style: none;
}

nav .nav-links li a {
  color: white;
  text-decoration: none;
  letter-spacing: 3px;
  
  font-weight: bold;
  font-size: 1.1rem;
}





.nav-links a {  text-decoration: none; border-bottom: 1px solid currentColor; border-bottom-color: silver;
 padding-bottom: 0px; 
color: #000000;
font-weight: ;
letter-spacing: 1px;
font-weight: ;
line-height: ;


padding: 3px;
margin-bottom: 0px;
font-size: 16px;
}




.nav-links a:hover {
    background: ; /* Цвет фона под ссылкой */ 
    color: #FF00CC; /* Цвет ссылки */ 
 border-bottom-color: #FF00CC;  

} 



nav .burger {
  display: none;
}

nav .burger div {
  width: 25px;
  height: 3px;
  background-color: #000000;
  margin: 5px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}






@media screen and (max-width: 1024px) {
  .nav-links {
    width: 60% !important;
  }
}

@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }


  body .nav-links  {
    position: absolute;
    right: 0px;
    height: 92vh;
    font-size: 18px;
    top: 8vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #FFFFFF;
    
    


    width: 30% !important;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform 0.5s ease-in;
    transition: -webkit-transform 0.5s ease-in;
    transition: transform 0.5s ease-in;
    transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
  }
  body .nav-links li {
    opacity: 0;
  }
  body .burger {
    display: block;
    cursor: pointer;
  }
}

.nav-active {
  -webkit-transform: translateX(0%) !important;
  transform: translateX(0%) !important;
}

@-webkit-keyframes navLinkFade {
  from {
    opacity: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

.toggle .line1 {
  -webkit-transform: rotate(-45deg) translate(-5px, 6px);
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  -webkit-transform: rotate(45deg) translate(-5px, -6px);
  transform: rotate(45deg) translate(-5px, -6px);
}

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

.nav-links  a {  text-decoration: none; border-bottom: 1px solid currentColor; border-bottom-color: #000000;
 padding-bottom: 0px; 
color: #000000;

letter-spacing: 1px;
font-weight: ;
line-height: ;
color: ;

padding: 3px;
margin-bottom: 0px;
font-size: 14px;
}



.nav-links a:hover {
    background: ; /* Цвет фона под ссылкой */ 
    color:  #FF00CC; /* Цвет ссылки */ 
 border-bottom-color:  #FF00CC;  

}