*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5em;
}
body {
	background-color: #c0c0c0;
	font-family: Verdana;
	font-size: 15px;
	text-align: center;
}

p {
	text-align: left;
	margin-left: 10%;
	margin-right: 10%;
	font-weight: bolder;
}

img {
	max-width: 100%;
}

hr {
	width: 80%;
	height: 4px;
	background-color: black;
}

.container {
	max-width: 1600px;
	margin: auto;
	border: solid grey 2px;
}

.index {
	display: flex;
	justify-content: center;
	gap: 5em;
}

.list {
	margin: 3em 0;
	padding: 0 3em;
	border: solid 1px red;
	text-align: left;
}

.flex-container {
	text-align: left;
	margin-left: 10%;
	margin-right: 10%;
	margin-top: 3%;
	margin-bottom: 3%;
	max-width: 1600px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2em;
}

.flex-container h3 {
	max-width: 30%;
}

.flex-p {
	max-width: 40%;
	margin-left: 0;
}

.pic-frame {
	/* outline: red 1px solid; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*margin: 10px 10px;*/
}

.vid-frame {
	background-color: cadetblue;
	outline: red 2px solid;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 10px;
}

.pic-frame img {
	padding: 5px;
	filter: grayscale(0);
	transition: 1s;
	object-fit: contain;
}

.pic-frame img:hover {
	filter: grayscale(100%);
	transform: scale(1.1);
}

.pic-p {
	outline: blue 1px solid;
	width: 220px;
	height: 290px;
}

.pic-l {
	outline: blue 1px solid;
	width: 290px;
	height: 220px;
}

.pic-l-big {
	outline: blue 1px solid;
	width: 870px;
	height: 600px;
}

.pic-s {
	outline: blue 1px solid;
	width: 290px;
	height: 290px;
}

.pic-label {
	height: 30px;
	/* outline: green 1px solid; */
	text-align: center;
	/* max-width: 250px; */
	padding: 1%;
	font-family: Verdana;
	font-size: 12px;
	margin: 0 0 5px 0;
}

.portfolio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1em;
	padding: 5em;
	background: #333;
}

.portfolio__item {
	background: white;
}

.portfolio__desc {
	padding: 1.5em;
}

.portfolio__title {
	font-size: 1.5em;
	margin-top: 0;
}