@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;500;600&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,400;0,700;0,900;1,700&display=swap");

html {
	font-size: 15px;
	font-family: "Roboto Slab", display;
	text-align: center;
	font-weight: 300;
}

img {
	width: 100%;
	height: auto;
}

body {
	margin: 0 auto;
	display: grid;
	align-items: center;
	margin: 0 5%;
	background: radial-gradient(rgb(255, 255, 255), rgb(249, 247, 247));
	background-attachment: fixed;
}

strong {
	font-weight: 600;
}

.items {
	/* display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 2rem; */
}

.logo {
	margin: 0 auto;
	width: 80px;
	padding-top: 20px;
}

h1 {
	text-align: center;
	break-after: avoid-column;
	font-weight: 600;
	font-size: 2.5rem;
	line-height: 1.3;
	color: rgba(218, 36, 39, 1);
}

h2,
h3 {
	line-height: 1.4;
}

span {
	color: black;
}

h2 {
	font-size: 2rem;
	color: rgba(218, 36, 39, 1);
}

h3 {
	font-size: 1.2rem;
	color: rgba(218, 36, 39, 1);
	margin-bottom: 0.5rem;
}

.split p {
	break-before: column;
}

/* .split p {
	break-inside: avoid;
} */

.highlights {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 4rem;
	text-align: left;
}

.social {
	display: grid;
	margin: 0 auto;
	padding-top: 10px;

	grid-template-columns: 1fr 1fr 1fr;
	max-width: 200px;
}
.social img {
	width: 60%;
	margin: 0 auto;
	height: auto;
}
.social img:nth-child(2) {
	margin-top: 5%;
	width: 80%;
}

a {
	color: rgb(173, 28, 30);
	font-weight: 400;
	text-decoration: none;
}

.intro {
	text-align: center;
	font-size: 1.1rem;
	line-height: 1.6;
	font-weight: 300;
	margin: 0 auto;
	max-width: 720px;
	margin-bottom: 4rem;
}

.split {
	text-align: left;
	columns: 2;
	column-gap: 3rem;
	column-rule: solid 1px red;
}

.codesandbox {
	height: 600px;
	border: solid 2px black;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: -11px 17px 39px rgba(0, 0, 0, 0.6);
	width: 100%;
	margin-bottom: 5rem;
}

iframe {
	height: 600px;
	border: 0;
	overflow: hidden;
	box-shadow: -11px 17px 39px rgba(0, 0, 0, 0.6);
	width: 100%;
}

.fullscreenlink {
	display: block;
	margin-bottom: 5rem;
	margin-left: auto;
	z-index: 1;
	font-size: 16px;
	padding: 10px;
	background: black;
	border-radius: 10px 0 10px 3px;
	box-shadow: -5px 5px 3px rgba(0, 0, 0, 0.2);
	text-decoration: none;
	color: white;
	width: fit-content;
}

@media (max-width: 510px) {
	iframe {
		height: 900px;
	}
}

@media (max-width: 700px) {
	.split {
		columns: 1;
	}
	.highlights {
		grid-template-columns: 1fr;
	}
}