html {
    font-size: 20px;
}

@media only screen and (min-width: 1600px) {
	html {font-size: 22px;}
}

@media only screen and (min-width: 1900px) {
	html {font-size: 24px;}
}

@media (min-width: 2100px) {
	html {font-size: 32px;}
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	background-color: #000;
	font-family: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

a {
	text-decoration: none;
}

img {
	width: 100%;
}

h1 {
	hyphens: none;
}

#e a:not(.g) {
	color: #696969;
	font-weight: bold;
}

#e a:not(.g):hover {
	color: #333;
}

/*<p>, в котором заключена ссылка <a> "Читать в блоге" в разделе "Новости блога" справа*/
.c {
	text-align: right;
	margin-top: .5em;
}

/*Ссылка <a> "Читать в блоге" в разделе "Новости блога" справа*/
/*Заключена в <p class="c"></p>*/
.e {
	padding: .3rem .5rem;
	font-size: .8em;
	color: #BFBFBF;
	border: 1px solid #BFBFBF;
	border-radius: .5rem;
}

.e:hover {
	color: #FFF;
	border-color: #FFF;
	/*
	color: #000;
	border-color: #FFF;
	background-color: #FFF;
	*/
}

/*Ссылка <a> "Читать в блоге" в основном разделе файла index.html*/
/*Заключена в <p class="c"></p>*/
.g {
	padding: .3rem .5rem;
	font-size: .8em;
	color: #696969;
	border: 1px solid #696969;
	border-radius: .5rem;
	font-style: italic;
}

.g:hover {
	color: #FFF;
	background-color: #696969;
}

/*
.mobile-only {
    display: none;
}
*/

/*svg-рисунок логотипа сайта*/
#b {background-color: #000; width: 60%;}
#b path {stroke: #FFF; stroke-width: 1; fill: #FFF;}


/* Псевдокнопки меню шапки сайта: "Блог", "Обзор ручек", "Обзор чернил" и т.д.*/
.a {
	display: inline-block;
	padding: .2rem .4rem;
	color: #BFBFBF;/*#bfdbfd;*/  /*Красивый цвет!!!*/
}

.a:last-child {
	margin-right: 0;
}

.a:hover {
	background-color: #000;
	color: #FFF;
	cursor: pointer;
}

.a[data-clicked] {
	background-color: #000;
	color: #E1E1E1;
}

.a[data-clicked]:hover {
	color: #FFF;
}

/*Выпадающее меню в шапке сайта*/
.d {
	position: absolute;
	padding: .4rem;
	background-color: #E1E1E1;
	/*color: #000;*/
	font: italic .8rem 'Trebuchet MS', Arial, sans-serif;
	/*font-family: 'Trebuchet MS', Arial, sans-serif;
	font-style: italic;*/
	border: 2px solid #d2d2d2;
	border-radius: .4rem;
	cursor: pointer;
	z-index: 100;
}

/*Ссылка <a> в выпадающем меню шапки сайта*/
.d a {
	text-decoration: none;
	color: #333;
	line-height: 1.5;
	font-weight: normal;
}

.d a:hover {
	color: #4682B4;
}

/*Основной раздел, где размещается статья*/
#e {
	padding: 1rem;
	min-height: 90vh;
	border-radius: 0.5rem;
	background-color: #FFF;
	text-align: justify;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	/*color: #333;*/
}

#e li {
	margin-top: 1em;
	margin-bottom: 1em;
}

@media screen and (min-width: 1300px) {
	#e {padding: 2rem;} /*Основной раздел, где размещается статья*/
	.a {margin-right: .5rem;} /* Псевдокнопки меню шапки сайта: "Блог", "Обзор ручек" и т.д.*/
}

#e h1 {
	text-align: center;
	margin: 0 0 1em 0;
	font-size: 1.5em;
}

/*Раздел "Новости блога" справа*/
#n {
	padding: .5rem;
	/*font: italic .9rem Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;*/
	font: italic .9rem Arial, Helvetica, sans-serif;
	color: #BFBFBF;
	text-align: justify;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

/*Главный заголовок "Новости блога" в разделе "Новости блога" справа*/
#n h1 {
	text-align: center;
	font-size: 1.3rem;
	font-family: Georgia, 'Times New Roman', Times, serif;
}

/*footer*/
#f {
	padding: .5rem 0 2rem .5rem;
}

time {
	font-size: .8em;
}

.news-date {
	text-align: right;
}

/*<p>, в который оборачиваются <img> в статье*/
.i {
	text-align: center;
}

/*<img> в статье*/
.i img {
	width: 86%;
}

/* Пустой класс. Можно использовать*/
/*.f {
	
}*/

/*Класс главной секции статей <section> в файле index.html*/
.h > article {
	opacity: 1;
	transition: opacity 2s;
}


/* Раздел мессенджеров в подвале страницы */
#g {
	float: right;
	/*background-color: gold;*/
}

#g img {
	display: inline-block;
	height: 1rem;
	width: 1rem;
	margin-right: 1rem;
}

/*Надпись копирайт в подвале*/
#h {
	color: #A9A9A9;
	font-size: .7rem;
}

/*<p>, в который оборачиваются ссылки "Читать в ..." в файле js/news.js*/
#i {
	margin-top: 3em;
	display: flex; justify-content: space-between;
}

#i img {
	height: 1em;
	width: 1em;
	margin-bottom: -0.2em;
}