/*:root {
  --color-body: #e35d5c;
  --color-white: #fff;
  --color-black: #000;
  --color-purple: #726baf;
  --radius-10: 1rem;
  --fz40px: 4rem;
  --yellow: #e9e25b;
}*/

body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  min-height: 100vh;
  color: #000;
  font-size: 18px;
  background: #FFFFFF;
}
#top {
    border: 1px solid black;
    height: 3000px;
}

#bottom {
    border: 1px solid red;
}

article h1 {
  color: #000;
  padding: 0 40px;
  margin-top: 40px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
article h2 {
  color: #726baf;
  margin: 20px;
  display: flex;
  justify-content: center;
}
.picterFirst {
  display: grid;
  justify-content: center;
  align-items: center;
  margin: 20px;
}
.picterCenter{
  display: grid;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  margin: 40px;
}
/*
img{
	width: 200px; 
	border: 15px solid #dfbf77;
	border-radius: 16px;
    transition: 1s; 
}
img:hover {
    border: 3px solid #65994C; 
    border-radius: 16px; 
	transform: scale(1.5);
   }
*/
ul li {
	margin-left: 20px;
}
ol li {
	margin-left: 20px;
}
img {
	border-radius: 16px;
}
.scale { 
    width: 500px; /* Ширина картинок */
    transition: 1s; /* Время эффекта */
   }
.scale:active {
    transform: scale(1.5); /* Увеличиваем масштаб */
   }
.news {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  margin: 50px;
}
.picterLeft {
  display: grid;
  align-items: center;
  grid-column: 1 / 2;
  position: relative;
}
.picterLeft img {	
  width: 15%;
  position: fixed; 
  top: 155px;
  left: 3%;
  z-index: -1;
}
.picterRight {
  display: grid;
  align-items: center;
  grid-column: 4 / -1;
}
.picterRight img {
  width: 20%;
  position: fixed; 
  top: 155px; 
  right: 2%;
  z-index: -1;
}
.article {
  background-color: #fff;
  border-radius: 25px;
  height: 100%;
  padding: 20px;
  grid-column: 2 / 4;
}

h1 {
  color: #000;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.btn0 {
  display: flex;
  justify-content: center;
  margin: 20px;
}
.btn1 a {
  display: inline-block;
  text-decoration: none;
  width: 7em;
  padding: 10px;
  text-align: center;
  border-radius: 50px 0 0 50px;
  color: #dfbf77;
  background-color: #00353B;
  border: 2px solid #dfbf77; 
}
.btn10 a {
  display: inline-block;
  text-decoration: none;
  width: 9em;
  padding: 10px;
  text-align: center;
  border-radius: 50px 0 0 50px;
  color: #dfbf77;
  background-color: #00353B;
  border: 2px solid #dfbf77; 
}
.btn2 a {
  display: inline-block;
  text-decoration: none;
  width: 7em;
  padding: 10px;
  text-align: center;
  border-radius: 0 50px 50px 0;
  color: #dfbf77;
  background-color: #00353B;
  border: 2px solid #dfbf77;
  border-left: 0 solid #dfbf77;
}
.btn20 a {
  display: inline-block;
  text-decoration: none;
  width: 9em;
  padding: 10px;
  text-align: center;
  border-radius: 0 50px 50px 0;
  color: #dfbf77;
  background-color: #00353B;
  border: 2px solid #dfbf77;
  border-left: 0 solid #dfbf77;
}
.btn3 a {
  display: inline-block;
  text-decoration: none;
  width: 8.5em;
  padding: 10px;
  text-align: center;
  border-radius: 50px;
  color: #dfbf77;
  background-color: #00353B;
  border: 2px solid #dfbf77;
}
.btn4 a {
  display: inline-block;
  text-decoration: none;
  padding: 10px  27px;
  border-radius: 0 50px 50px 0;
  color: #dfbf77;
  background-color: #00353B;
  border: 2px solid #dfbf77;
  border-left: 0 solid #dfbf77;
}
.h2_style {
  display: grid;
  justify-content: center;
  margin: 40px;
}
.sites{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  justify-content: center;
  max-width: 70%;
  grid-gap: 25px;
  margin: 10px 100px 100px 100px;
}




@media (max-width: 1080px) {
  .news {
    margin: 0;
  }
  .article {
    grid-column: 1 / -1;

  }
  .picterLeft {
    display: none;
  }
  .picterRight {
    display: none;
  }
  .picterRight img {
  width: 100%;
  border-radius: 8%;
}
  .sites {
	  max-width: 100%;
  }
  .h2_style {
	  margin: 20px;
  }
}
@media (max-width: 700px) {
  body {
	 
    margin: 0 auto;
  }
  
}