@import url(primary.css);

/* css fully written by Karolina Krysiak */

/* Reset default styles for all elements */
*,
::before,
::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	max-width: 100%;
}

/* Apply styles to the HTML and body elements */
html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

/* the only way to remove the weird padding that appears inside the rows */
.row-padding > * {
	padding-right: 0;
	padding-left: 0;
}

/* rewritten row into flex so that the images resize correctly */
.flex-top {
	display: flex;
	flex-direction: row;
}
.flex-bottom {
	display: flex;
	flex-direction: row;
}

/* container for the text */
.about-box {
	flex: 50%;
	display: flex;
}

.about-box div {
	margin: 50px 10%;
}

.about-box h2 {
	text-align: center;
	margin-bottom: 50px;
}

/*container for the image */
.about-pic {
	flex: 50%;
	display: flex;
}

/* resizable image that alway fits the size of the content from the oposite side of the row */
.about-pic img {
	min-width: 100%;
	min-height: 500px;
	object-fit: cover;
}

@media only screen and (max-width: 1200px) {
	/*makes bit more space for the text so it's more readable by making the image smaller*/
	.about-pic {
		flex: 40%;
	}
}

@media only screen and (max-width: 992px) {
	.flex-top {
		flex-direction: column-reverse;
	}
	.flex-bottom {
		flex-direction: column;
	}
}
