@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');

:root {
	--back:#7f91ba;
	--linkback:#f4eee6;
	--text:#501541;
}

html {font-size: 62.5%;}
h1 {font-size:1.5rem;}
p {font-size:1.4rem;}
a, a:link, a:visited, a:hover, a:active {color:var(--text);text-decoration:none;}
body {background-color:var(--back);color:var(--text);font-family: "M PLUS Rounded 1c", serif;
  font-weight: 400;
  font-style: normal;}
.container{
	width:40vw;
	margin:0 auto;
}

header {
	text-align:center;
	padding:5rem 0 0;
}

main {padding:5rem 0;margin-bottom:6rem;}

.profile img {
	width:10rem;height;auto;border-radius:50%;
}

.bun {background-color:var(--linkback);padding:1rem 2rem;margin-bottom:1rem;font-size:1.5rem;letter-spacing:0.18rem;}

.cols {
	display:grid;
	grid-template-rows:1fr 1fr;
	grid-template-columns:1fr 1fr;
	column-gap: 1rem;
	row-gap:1rem;
	margin-bottom:1rem;
}
.col-border {
	text-align:center;
	padding:3rem 2rem 2rem;
	background-color:var(--linkback);
}
.col1 {grid-row: 1 / 2;
	grid-column: 1 / 2;}
.col2 {grid-row: 1 / 2;
	grid-column: 2 / 3;}
.col3 {grid-row: 2 / 3;
	grid-column: 1 / 2;}
.col4 {grid-row: 2 / 3;
	grid-column: 2 / 3;}

.col .icon {width:6rem;height:6rem;margin:0 auto;}
.col a {display:block;}
.col  svg {width:5rem;height:auto;}
.col svg path {
  fill: var(--text);
}

footer {text-align:center;}
@media screen and (max-width:748px) {
	.container {width:90%;}
}