/*
Theme Name: 1PROMTRU
Author: S.N.Vedernikov
Author URI: http://1promtai.ru
Description: Мой первый адаптивный шаблон
Version: 2.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

/*-------------------------------------------ДЛЯ ВСЕХ БЛОКОВ------------------------------------------*/
*{
	box-sizing: border-box;
}
/*-------------------------------------------------ОБЩЕЕ----------------------------------------------*/

h1, h2 {
	text-decoration: none;
}
a {
	color: steelblue;
	text-decoration: none;
}
p {
	color: black;
	line-height: 1.5;
}

ul, li {
    list-style-type: none;
	text-decoration: none;
}

body {
	margin: 0;
	font: 81.25% Arial,Helvetica,'Helvetica Neue',sans-serif;
	font-size: 1em;
	background: lightgray;
	color: black;
}

/* --------------------------------------------grid------------------------------------- */

.container {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 0;
}

aside {
	display: block;
}
section {
	line-height: 1.9;
	word-break: break-word;
	overflow-wrap: break-word;
	text-align: left;
	padding: 5px;
}

section a {
	color: black;
	text-decoration: none;
}
/*--------------------------------------------------------------------------------------------*/
 .search {
	display: grid;
	grid-template-columns: 3fr;
	border: 2px solid gray;
	padding: 10px;
}

.poisk {
	background: gray;
	width: 20%;
}
.poisk1 {
	background: gray;
	width: 20%;
}
/* --------------------------------------------навигация------------------------------ */
.container nav {
	
	
}


/* --------------------------------- Пагинация ----------------------------------  */

.page-numbers {
	padding: 10px;
	background: white;
	color: gray;
	border-radius: 2px;
	text-align: center;
	font-weight: bold;
}
.pagination {
	padding: 20px;
	margin: 0;
	text-align: center;
}
.page-numbers:hover {
	transform: scale(101%);
	transition: background-color .1s, transform .2s;
	padding: 10px;
	background: black;
	color: white;
}
/*-------------------------------------------------------------------------*/
header h1 a {
	color: white;
}
header h1 {
	  transition: background-color 0.1s, transform 0.2s;
}
header h1:hover {
	  background-color: black;
	  transform: scale(110%);
	  transition: background-color .1s, transform .2s;
}
header a {
	text-decoration: none;
}
header {
	background: black;
	text-align: center;
	 /*position: sticky;
  top: 0px;
	 z-index: 9999;*/
}
.container footer {
	text-align: center;
	background: black;
}
footer p {
	color: white;
	font-size: 1em;
}
/* ------------------------------------МЕДИАЗАПРОС ДЛЯ РАЗМЕЩЕНИЯ СЕТКИ ------------------------------*/

@media only screen and (min-width: 700px) {
    	
	/*.container {
		grid-template-columns: repeat(3, 1fr);
		line-height: 1.5;
	}*/

	.content-thin {
		display: grid;
		line-height: 1.5;
		padding: 2px;
		background: white;
		grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); /*КОЛИЧЕСТВО, КОЛОНОК*/
		grid-gap: 5px;
	}

	.content-thin a, .content-thin p{
		word-break: break-word;
		overflow-wrap: break-word;
	}

	.article-loop a{
		word-break: break-word;
		overflow-wrap: break-word;
		color: white;
		text-decoration: none;
	}

	.article-loop{
		display: block;
		background-color: white;
		text-align: left;
		border-radius: 2px;
		padding: 2%;
		border: 2px solid white;
		margin: 6px;
	}
	.article-loop p{
		color: black;
		padding: 2%;
	}
	
	a #loop{
		padding: 2%;
		text-decoration: none;
		background-color: rgba(0, 0, 0, 0);
	}
	#loop{
		margin: 0;
		border-radius: 2px 2px 0 0;
		background-color: rgba(0, 0, 0, 0);
	}
	.article-loop {
		  transition: background-color .1s, transform .2s;
	}
	.article-loop:hover {
		  background-color: white;
		  transform: scale(101%);
		  transition: background-color .1s, transform .2s;
		  border: 2px solid white;
	}
	 div#loop:hover {
	  border-bottom: 2px solid black;
	  color: black;
	  transform: scale(101%);
	  transition: background-color .1s, transform .2s;
	}

	 div#loop {
		color: gray;
		background-color: #ffffff;
		border-bottom: 2px solid lightgray;
		min-height: 90px;
		margin-bottom: 5px;
	} 


/* -----------------------------------ОПРЕДЕЛЁННЫЕ СТИЛИ ЭЛЕМЕНТОВ ----------------------------------*/
	
	.container header,
	.container nav,
	.container footer {
		grid-column: span 4;
	}

	.container section {
			grid-column: span 3;
	}
	.reklama{
		display: grid;
		grid-column: span 4;
		grid-gap: 0;
		background: white;
	}
	.reklama h2{
		display: grid;
		text-align: center;
		background: #000000;
		color: #FFFFFF;
		padding: 1% 0;
	}
	
/*----------------------------------------- Верхнее меню------------------------------------ */
	
	
	
	nav ul li {
		display: inline-block;
		padding: 1px;
	}

	nav {
		display: inline-block;
		padding: 10px;
	}

/* -------------------------------------------Меню toggle----------------------------------- */
	/* Меню toggle */
	.toggle {
		display: none;
		text-align: center;
		list-style-type: none;
		text-decoration: none;
	}
}

section img {
	max-width: 100%;
	height: auto;
}

/*-------------------АДАПТИВНОСТЬ НА МАЛОМ ЭКРАНЕ НАЧАЛО----------------------------------------------*/



/*-------------------СКРЫВАЕМ НА МАЛЫХ ЭКРАНАХ--------------------------------------------------------
 * 
visibility: hidden; - это свойство CSS делает текст невидимым, но пространство, выделенное для него, останется. Другими словами, элемент скрыт от просмотра, но не от потока страниц.

display: none - в отличие от первого свойства, это означает, что элемент вообще не будет отображаться на странице. В этом случае тег удаляется из обычного потока страницы, что позволяет другим элементам заполнять его.
 * 
 * --------------------------------------------------------------------------------------------*/

/*@media only screen and (max-width: 1026px) { 
  header h1 { 
	visibility: hidden;
    display: none; 
  } 
}
/*----------------------------------------------------------------------------------------------*/


@media only screen and (max-width: 700px) {
	body { 
 	grid-template-areas: 
		"header"
        "article"
		"footer";
   
 	grid-template-rows: .1fr; 
	grid-template-columns: 1fr;
	}


    #nav {
    	display: none;
    	}
	.reklama3 h2, .reklama4 h2{
	display: grid;
	text-align: center;
	background: #000000;
	color: #FFFFFF;
}
	.reklama5{
		padding: 1%;
	}

	.container nav {
  		background: gray;
	}

	nav ul {
  		list-style: none;
  		margin: 0;
  		padding: 0;
	}

	nav a {
  		color: white;
	}

	nav a:hover {
		text-decoration: none;
	}

	div#loop{
		padding: 20px;
		background: gray;
		color: white;
		font-size: 18px;
	}
}

/*-------------------АДАПТИВНОСТЬ НА МАЛОМ ЭКРАНЕ КОНЕЦ----------------------------------------------*/





/* ----------------------------------------grid ----------------------------------------------*/
.container {
  	display: grid;
  	grid-template-columns: 1fr;
 	grid-gap: 0x;
}



/*----------------------------------------- ВЕРХ НАВИГАЦИЯ ------------------------------------------*/
.container nav {
 	background: white;
	text-align: center;
	margin: 0;

}

nav ul {
  	list-style: none;
  	margin: 0;
  	padding: 5px;
}

nav a {
 	color: black;
	margin: 0;
}

nav a:hover {
  	text-decoration: none;
	color: black;
	border: 2px solid white;
	background: white;
	padding: 5px;
	margin: 0;
	border-radius: 3px;
}
.container nav {
}
.container nav:hover {
	  background: white;
}
#scroll-buttons {
    position: fixed;
    bottom: 20px;
    right: 15px;
    z-index: 100;
}

#scroll-up, #scroll-down {
    display: block;
    margin-bottom: 10px;
    padding: 10px 20px;
    background-color: gray;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
	min-width: 100px;
	z-index: 102;
}

#scroll-up:hover, #scroll-down:hover {
    opacity: 1;
}
#dark-mode-button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: gray;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#dark-mode-button:hover {
    background-color: darkgray;
}

/* Стили для тёмного режима */
body.dark-mode {
    background-color: gray;
    color: white;
}

.dark-mode #dark-mode-button {
    background-color: gray;
}