@charset "utf-8";
/* CSS Document */
	.eventContainer{
		position:relative;
		display: flex;
		flex-direction: column;
		right: 0%;
		height: 70vh;
	}
	.eventList {
			font-family: "Smiley Sans Oblique";
            position: relative;
			right: 0%;
            display: flex;
            flex-direction: column;
            width: 70vh;
            align-items: center;
            align-content: center;
        }
        .eventRow {
            display: flex;
            flex-direction: row;
            text-align: center;
            justify-content: space-between;
            height: 6.4vh;
            width: 100%;
            padding: 10px;
            border-bottom: 1px solid #444;
        }
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }
        .pagination button {
            margin: 0 5px;
        }
        .eventType {
			font-family: "Smiley Sans Oblique";
            font-size: 3vh;
            font-style: italic;
            color: #444;
            width: 10%;
            height: 100%;
            text-align: left;
            align-items: center;
            align-content: center;
            margin-right: 1.7vh;
        }
        .postDate {
			font-family: "Smiley Sans Oblique";
            font-size: 2vh;
            color: 555;
            width: 10%;
            height: 100%;
            align-items: center;
            align-content: center;
            margin-right: 1.7vh;
        }
        .eventTitle {
			font-family: "Smiley Sans Oblique";
            display: block;
            text-align: left;
            align-items: center;
            align-content: center;
            font-size: 3vh;
            font-style: normal;
            color: #000;
            width: 77%;
            height: 100%;
			transition: 0.2s ease;
			cursor: help;
        }
		.eventTitle:hover{
			background-color: #222;
			color: #CCC;
		}
        .eventTitle a {
            position: absolute;
            align-items: center;
            align-content: center;
            right: 7%;
            font-size: 2.5vh;
            color: #444;
            opacity: 1;
            text-decoration: none;
            transition: 0.2s ease;
        }
        .eventTitle a:hover {
            background-color: #222;
            color: #CCC;
        }
		
        .backgroundImage {
            position: relative;
            left: 0%;
            height: 70vh;
			width: auto;
			aspect-ratio: 5/7;
            background-size: cover;
            background-position: center;
            transition: 0.2s ease;
			/*background-image: url('links/eventData/titleImg/default.webp');*/
			box-shadow: 10px 10px 25px 10px #777;
			margin-right: 10vh;
			border-radius: 10px;
        }
.defaultBkgImg{
			position: relative;
            left: 0%;
            height: 70vh;
			width: auto;
			aspect-ratio: 5/7;
            background-size: cover;
            background-position: center;
            transition: 0.2s ease;
			margin-right: 10vh;
			background-image: url('links/eventData/titleImg/default.webp');
			border-radius: 10px;
}

#mainEventContainer{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50vh;
	left: 50vw;
	transform: translate(-50%,-50%);
	width: 110vh;
	height: 70vh;
}

.pagination button{
	font-size: 1.5vh;
	padding: 0;
	margin: 0.5vh;
	align-content: center;
	align-items: center;
	text-align: center;
	height: 2vh;
	width: 5vh;
	background-color: #CCC;
	color: #111;
	cursor: pointer;
	border: 1px solid #777;
	font-family: "Smiley Sans Oblique";
	border-radius: 5px;
	transition: 0.2s ease;
}
.pagination button:hover{
	background-color: #222;
	color: #CCC;
}
.pagination button:active{
	background-color: #C24;
	color: #fff;
}