.homepage {
	background-image: url("bg_img.png");
}



p {
	font-size: 12px;
}

.logo {
	display: flex;
	justify-content: center;
}

.logo a img {
	margin-top: 10px;
	margin-bottom: 10px;
	width: 88px;
	height: 73px;
}

.preview {
	width: 384px;
	height: 216px;
	border: 2px solid black;
	border-radius: 2em;
}

.page-space {
	display: flex;
	flex-direction: column;
  	align-items: center;
  	justify-content: center;
}

.container-header {
	padding-inline: 20px;
	width: 800px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
	border-radius: 2em 2em 0em 0em;

	display: flex;
  	align-items: center;
  	justify-content: center;

  	border: 2px solid black;
  	border-bottom: 0px;


}

.container {
	padding-inline: 20px;
	width: 800px;
	background-color: white;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
	border-radius: 0em 0em 2em 2em;

	display: flex;
  	align-items: center;
  	justify-content: center;

  	border: 2px solid black;


}



.carousel {
	width: 840px;
	display: flex;
	flex-direction: row;
	align-items: center;
  	justify-content: center;
}

.row {
	display: flex;
	flex-direction: row;
	align-items: center;
  	justify-content: center;
}

.column {
	display: flex;
	flex-direction: column;
	align-items: center;
  	justify-content: center;
}


#b1 {
	  background-color: rgba(166, 206, 251, 1);
}

#b1:hover, #b1:active {
	  background-color: rgba(143, 180, 223, 1);
}

#b2 {
	  background-color: rgba(152, 231, 132, 1);
}

#b2:hover, #b2:active {
	  background-color: rgba(77, 120, 66, 1);
}

#b3 {
	  background-color: rgba(254, 219, 138, 1);
}

#b3:hover, #b3:active {
	  background-color: rgba(233, 200, 125, 1);
}

#b4 {
	  background-color: rgba(231, 132, 132, 1);
}

#b4:hover, #b4:active {
	  background-color: rgba(207, 117, 117, 1);
}

#b5 {
	  background-color: rgba(195, 160, 254, 1);
}

#b5:hover, #b5:active {
	  background-color: rgba(169, 137, 223, 1);
}


.button {

  color: black;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 2em;
  border: 2px solid black;

  display: flex;
  align-items: center;
  justify-content: center;
}

.button:hover, .button:active {
  color: white;
}

.svg-icon {
  width: 40px;
  height: 40px;
}

.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #4691f6;
}

.svg-icon circle {
  stroke: #4691f6;
  stroke-width: 1;
}


@media (max-width: 900px) {
	.container {
		width: 90%;
	}
	.container-header {
		width: 90%;
	}
	.carousel {
		width: 90%;
		flex-direction: column;
	}
	* {
		font-size: 12px;
	}
	.preview {
	width: 192px;
	height: 108px;
	border-radius: 1em;
	}
}

@media (max-width: 425px) {
	.preview {
	width: 0px;
	height: 0px;
	border: 0px;
	visibility: hidden;
	}
}