@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,900;1,900&family=Raleway:ital,wght@0,500;0,700;1,500;1,700&display=swap');

*{	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body{
	display: grid;
	font-family: 'Raleway', sans-serif;
	font-weight: 500;
	font-size: 1.25rem;
	background: #fff;
    justify-items: center;
}

header {
	margin: 40vh 0;
	width: 100vw;
	position: sticky;
	top: 0;

/*	background: yellow;*/
}

h1, h2, h3, h4 {
	font-family: 'Montserrat', sans-serif;
	margin:0;
	overflow: hidden;
}

h1 {
	text-align: center;
	font-size: 6rem;
	letter-spacing: 2rem;
	padding-left: 2rem;
}

h2{ 
color: silver;
text-align: center;
font-size: 2rem;/*3.47rem;*/
	letter-spacing: 1.5rem;
	padding-left: 2rem;
}

a {	text-decoration: none;
color: silver;
}

a:hover{color: red}

.bw {
	background: #fff; /*фон більй*/
}

.bw > h2 {
		color: #000; /*текст чорний*/
}

.right-top {
	position:fixed;
	width:8rem;
	height:16rem;
	top:0;
	right:0;/
}

main {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

main > div > img {
  width: 100%;
  height: 100%;
  object-fit: cover;  
  }

.bio{
	padding: 1.25rem 8rem;
	grid-template-columns: 8rem auto;
}

.bio > div {
	padding-bottom: 1.25rem;
}

.bio > div > a {
color: black;
}
.bio > div > a:hover{color: red}

.intro {
	padding: 1.25rem 8rem;
	grid-column: 1 / span 2;
}

.year {

	font-weight: bold;
}

footer{
	padding: 1.5rem;
/*	font-size: 1.25rem;*/
}

footer > p {text-align: center;}

.ico{
width:4rem;
height:4rem;
margin:2rem;
display:inline-block;
}

.ico_instagram{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-width='3'%3E%3Crect x='3' y='3' width='26' height='26' rx='6' ry='6'/%3E%3Ccircle cx='16' cy='16' r='6'/%3E%3C/g%3E%3Ccircle fill='%23000' stroke='none' cx='23.5' cy='8.5' r='2'/%3E%3C/svg%3E");
}

.ico_email{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round' d='M3 7h26v18h-26zM3 25l9 -9M20 16l9 9M3 7l12 12h2l12 -12' /%3E%3C/svg%3E");
}

.ico_twitter{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 128 128'%3E%3Cpath fill='%23000' d='M120,10c-4.9,3-10.4,5.2-16.2,6.3c-4.6-5.1-11.3-8.3-18.6-8.3c-14.1,0-25.5,11.7-25.5,26.2c0,2.1,0.2,4,0.7,6c-21.2-1.1-40.1-11.5-52.7-27.4c-2.2,3.9-3.5,8.4-3.5,13.2c0,9.1,4.5,17.1,11.4,21.8c-4.2-0.1-8.1-1.3-11.6-3.3v0.3c0,12.7,8.8,23.3,20.5,25.7c-2.1,0.6-4.4,0.9-6.7,0.9c-1.6,0-3.3-0.2-4.8-0.5c3.3,10.4,12.7,18,23.9,18.2c-8.7,7-19.8,11.2-31.7,11.2c-2.1,0-4.1-0.1-6.1-0.4c11.3,7.4,24.7,11.8,39.2,11.8c47,0,72.7-39.9,72.7-74.5c0-1.1,0-2.3-0.1-3.4c5-3.7,9.3-8.3,12.7-13.6c-4.6,2.1-9.5,3.5-14.7,4.1C111.4,21.2,118.1,16.1,120,10z'/%3E%3C/svg%3E");
}

.ico_nft{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-linecap='round' d='M6,17v30l26,15l26,-15v-30l-26,-15zM16,40v-16l9,16v-16m6,16v-16h6m-6,8h5m5,-8h8m-4,0v16'/%3E%3C/g%3E%3C/svg%3E");
}

@media (max-width: 640px) {
	body{
		font-size: 1rem;
	}
	
	main {
		grid-template-columns: 1fr;
	}

	h1{
		font-size: 3rem; /*2.75rem*/
		letter-spacing: 1rem;
		padding-left: 1rem;
	}
	h2{
		font-size: 1rem; /*1.675rem*/
		letter-spacing: 0.75rem;
		padding-left: 1rem;
	}
	.right-top {
	width:4rem;
	height:8rem;
}
	.ico{
		width:2rem;
		height:2rem;
		margin:1rem;
}
	footer{
		padding: 1.25rem;
	}




.intro {
	padding: 1.25rem 4rem;
}


.bio{
	padding: 1rem 4rem;
	grid-template-columns: 4rem auto;
}

.bio > div {
	padding-bottom: 1rem;
}

}