html {
	box-sizing: border-box;
}

body {
    background: rgb(116, 152, 183);
	font-family: josefin sans, system-ui,'Open Sans', sans-serif;
    background-size: cover;
}

/* h1,
h2 {
    font-family: josefin sans, system-ui,'Open Sans', sans-serif;
} */

a:link,
a:visited {
    text-decoration: none; 
    color: inherit;
}

.portfolio-cards {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
	grid-template-rows: repeat(12, 1fr);
}

.portfolio-cards h1 {
	grid-column: 1/4;
	justify-self: center;
}

.portfolio-card {
	display: grid;
	background-color: white;
	border-radius: 20px;
	justify-self: center;
	padding: 20px;
	box-shadow: 5px 5px 20px #00000078;
}


.portfolio-card:nth-child(1) {
	grid-column: 3/6;
	grid-row: 1/4;
	z-index: 3;
}

.portfolio-card:nth-child(2) {
	grid-column: 5/8;
	grid-row: 2/5;
	z-index: 2;
}

.portfolio-card:nth-child(3) {
	grid-column: 7/10;
	grid-row: 3/6;
	z-index: 1;
}

.portfolio-card:nth-child(1):hover,
.portfolio-card:nth-child(2):hover,
.portfolio-card:nth-child(3):hover {
	z-index: 50;
}

.portfolio-card h2 {
    text-align: center;
}

.portfolio-card p {
    font-family: urbanist, sans-serif;
}

.portfolio-card img {
	width: 100%;
	border-radius: 125px;
	border: 1px solid;
}

.portfolio-card h2,
.portfolio-card p,
.portfolio-card img {
	grid-column: 1/3;
}

.portfolio-card-button {
	border: #FF7800 solid 2px;
	border-radius: 5px;
	text-transform: capitalize;
	background-color: #FF7800;
	font-size: 20px;
	justify-self: center;
	padding: 5px;
	font-weight: 600;
	align-self: center;
}


.portfolio-card-button:hover {
	background-color: black;
	border: #FF7800 solid 2px;
	color: #FF7800;
}

.portfolio-about {
	grid-row: 6;
	grid-column: 3/10;
}

@media (max-width: 900px) {

	.portfolio-cards {
		display: block;
	}

	.portfolio-card {
		margin: 20px;
	}


}