/* General fonts and colors */
body {
	background-image: url(https://res.cloudinary.com/dm7booaf5/image/upload/v1757526433/background_h3h0g5.png);
	background-repeat: repeat;
	background-size: auto;
}

h1 {
	color: #0a74ff;
	font-size: 5.2rem;
	text-align: center;
	padding-bottom: 1.5%;
	font-family: Cherry Bomb One;
}

h2 {
	color: #38a5ff;
	font-weight: 550;
	font-size: 2.4rem;
	font-family: Cherry Bomb One;
}

p {
	font-size: 1.3rem;
	color: #ff6884;
	font-family: Nunito;
}

a:link {
	color: blueviolet;
}

a:visited {
	color: purple;
}

a:hover {
	color: rgb(249, 7, 249);
	transition: transform 0.3s ease;
	transform: scale(1.12);
}

a:active {
	color: plum;
}

.topbar {
	background-color: #ffffff;
}

.vpdiv {
	margin: 0 auto;
	width: 75%;
	height: 110vh;
	background: linear-gradient(to bottom, rgb(255, 255, 255) 40%, rgba(255, 255, 255, 0) 100%);
}

/* bootstrap image gallery edits*/
.row {
	box-shadow: 0 15px 12px rgba(184, 152, 140, 0.6);
	width: auto;
	margin: auto;
	padding-top: 3%;
}

/* Main wrapper for first bit*/
.wrapper {
	display: flex;
	align-items: flex-start;
	margin: 0 auto;
	padding: 0 5%;
}

.div1 {
	flex: 1;
	margin: auto auto auto 3%;
}

/* Carousel */
#carouselExampleIndicators {
	width: 35%;
	height: 15%;
	margin: 0 auto;
	border: 9px solid #ffffff;
	border-radius: 45%;
	overflow: hidden;
	transform: rotate(-7deg);
	box-shadow: -4px 6px 12px rgba(184, 152, 140, 0.9);
}

#carouselExampleIndicators .carousel-inner {
	height: 100%;
}

#carouselExampleIndicators .carousel-item img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Media screening */
@media only screen and (max-width: 1500px) {
	#carouselExampleIndicators {
		width: 40%;
		height: 25%;
	}
}

@media only screen and (max-width: 1200px) {
	h1 {
		font-size: 4.6rem;
	}
}

@media only screen and (max-width: 978px) {
	#carouselExampleIndicators {
		width: 70%;
		height: 40%;
		transform: rotate(0);
	}
	.wrapper {
		flex-direction: column;
	}

	h1 {
		font-size: 4rem;
	}
	h2 {
		font-size: 2.3rem;
	}
	p {
		font-size: 1.1rem;
	}
}

@media only screen and (max-width: 580px) {
	#carouselExampleIndicators {
		width: 90%;
		height: 45%;
	}
}