/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #212021;
}
	body::-webkit-scrollbar {
		width: 12px;
	}
	body::-webkit-scrollbar-track {
		background-color: rgba(106, 28, 161, 0.8);
/*		-webkit-box-shadow: inset 0 0 6px rgba(106, 28, 161, 1);*/
/*		border-radius: 10px;*/
	}
	body::-webkit-scrollbar-thumb {
		background-color: rgba(240, 191, 76, 1);
/*		-webkit-box-shadow: inset 0 0 6px rgba(255, 209, 102, 1);*/
/*		border-radius: 10px;*/
	}

/* Backgrounds */
	.background, .background2, .background3 {
	    position: absolute;
	    width: 100%;
	    height: 100vh;
	    background-size: cover;
	    background-position: center;
	}

	.background2, .background3 {
		top: -30vh;
		background-image: url('./images/Blockies.svg');
	    z-index: -2; /* Pushed further back */
	    opacity: 1; /* Ensure visibility */
	}

	.background3 {
	    top: 70vh;
	    height: 130vh;
	}

	.background {
	    background-image: url('./images/BG-main.png');
	    z-index: -1; /* Above Blockies but below content */
	    opacity: 1;
	    clip-path: polygon(
	    	0% 0%,		/*Top-left*/
	    	100% 0%,	/*Top-right*/
	    	100% 65%,	/*Bottom-right*/
	    	85% 90%,	/*Bottom-center*/
	    	0% 90%		/*Bottom-left*/
	    );
	}

/* Navbar */
	.navbar {
	    position: fixed;
	    top: 0;
	    width: 100%;
	    display: flex;
	    align-items: center;
	    justify-content: space-around;
	    background-color: rgba(106, 28, 161, 0.8);
	    height: 60px;
	    z-index: 1;
	}

	.navbar ul {
	    list-style: none;
	    display: flex;
	    gap: 20px;
	}

	.navbar li {
	    display: flex;
	    align-items: center;
	}

	.navbar a {
	    text-decoration: none;
	    color: white;
	    font-weight: bold;
	}

	.navbar .logo img {
	    height: 40px;
	}

/* Socials */
	.socials {
	    position: fixed;
	    top: 10px;
	    right: 10px;
	    display: flex;
	    gap: 10px;
	    z-index: 1;
	}

	.socials img {
	    width: 40px;
	    height: auto;
	}
	.socials img:hover {
		cursor: pointer;
	}

/*Content containers*/
	.home-content {
		position: relative;
		left: 15%;
		max-width: 70vw;
		height: 200vh;
	}
	.contact-content {
		position: relative;
		left: 15%;
		max-width: 70vw;
		height: 100vh;
	}
	.partners-content {
		position: relative;
		left: 15%;
/*		top: 10vh;*/
		max-width: 70vw;
		height: 100vh;
		overflow-y: scroll;
	}
	.partners-content::-webkit-scrollbar {
		width: 12px;
	}
	.partners-content::-webkit-scrollbar-track {
		background-color: rgba(106, 28, 161, 0.8);
/*		-webkit-box-shadow: inset 0 0 6px rgba(106, 28, 161, 1);*/
/*		border-radius: 10px;*/
	}
	.partners-content::-webkit-scrollbar-thumb {
		background-color: rgba(212, 237, 76, 1);
/*		border-radius: 10px;*/
/*		-webkit-box-shadow: inset 0 0 6px rgba(255, 209, 102, 1);*/
	}
	.about-content {
		position: relative;
		left: 15%;
		max-width: 70vw;
		height: 100vh;
		/*overflow-y: scroll;*/
	}

/*Homepage*/
	/* Main Title */
		.main-title {
		    position: absolute;
		    top: 40vh;
		    left: 40vw;
		    color: white;
		}

		.highlight {
		    color: #FFD166;
		}

	/*Event schedule*/
		.content-event-schedule {
			position: absolute;
			top: 75%;
			width: 55%;
			height: 27.5%;
		}
		.diamond {
			position: absolute;
			top: 5%;
			left: 5%;
			width: 35px;
			height: 35px;
			background-color: #FFD166;
			clip-path: polygon(
				0% 50%,
				50% 0%,
				100% 50%,
				50% 100%
			);
		}
		.content-event-schedule-title {
			position: relative;
			top: 4.5%;
			left: 15%;
			height: 15%;
			font-size: 2em;
			color: #ffffff;
		}
		.content-event-schedule-listing {
			position: relative;
			left: 15%;
			width: 80%;
			height: 20%;
			background-color: #2E2E2E;
			margin-bottom: 5%;
		}
		.listing-date {
			position: absolute;
			left: 2.5%;
			top: 10%;
			width: 10%;
			height: 30%;
			color: #ffffff;
		}
		.listing-image {
			position: absolute;
			left: 15%;
			top: 0;
			width: 30%;
			height: 100%;
		}
		.listing-category {
			position: relative;
			left: 47.5%;
			top: 10%;
			width: 60%;
			font-size: 0.75em;
			color: #ffffff;
		}
		.listing-title {
			position: relative;
			left: 47.5%;
			top: 10%;
			width: 60%;
			font-size: 1.25em;
			color: #ffffff;
		}
		.listing-time {
			position: relative;
			left: 47.5%;
			top: 10%;
			width: 60%;
			font-size: 0.75em;
			color: #FFD166;
		}
		.listing-location {
			position: relative;
			left: 47.5%;
			top: 10%;
			width: 60%;
			font-size: 0.75em;
			color: #FFD166;
		}

	/*Join club*/
		.content-join-club {
			position: absolute;
			left: 32.5%;
			top: 75%;
			width: 35%;
			height: 25%;
		}
		.club-title {
			position: relative;
			left: 20%;
			top: 0;
			width: 60%;
			color: #ffffff;
			text-align: center;
		}
		.club-signup, .club-signup-shadow {
			cursor: pointer;
			position: absolute;
			left: 20%;
			top: 7.5%;
			width: 60%;
			height: 10%;
			background-color: #F72585;
		}
		.club-signup-shadow {
			position: absolute;
			left: 21%;
			top: 8.5%;
			background-color: #FFD166;
		}
		.club-signup p {
			font-size: 1.75em;
			margin: 3.5% 7.5% 0 7.5%;
			color: #ffffff;
		}
		.club-signup-img{
			position: relative;
			left: 10%;
			top: 20%;
			width: 80%;
			max-height: 60%;
		}
		.club-signup-img-caption {
			position: relative;
			left: 10%;
			top: 19%;
			width: 80%;
			height: 10%;
			background-color: #6A1CA1;
		}
		.club-signup-img-caption p {
			font-size: 1.25em;
			text-align: center;
			margin: 0 5% 0 5%;
			color: #ffffff;
		}

	/*Post card*/
		.content-postcard {
			position: absolute;
			top: 47.5%;
			left: 7.5%;
			width: 90%;
			height: 22.5%;
			background-color: #6A1CA1;
		}
		.content-postcard-image {
			position: relative;
			top: 4%;
			left: 1%;
			width: 57.5%;
		}
		.content-postcard-content {
			position: absolute;
			top: 5%;
			left: 62.5%;
		}
		.content-postcard-logo {
			position: relative;
			width: 60px;
		}
		.content-postcard-title {
			position: relative;
			margin-top: 5%;
			color: #ffffff;
			font-size: 2em;
		}
		.content-postcard-text {
			position: relative;
			margin-top: 5%;
			color: #ffffff;
			font-size: 1em;
		}

/*Contact*/
	.contact-diamond {
		position: absolute;
		top: 10%;
		left: 10%;
		width: 40px;
		height: 40px;
		background-color: #FFD166;
		clip-path: polygon(
			0 50%,
			50% 0%,
			100% 50%,
			50% 100%
		);
	}
	.contact-title {
		position: relative;
		top: 9.5%;
		left: 15%;
		font-size: 3em;
		color: #ffffff;
	}
	.contact-logo, .contact-love-button-icon {
		position: absolute;
		top: 25.5%;
		left: 20%;
		width: 100px;
		height: auto;
	}
	.contact-love-button-icon {
		top: 45.5%;
		left: 20%;
	}
	.contact-text {
		position: absolute;
		top: 22.5%;
		left: 35%;
		width: 40vw;
		height: 40vh;
		font-size: 1.25em;
		color: #ffffff;
	}
	.contact-text a {
		color: #ffffff;
	}
	.contact-text a:hover {
		color: rgba(106, 28, 161, 0.8);
	}

/*Partners*/
	.partners-diamond {
		position: absolute;
		top: 10%;
		left: 10%;
		width: 40px;
		height: 40px;
		background-color: #FFD166;
		clip-path: polygon(
			0 50%,
			50% 0%,
			100% 50%,
			50% 100%
		);
	}
	.partners-title {
		position: relative;
		top: 9.5%;
		left: 15%;
		width: 70%;
		font-size: 3em;
		color: #ffffff;
	}
	.partners-text {
		position: relative;
		left: 15%;
		top: 10%;
		max-width: 70%;
		height: 20%;
		font-size: 1.15em;
		color: #ffffff;
	}
	.partner-left, .partner-right {
		position: relative;
		width: 80%;
		height: 17.5%;
		margin-top: 5%;
	}
	.partner-right {
		left: 20%;
	}
	.partner-left-title, .partner-left-subtitle {
		position: relative;
		left: 45%;
		max-width: 50%;
		margin: 0.5% 0% 0.5% 0%;
		font-size: 1.5em;
		color: #ffffff;
	}
	.partner-left-subtitle {
		font-size: 1em;
		color: #FFD166;
	}
	.partner-left-text {
		position: relative;
		left: 45%;
		max-width: 50%;
		color: #ffffff;
	}
	.partner-right-title, .partner-right-subtitle {
		position: relative;
		text-align: right;
		right: -5%;
		max-width: 50%;
		margin: 0.5% 0% 0.5% 0%;
		font-size: 1.5em;
		color: #ffffff;
	}
	.partner-right-subtitle {
		font-size: 1em;
		color: #FFD166;
	}
	.partner-right-text {
		position: relative;
		text-align: right;
		right: -5%;
		max-width: 50%;
		color: #ffffff;
	}
	.partner-left-icon-rectangle, .partner-left-icon-square {
		position: absolute;
		left: 20%;
		top: 27.5%;
		max-width: 15%;
		max-height: 50%;
	}
	.partner-left-icon-square {
		top: 10%;
		max-width: 25%;
		max-height: 80%;
	}
	.partner-right-icon-rectangle, .partner-right-icon-square {
		position: absolute;
		right: 20%;
		top: 10%;
		max-width: 35%;
		max-height: 80%;
	}
	.partner-right-icon-rectangle {
		top: 25%;
		max-width: 20%;
		max-height: 50%;
	}
	.partner-left-bg, .partner-right-bg {
		position: absolute;
		width: 80%;
		height: 100%;
		background-color: #6A1CA1;
	}
	.partner-left-bg {
		clip-path: polygon(
			0% 0%,
			45% 0%,
			55% 100%,
			0% 100%
		);
	}
	.partner-right-bg {
		left: 20%;
		clip-path: polygon(
			45% 0%,
			100% 0%,
			100% 100%,
			55% 100%
		);
	}

/*About us*/
	.about-diamond {
		position: absolute;
		top: 10%;
		left: 10%;
		width: 40px;
		height: 40px;
		background-color: #FFD166;
		clip-path: polygon(
			0 50%,
			50% 0%,
			100% 50%,
			50% 100%
		);
	}
	.about-title {
		position: relative;
		top: 9.5%;
		left: 15%;
		width: 70%;
		font-size: 3em;
		color: #ffffff;
	}
	.about-image {
		position: relative;
		top: 15%;
		left: 15%;
		width: 25%;
		height: auto;
	}
	.about-text {
		position: absolute;
		left: 42.5%;
		top: 22.5%;
		max-width: 50%;
		height: 20%;
		font-size: 1em;
		color: #ffffff;
	}
	.about-pink-yellow {
		position: absolute;
		left: 15%;
		top: 40%;
		width: 20%;
		height: 5%;
	}
	.about-pink, .about-yellow {
			cursor: pointer;
			position: absolute;
			left: 20%;
			top: 7.5%;
			width: 100%;
			height: 100%;
			background-color: #F72585;
		}
		.about-yellow {
			position: relative;
			left: 21.5%;
			top: 15%;
			background-color: #FFD166;
		}
		.about-pink p {
			font-size: 1.75em;
			margin: 3.5% 7.5% 0 7.5%;
			color: #ffffff;
		}
/* Bottom Bar */
	.bottombar {
	    position: relative;
	    bottom: 0;
	    width: 100%;
	    background-color: #6A1CA1;
	    padding: 20px;
	    text-align: center;
	}

	.bottombar p {
	    color: white;
	}

	.partners {
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    justify-content: space-evenly;
	    align-items: center;
	    gap: 20px;
	}

	.partners img {
	    height: 60px;
	    object-fit: contain;
	}