:root {
	--main-font: normal normal 200 normal small "SUSE", sans-serif;
}

html {
	min-height: 100%;
}

body {
	display: flex;
	
	flex-direction: column;
	align-items: center;
	
	width: calc(100vw - (100vw - 100%));
	margin: 0;
	margin-top: 5vh;

	font: var(--main-font);
	font-size: 1.8rem;
	color: white;

	background-color: #000000;
	background: linear-gradient(#000000, #3a7fff);
}

.titleCard {
	display: flex;
	flex-direction: column;
	width: 60vmin;
	margin-bottom: max(10vmin, 40px);
}

.subtitleCard {
	display: flex;
	flex-direction: row;
	justify-content: right;
	width: 50%;
	align-self: end;
}

.nameTitle {
	font: var(--main-font);
	fill: white;
}

.discipline {
	font: var(--main-font);
	fill: white;
	text-align: right;
}

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

	container-type: inline-size;
	width: clamp(90vmin, 80vw, 150vh);
}

.entry {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: stretch;
	align-items: stretch;
	gap: 2cqw;

	position: relative;
	margin-bottom: 5vmin;
	width: 100cqw;
	padding: 1cqmax;

	border-radius: 0.5cqmax;
	background: linear-gradient(#ffffff05, #ffffff11);
}

.entry::after {
	content: "";

	position: absolute;
	inset: 0;
	z-index: -1;

	background: radial-gradient(#ffffff22 0.1cqmax, #e5e5f700 0.1cqmax);
	background-size: 1.5cqmax 1.5cqmax;
}

.entryTitleCard {
	flex-basis: 48cqw;
	flex-shrink: 1;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.entryTitle {
	text-decoration: unset;
	color: unset;
	font-size: clamp(1.7rem, 3.6cqmax, 5rem);
	font-weight: 400;
	text-wrap-mode: nowrap;
}

.entryImage {
	position: relative;
	flex-grow: 1;
}

.entryImage::before {
	content: "";
	opacity: 0;
	color: white;

	transform: translateX(-10vmax);

	transition: transform 0.2s ease,
				opacity 1s ease;
}

.entryImage > img, .entryImage.unannounced > div {
	max-width: 99%;
	max-height: 99%;
	
	border-radius: 0.5cqmax;

	transition: transform 0.5s ease,
				opacity 0.5s ease;
	
	filter: drop-shadow(10px 10px 10px #00000044);
}

.entryImage:hover > img, .entryImage.unannounced:hover > div {
	transform: perspective(40cqw) rotateY(1deg) translateX(-0.5cqw) translateZ(-1cqh);
	opacity: 50%;
}

.entryImage:hover::before {
	position: absolute;
	inset: 0;
	z-index: 1;

	content: "";
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M15.6396 7.02527H12.0181V5.02527H19.0181V12.0253H17.0181V8.47528L12.1042 13.3892L10.6899 11.975L15.6396 7.02527Z' fill='white' /%3E%3Cpath d='M10.9819 6.97473H4.98193V18.9747H16.9819V12.9747H14.9819V16.9747H6.98193V8.97473H10.9819V6.97473Z' fill='white' /%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 5cqmin;
	background-position: 50%;

	opacity: 100%;
	backdrop-filter: blur(0.2vmin);

	transform: translateX(0);
}

.entryImage.unannounced:hover::before {
	background-image: url("./Images/iiam.png");
	background-size: 10cqmin;
}

.entryImage.unannounced {
	width: 100%;
	min-height: 25vh;
}

.entryImage.unannounced > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 99%;
	height: 99%;

	border-radius: 0.5cqmax;

	--s: 82px; /* control the size*/
	--c1: #161616;
	--c2: #2e2e2e;
	--c3: #252525;
	
	--_g: var(--c3) 0 120deg,#0000 0;
	background:
	  conic-gradient(from -60deg at 50% calc(100%/3),var(--_g)),
	  conic-gradient(from 120deg at 50% calc(200%/3),var(--_g)),
	  conic-gradient(from  60deg at calc(200%/3),var(--c3) 60deg,var(--c2) 0 120deg,#0000 0),
	  conic-gradient(from 180deg at calc(100%/3),var(--c1) 60deg,var(--_g)),
	  linear-gradient(90deg,var(--c1)   calc(100%/6),var(--c2) 0 50%,
							var(--c1) 0 calc(500%/6),var(--c2) 0);
	background-size: calc(1.732*var(--s)) var(--s);

  }

.entryImage.unannounced > div > p {
	padding: 0 1.5vmin 0 1.5vmin;
	margin: 0;

	font-size: clamp(1.7rem, 3.6cqmax, 5rem);
}

.entryImage.unannounced > div > :last-child {
	color: black;
	background-color: white;
}

.entryPlatforms{
	display: flex;
	flex-direction: row;
	gap: 0.3cqmax;
	padding: 0;
	margin: 0;
}

.entryPlatforms > li {
	font-size: clamp(1rem, 1.5cqmax, 4rem);
	font-weight: 400;

	border: 0.2cqmin solid #ffffff55;
	border-radius: 0.5cqmax;
	padding: 0 0.8cqmax 0 0.8cqmax;

	color: #ffffff55;
}

.entryPlatforms > li::marker {
	content: "";
}

.entryDetails {
	flex-basis: 48cqw;
	flex-shrink: 1;
	flex-grow: 1;

	display: flex;
	flex-direction: column;

	font-size: clamp(1rem, 2cqmin, 1.5rem);
}