/*Fonts include*/

@font-face {
	font-family: 'Eesti';

	src: url('../fonts/GT-Eesti-Pro-Display-Regular.woff2');

	font-weight: 400;

	font-display: swap;
}

@font-face {
	font-family: 'Eesti';

	src: url('../fonts/GT-Eesti-Pro-Display-Medium.woff2');

	font-weight: 500;

	font-display: swap;
}

@font-face {
	font-family: 'Eesti';

	src: url('../fonts/GT-Eesti-Pro-Display-Bold.woff2');

	font-weight: 700;

	font-display: swap;
}

/*Base CSS*/

*,
*::before,
*::after {
	font-family: Eesti, sans-serif;

	box-sizing: border-box;

	margin: 0;

	padding: 0;
}

body {
	font-size: 14px;

	min-width: 360px;

	font-weight: 400;

	position: relative;

	line-height: 1.42857143;

	overflow-x: hidden;

	color: #333;

	-webkit-text-size-adjust: none;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

	background-color: #fff;
}

b,
strong {
	font-weight: 700;
}

img {
	max-width: 100%;

	display: block;
}

a {
	text-decoration: none;
}

/*Main CSS*/

.container {
	max-width: 500px;

	margin: 0 auto;
}

body {
	padding: 0 15px;
}

.header {
	position: sticky;
	top: 0;
	padding-top: 15px;
}

.header__grid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f2f4f6;
	padding: 15px;
	margin-bottom: 20px;
	border-radius: 25px;
}

.logo {
	display: flex;

	align-items: center;

	justify-content: center;

	gap: 5px;
}

.logo__text {
	color: #000;
	font-size: 21px;
	text-transform: uppercase;
	border: 2px solid #0e93fe;
	border-radius: 12px;
	padding: 5px 10px 4px;
}

.logo__text b {
	color: #0e93fe;
}

.menu__btn {
	display: flex;
	width: 43px;
	height: 43px;
	background-color: #0e93fe;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	cursor: pointer;
}

.menu__btn img {
	width: 22px;
}

.menu-wrap {
	visibility: hidden;
	opacity: 0;
	max-width: 500px;
	width: calc(100% - 30px);
	background: #f2f4f6;
	border-radius: 25px;
	padding: 15px;
	display: flex;
	align-items: center;
	z-index: 50;
	position: fixed;
	left: 50%;
	transform: translate(-50%, -15px);
	justify-content: space-around;
	top: 100px;
	will-change: transform;
	transition: all 0.3s ease;
}

.menu.active .menu-wrap {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, 0);
}

.menu a {
	font-size: 14px;
	color: #34393c;
	display: flex;
	align-items: center;
	gap: 5px;
	text-align: center;
	justify-content: center;
}

.menu a img {
	width: 18px;
}

.article__link h1 {
	color: #34393c;
	font-size: 20px;
	line-height: 1.2;
	margin-bottom: 15px;
}

.article {
	padding-bottom: 95px;
}

.article__link p {
	color: #5e6366;
	font-size: 16px;
	line-height: 1.4;
	margin-bottom: 10px;
}

.rm-btn {
	color: #0e93fe;
	text-decoration: underline;
	font-size: 16px;
}

.rm-btn:hover {
	text-decoration: none;
}

.preview {
	-webkit-line-clamp: 2;

	overflow: hidden;

	white-space: normal;

	text-overflow: ellipsis;

	display: -webkit-box;

	-webkit-box-orient: vertical;
}

.article__link img {
	border-radius: 25px 25px 0 0;
}

.article__content {
	background: #f2f4f6;

	padding: 20px;
	border-radius: 0 0 25px 25px;
}

.article__stat {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 10px;
}

.article__stat > div {
	display: flex;

	align-items: center;

	gap: 3px;
}

.article__stat > div:first-child {
	color: #727a80;
}

.article__stat > div:nth-child(2) {
	color: #0e93fe;
}

.article__stat > div:nth-child(3) {
	color: #727a80;
}

.read__more {
	background-color: #ef4f4f;

	color: #fff;

	font-size: 16px;

	font-weight: 700;

	height: 60px;

	line-height: 60px;

	display: inline-block;

	padding: 0 25px;

	margin-top: 20px;
}

.read__next {
	position: fixed;
	bottom: 15px;
	z-index: 10;
	width: calc(100% - 30px);
	max-width: 500px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #222;
	display: block;
	text-align: center;
	cursor: pointer;
	border-radius: 25px;
	animation: pulse 2s linear infinite;
	transition: all 0.3s ease;
}

.read__next:hover {
	background-color: #0880e1;
	animation: none;
}

@keyframes pulse {
	0% {
		background-color: #23262f;
	}
	50% {
		background-color: #0e93fe;
	}
}