@font-face {
	font-family: 'Roboto';
	font-weight: 400;
	src: url('/assets/fonts/Roboto-Regular.woff2');
}

@font-face {
	font-family: 'Roboto';
	font-weight: 500;
	src: url('/assets/fonts/Roboto-Medium.woff2');
}

body {
	background-color: #1A2026;
    color: #eaeaec;
	font-family: 'Roboto';
  	font-size: 16px;
  	font-weight: 400;
  	line-height: 1;
  	margin: 0;
  	padding: 0;
}

* {
	box-sizing: border-box;
}

a {
	color: #248BDA;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

img {
	max-width: 100%;
}

strong, b {
	font-weight: 500;
}

select, option, input[type="text"], input[type="password"], input[type="submit"], textarea, button, input[type="url"] {
	border: none;
	font-family: 'Roboto';
	font-size: 16px;
	font-weight: 400;
	outline: none;
}

input[type="submit"], button {
	background: none;
	cursor: pointer;
}

.block {
	background-color: #212A33;
	border-radius: 5px;
}

.ellipsis {
	display: inherit;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.1;
    overflow: hidden;
}

.flex {
	display: flex;
}

.error {
	background-color: #F44336;
	border-radius: 5px;
	color: #ffffff;
}

/* header */

header {
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
}

.header-logo {
	align-items: center;
	display: flex;
}

.header-icon img {
	height: 30px;
}

.header-title {
	color: #ffffff;
	font-size: 28px;
	margin-left: 4px;
}

.container {
	margin: 24px auto;
	width: 640px;
}

/* profile */

.profile {
	flex-direction: column;
	align-items: center;
	padding: 16px;
}

.profile-avatar {
	background-color: #acafb3;
	border-radius: 50%;
	height: 150px;
	padding: 8px;
	width: 150px;
}

.profile-avatar img {
	border-radius: 50%;
	width: 100%;
}

.profile-name {
	color: #eaeaec;
	font-size: 36px;
	margin-top: 16px;
}

.profile-location {
	align-items: center;
	color: #aaacb1;
	display: flex;
	margin-top: 16px;
}

.profile-location img {
	height: 16px;
}

.profile-location span {
	display: inline-block;
	margin-left: 8px;
}

.profile-bio {
	line-height: 1.3;
	margin-top: 16px;
	text-align: center;
	width: 50%;	
}

/* links */

.links {
	margin-top: 16px;
	padding: 16px;
}

.links-title {
	border-bottom: 1px solid #5e646b;
	font-size: 24px;
	padding-bottom: 8px;
	text-align: center;
}

.links-grid {
	display: flex;
	flex-wrap: wrap;
}

.link {
	background-color: red;
	border-radius: 50px;
	color: #fff;
	display: flex;
	align-items: center;
	width: calc((100% - 16px) / 2);
	height: 64px;
	margin-top: 16px;
	padding: 8px 16px;
}

.link:nth-child(2n) {
	margin-left: 16px;
}

.link-icon {
	width: 28px;
}

.link-icon img {
	width: 28px;
}

.link-info {
	flex-grow: 1;
	margin-left: 16px;
}

.link-title {
	font-weight: 500;
}

.link-subtitle {
	margin-top: 4px;
}

.link-tg {
	background-color: #28A8E8;
}

.link-tg:hover {
	background-color: #3cb0ea;
}

.link-email {
	background-color: #4CAF50;
}

.link-email:hover {
	background-color: #66BB6A;
}

.link-ig {
	background: radial-gradient(circle at 30% 110%,
	#ffdb8b 0%,
	#ee653d 25%,
	#d42e81 50%,
	#a237b6 75%,
	#3e57bc 100%);
}

/* footer */

footer {
	line-height: 1.3;
	margin: 0 auto 24px;
	padding: 16px;
	text-align: center;
	width: 800px;
}

/* 404 */

.error404 {
	margin-top: 24px;
	text-align: center;
	padding: 16px 0;
}

.error404 > .title {
	color: #4E8AC1;
	font-size: 200px;
}

.error404 > .description {
	font-size: 24px;
	line-height: 1.3;
	margin-top: 16px;
}

.error404 > .btn {
	margin-top: 32px;
}

.error404 > .btn > a {
	background-color: #353d46;
	border-radius: 50px;
	display: inline-block;
	color: #ededee;
	font-weight: 500;
	padding: 16px 24px;
	text-transform: uppercase;
	transition: all 0.45s ease 0s;
}

.error404 > .btn > a:hover {
	background-color: #495158;
	color: #ffffff;
}

/* 403 */

.page403 {
	background-color: #2B3035;
	border-radius: 5px;
	padding: 16px;
	margin-top: 16px;
	text-align: center;
}

.page403 > .title {
	color: #eceff1;
	font-size: 36px;
}

.page403 > .description {
	color: #eceff1;
	margin-top: 16px;
}

/* 500 */

.page500 {
	color: #eceff1;
	margin-top: 24px;
	padding: 24px 0;
	text-align: center;
}

.page500 > img {
	height: 300px;
}

.page500 > .title {
	font-size: 32px;
	padding-top: 16px;
}

.page500 > .subtitle {
	font-size: 16px;
	padding-top: 8px;
}

/*Адаптивный дизайн*/

@media screen and (max-width: 768px) {
	.container {
		flex-direction: column;
		margin: 16px auto;
		width: 96%;
	}

	.main {
		margin: 16px 0 16px 0;
	}

	/* footer */

	footer {
		width: 96%;
	}
}

@media screen and (max-width: 480px) {
	/* profile */

	.profile-bio {
		width: 100%;
	}

	.link {
		width: 100%;
	}

	.link:nth-child(2n) {
		margin-left: 0;
	}

	/* 404 */

	.error404 > .title {
		font-size: 164px;
	}

	.error404 > .description {
		font-size: 20px;
	}
}

@media screen and (max-width: 280px) {
	body {
		font-size: 14px;
	}
	/* 404 */

	.error404 > .title {
		font-size: 128px;
	}

	.error404 > .description {
		font-size: inherit;
	}
}