@import url("https://fonts.googleapis.com/css?family=Work+Sans:300,regular,600&display=swap");

/* div {
	border: 2px solid rgb(227, 6, 6);
} */
* {
	margin: 0;
	padding: 0;
}
body {
	font-family: "Work Sans", sans-serif;
	margin: 0;
	padding: 0;
	background: rgba(0, 0, 0, 0.9);
}
.wrapper {
	display: flex;
	height: 7em;
}
nav {
	position: fixed;
	width: 100%;
	height: 100px;
	padding: 10px 100px;
	box-sizing: border-box;
	transition: 0.5s;
	z-index: 100;
}

nav.black {
	background-color: rgba(255, 255, 255);
	height: 90px;
	padding: 10px 100px;
}

nav.black .logo {
	background-color: #060606;
	border-radius: 0 20px 0px 40px;
	color: #f4f3f2;
}
nav .logo {
	background-color: #f4f3f2;
	height: 40px;
	float: left;
	transition: 0.5s;
	padding: 5px 15px;
	border-radius: 0 20px;
	margin-top: 20px;
	display: block;
}

.logo:hover {
	transform: scale(1.2);
}

nav ul {
	list-style: none;
	float: right;
	margin: 0;
	padding: 0;
	display: flex;
}

nav ul li {
	list-style: none;
	font-weight: bold;
	font-size: 15px;
	margin: 5px;
}

nav ul li a {
	line-height: 80px;
	color: #fff;
	text-decoration: none;
	padding: 12px 30px;
	text-transform: uppercase;
	text-decoration: none;
	transition: 1s;
}

nav.black ul li a {
	color: rgb(5, 4, 4);
}

nav.black ul li a:hover {
	color: #fffffe;
	background: rgb(9, 9, 9);
	border-radius: 0 40px 0 20px;
}
nav ul li a:focus {
	outline: none;
}

nav ul li a:hover {
	color: #1d1d1c;
	background: #fff;
	border-radius: 0 40px 0 20px;
}

.logo {
	padding-top: 20px;
}

.picture img {
	height: 600px;
	-webkit-filter: drop-shadow(1px 1px 20px rgba(123, 123, 123, 0.4));
	opacity: 0.6;
	border-radius: 80px 180px 80px 0;
	margin-left: -500px;
}

.main-container-text {
	color: white;
	margin-top: 400px;
	margin-left: 150px;
}

.main-content {
	margin-top: 20px;
	display: flex;
	justify-content: space-around;
	animation: fade 0.5s linear forwards;
}

.hide {
	display: none;
}

.text {
	color: rgba(227, 228, 230, 0.55);
	-webkit-filter: drop-shadow(20px 0px 100px rgba(88, 87, 87, 0.6));
}

.project,
.project2,
.project3 {
	display: flex;
	padding: 1rem 1rem;
	vertical-align: middle;
	margin-top: 50px;
}

.work-card,
.work-card2,
.work-card3 {
	height: 400px;
	width: 400px;
}
.work-card img,
.work-card2 img,
.work-card3 img {
	height: 400px;
	width: 400px;
}

.work-info,
.work-info2,
.work-info3 {
	color: white;
	display: inline-block;
	padding: 50px;
}

.work-info a,
.work-info2 a,
.work-info3 a {
	display: inline-block;
	margin-top: 32px;
	padding: 8px 48px 8px 36px;
	border: 1px solid rgba(227, 228, 230, 0.55);

	color: #fff;
	text-decoration: none;
	position: relative;
	transition: 1s;
}

.work-info a:hover,
.work-info2 a:hover,
.work-info3 a:hover {
	color: #060606;
	background-color: #f4f3f2;
	border-radius: 0px 20px 0px 40px;
}

.projectwrap {
	margin: 1rem;
	padding: 2rem 2rem;
	text-align: center;
	margin-left: 20%;
	width: 60%;
}

.hide-ul {
	display: none;
	background-color: #f4f3f2;
	padding: 8px;
	border-radius: 0 20px 0 40px;
}

.black .hide-ul {
	background-color: #060606;
	color: white;
	border-radius: 0 20px 0 40px;
}

.contact {
	margin-top: 20%;
	width: 50%;
	display: flex;
	flex-wrap: wrap;
	margin: 10vh;
}
.form {
	margin-top: 10vh;
	width: 70%;
}
.form h2 {
	background-color: rgba(227, 228, 230, 0.55);
	padding: 2%;
	text-align: center;
	font-weight: bold;
	color: #f4f3f2;
}

input {
	height: 80px;
	margin-top: 20px;
	margin-left: 30px;
	width: 85%;
	text-align: center;
	font-size: 24px;
	border-radius: 40px;
}

.send:hover {
	background-color: #060606;
	color: #f4f3f2;
}
.logo a {
	text-decoration: none;
	color: #060606;
}
.about-info {
	color: #f4f3f2;
	padding-left: 10%;
	padding-top: 10%;
	font-size: 30px;
}

.about-gallery {
	flex: 0 0 50%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: 20px;
}

.about-container {
	display: flex;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.about-img {
	border-radius: 10px;
	overflow: hidden;
}
.about-img img {
	height: 70%;
	width: 70%;
	object-fit: cover;
}
.about-img:nth-child(1) {
	grid-column: 1/2;
	grid-row: 2/4;
}
.about-img:nth-child(2) {
	grid-column: 2/3;
	grid-row: 1/3;
}
.about-img:nth-child(3) {
	grid-column: 2/3;
	grid-row: 3/5;
}
.about-container h2 {
	background-color: #f4f3f2;
	color: #1d1d1c;
	padding: 10px;
	border-radius: 20px;
	margin-bottom: 30px;
}

span {
	margin-bottom: 10px;
}

.black .hide-ul a {
	color: #f4f3f2;
}
.resume {
	display: inline-block;
	margin-top: 62px;
	padding: 8px 48px 8px 36px;
	border: 1px solid rgba(227, 228, 230, 0.55);

	color: #fff;
	text-decoration: none;
	position: relative;
	transition: 1s;
}
@media screen and (max-width: 600px) {
	.about-container h2 {
		background-color: #f4f3f2;
		color: #1d1d1c;
		padding: 0;
	}
	.about-container {
		flex-direction: column;
	}
	.about-gallery {
		align-items: baseline;
		margin-left: 30px;
	}
	nav {
		position: fixed;
		width: 100%;
		height: 100px;
		padding: 0px 41px;
		box-sizing: border-box;
		transition: 0.5s;
		z-index: 100;
	}
	nav .logo {
		background-color: #f4f3f2;
		height: 50px;
		float: left;
		transition: 0.5s;
		padding: 18px 21px;
		border-radius: 0 20px;
		margin-top: -5px;
		font-size: 10px;
		margin-left: -19px;
	}
	nav ul {
		height: 0px;
	}

	nav ul li a {
		padding: 10px;
	}
	nav ul li {
		margin-right: 17px;
		font-size: 10px;
		margin-left: -15px;
		margin-top: auto;
	}

	nav.black ul li {
		margin-right: 17px;
		font-size: 12px;
		margin-left: -15px;
	}
	nav.black ul li a {
		padding: 10px;
	}
	nav.black ul {
		height: 10px;
	}
	nav.black {
		position: fixed;
		width: 100%;
		height: 60px;
		padding: 0px 41px;
		box-sizing: border-box;
		transition: 0.5s;
		z-index: 100;
	}
	nav.black .logo {
		height: 20px;
	}
	.picture img {
		display: none;
	}
	.main-container-text {
		margin-top: 10px;
		margin-left: 25px;
	}

	.project,
	.project2,
	.project3 {
		display: flex;
		padding: 1rem 1rem;
		vertical-align: middle;
		margin-top: 50px;
		flex-direction: column;
		align-items: center;
	}

	.work-card img,
	.work-card2 img,
	.work-card3 img {
		height: 300px;
		width: 300px;
		margin-left: 10%;
	}

	.hide-ul {
		display: block;
	}

	.black .logo {
		display: none;
	}
}