@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
	border: 0;
}

html, body {
	font-family: Arial, sans-serif;
	color: #292c2f;
	height: 100%;
	background-image: url(greg-rosenke-kr67X9ralR0-unsplash.jpg);
	background-size: cover;
}

.wrap {
	width: 100vw;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 4fr;
	grid-template-rows: 1fr auto;
	justify-self: center;
}

header {
	font-family: Megrim, "M PLUS Rounded 1c", sans-serif;
	padding: 3rem;
	grid-row: 1/3;
	grid-column: 1/2;
	background-image: url(royce-fonseca-Qv5ArIrG_AI-unsplash.jpg);
	background-size: cover;
}

main {
	width: 90%;
	padding: 2rem;
	grid-row: 1/2;
	grid-column: 2/3;
}

footer {
	padding: 1rem;
	grid-row: 2/3;
	grid-column: 2/3;
}

/* ---- header ---- */
header h1 {
	writing-mode: tb;
	font-size: 120px;
	color: aliceblue;
}
/* ---- main ---- */

.glass {
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(9px);
	-webkit-backdrop-filter: blur(9px);
	border-radius: 20px;
	border: 1px solid rgba(125, 126, 128, 0.2);
	box-shadow: 0 4px 8px rgba(26, 34, 52, 0.2);
}

.icon-and-name {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: center;
	text-wrap: nowrap;
	position: relative;
	left: -10rem;

	.icon {
		clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	}
	.name {
		font-family: "M PLUS Rounded 1c", sans-serif;
		font-weight: 400;
		font-style: normal;
		padding: 2rem;
		border-left: #7ae9e0 solid 10px;
	}
}

.note {
	padding: 1rem 2rem;
	margin: 0.5rem;
}
em {
	color: #b52c2c;
}

.link {
	display: flex;
	flex-wrap: wrap;

	article {
		display: grid;
		gap: 0 1rem;
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 3rem calc(100% - 4rem);
		width: 20rem;
		justify-self: center;
		align-items: center;
		padding: 1rem;
		margin: 0.5rem;
		transition: 0.3s;

		span {
			width: 48px;
			height: 48px;
			grid-row: 1 / 3;
			grid-column: 1 / 2;
			align-self: center;
			img {
				max-width: 100%;
			}
		}
		.ggmaterial{
				font-size: 48px;
			}
		h3{
			grid-row: 1/2;
			grid-column: 2/3;
			font-family: "M PLUS Rounded 1c", sans-serif;
			font-weight: 600;
			font-style: normal;
		}
		p{
			grid-row: 2/3;
			grid-column: 2/3;
		}
		a {
			display: inline-block;
			position: absolute;
			width: 100%;
			height: 100%;
			cursor: pointer;
		}
	}

	article:hover{
		background-color: #7ae9e02b;
	}
}

@media screen and (max-width: 959px) {

	.icon-and-name {
		left: 0;
		gap: 0;
	}
	.link article{
		width: 100%;
	}

}

@media screen and (max-width: 490px) {

	.icon-and-name {
		left: 0;
		justify-content: center;
		gap: 0;
	}

	.wrap {
		width: 100vw;
		height: 100%;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		justify-items: center;
	}

	header {
		padding: 1rem;
		grid-row: 1/2;
		grid-column: 1/2;
		width: 100%;

		h1{
			writing-mode: lr;
			font-size: 2rem;
			justify-self: center;
		}
	}

	main {
		padding: 1rem;
		grid-row: 2/3;
		grid-column: 1/2;
	}

	footer {
		padding: 1rem;
		grid-row: 3/4;
		grid-column: 1/2;
	}

	.link article{
		width: 100%;
	}

}