@import '../../Modules/EventIcons.css';
@import '../../wrappers/NewDesignWrapper.css';
@import '../../Layout/BlurredBackgroundImage.css';

main {
	background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), #333);
	color: white;
}

.Event {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

	.Event > img {
		width: 100%;
		max-height: 30vh;
		object-fit: contain;
		background-color: rgba(0,0,0,0.5);
	}

	.Event :is(.address, time) {
		font-size: 18px;
	}

	.Event .organizer span {
		font-weight: bold;
	}

	.Event h1:first-child {
		margin-top: 0px;
	}

	.Event .online-event {
		align-self: flex-start;
		background-color: var(--logo-red);
		padding: 5px;
		border-radius: 3px;
		font-weight: bold;
	}

		.Event .online-event::before {
			display: inline-block;
			content: '\01F310 \00a0';
		}

	.Event .buy-tickets {
		--radial-gradient-position-y: -100%;
		padding: 10px;
		background-color: var(--logo-color);
		text-decoration: none;
		align-self: flex-start;
		flex-basis: auto;
		text-align: center;
		border-radius: 3px;
		font-size: 20px;
		color: white;
		font-weight: bold;
	}

	.Event a.buy-tickets:hover {
		--radial-gradient-position-y: 100%;
	}

	.Event > a.sameAs {
		align-self: flex-start;
		color: var(--quote-yellow);
	}

	.Event .works-performed {
		padding-left: 7px;
		border-left: 1px solid rgba(255,255,255,0.5);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

		.Event .works-performed::before {
			content: 'PROGRAMME FEATURES';
			display: block;
			margin-bottom: 10px;
		}