:root {
    --titlefont: Rubik Mono One;
    --bodyfont: Bebas Neue;



	--page-title: 2rem;
	--section-title: 1.75rem;
	--section-body: 1rem;
	--value-title: 1.5rem;
	--value-body: 1rem;
	--exec-name: 1.5rem;
	--exec-title: 1.25rem;
	--exec-bio: 1rem;



    --fontwhite90: #ffffffe0;
    --fontwhite80: #ffffffbb;
    --fontwhite70: #ffffff97;
    --fontwhite50: #ffffff55;





    --primCol: #7E47D1;
    --secCol: #63E9BA;
    --dmbgCol: #121212;
    --dmsurColOne: #232323;
    --dmsurColTwo: #343434;
    --dmsurColThr: #454545;
    --dmsurColFou: #565656;
    --dmerrorCol: #CF6679;
	--dmwarnCol: #CF8540;
	--dmcautCol: #CFCD66;

    --lmerrorCol: #B00020;
}

body {
    margin: 0;
    padding: 0;
}

a {
	text-decoration: none;
}

section {
	margin-top: 2rem; 
}

.page {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--dmbgCol);
}

.maincontainer {
	margin-top: 56px;

	display: flex;
	flex-direction: column;
	align-items: center;
}

.maincontentcontainer {
	width: 80%;
}





/* sections */
.section-divider {
	height: 0.2rem;
	background-color: var(--dmsurColTwo);
	margin: 2rem 0;
	border-radius: 1rem;
}





/* text */
.page-title {
	font-family: var(--titlefont);
	font-size: var(--page-title);

	color: var(--fontwhite90);
}

.section-title {
	margin: 0 0 1.5rem 0;
	font-family: var(--titlefont);
	font-size: var(--section-title);
	color: var(--fontwhite90);
}

.section-body {
	margin-top: 1rem;
  
	font-family: var(--bodyfont);
	font-size: var(--section-body);

	color: var(--fontwhite90);

	word-spacing: 0.1rem;
	letter-spacing: 0.01rem;
}

.value-title {
	font-family: var(--titlefont);
	font-size: var(--value-title);

	color: var(--fontwhite90);
}

.value-body {
	margin-top: 1rem;

	font-family: var(--bodyfont);
	font-size: var(--value-body);

	color: var(--fontwhite90);

	word-spacing: 0.1rem;
	letter-spacing: 0.01rem;
}

.exec-name {
	font-family: var(--titlefont);
	font-size: var(--exec-name);

	color: var(--fontwhite90);
}

.exec-title {
	margin: 0.5rem 0 1rem 0;

	font-family: var(--bodyfont);
	font-size: var(--exec-title);

	color: var(--fontwhite90);

	word-spacing: 0.1rem;
	letter-spacing: 0.01rem;
}

.exec-bio {
	font-family: var(--bodyfont);
	font-size: var(--exec-bio);

	color: var(--fontwhite90);

	word-spacing: 0.1rem;
	letter-spacing: 0.01rem;
}




.carddatabasetilewrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
  
	margin-bottom: 2rem;
}

.carddatabasetile {
	aspect-ratio: 11/15;
	width: 20rem;
	height: 27.27rem;
}

.carddatabasetileimagecontainer {
	height: inherit;
	border-radius: 1rem;
	overflow: hidden;
}

.carddatabaseimage {
	width: 100%;
	scale: 110%;
	object-fit: cover;
	cursor: pointer;
}

a {
	cursor: pointer;
}



.filter-section-section {
	display: flex;
	flex-direction: column;
	align-items: center;
}

#filter-form {
	display: flex;
	flex-direction: column;
}

.main-filter-wrapper {
	display: flex;
	gap: 2rem 4rem;
	flex-wrap: wrap;
}

.filter-wrapper {
	display: flex;
	flex-direction: column;
	align-items: start;
}

.filter-section {
	display: flex;
	flex-direction: column;
}






.pagination-controls {
	display: flex;
	justify-content: end;
	align-items: center;
	margin-bottom: 2rem;
	gap: 2rem;
}

.pagination-button {
	color: var(--fontwhite80);
	font-family: var(--bodyfont);
	font-size: 1.25rem;
}

.pagination-select {
	background-color: var(--dmsurColTwo);
	color: var(--fontwhite80);
	border-style: none;
	padding: 0.5rem 1rem;
	border-radius: 1rem;
	font-family: var(--bodyfont);
	font-size: 1.25rem;
	cursor: pointer;
}


.featured-section {
	display: flex;
	flex-direction: column;
	align-items: center;
}





dialog {
	background-color: var(--dmsurColOne);
	box-shadow: 0px 8px 12px black;
	border-style: none;
	border-radius: 1rem;
}

dialog::backdrop {
	background-color: #121212DD;
}


.card-modal {
	display: flex;
}

.card-modal-info {
	display: flex;
	flex-direction: column;
	padding: 1rem;
}

.card-modal-image-container {
	display: none;
	box-shadow: 0px 8px 12px black;
}

.card-modal-image {
	display: none;
}

.modal-info {
	margin-top: -0.5rem;
	font-family: var(--bodyfont);
	font-size: 20px;
	letter-spacing: 0.05rem;
	color: var(--dmtextColHME);
	max-width: 64ch;
}

.modal-close-button {
	background: none;
	border: none;
	color: var(--dmerrorCol);
	transition-duration: 0.4s;
	font-family: var(--titlefont);
	font-size: 1.5rem;
}







@media (min-width: 601px) {
  
  .carddatabasetilewrapper:hover .carddatabasetile:not(:hover) {
  	filter: /*blur(0.1rem)*/ saturate(30%);
    transform: scale(1);
  }
  
  .carddatabasetile:hover {
  	filter: none;
    transform: scale(1.1);
    z-index: 10;
  }
  
  .carddatabasetile {
	transition-duration: 0.2s;
  }
  
  .card-modal-image-container {
    display: block;
	max-width: 20rem;
	aspect-ratio: 11/15;
	width: 20rem;
	height: 27.27rem;
	overflow: hidden;
	border-radius: 1rem;
  }

  .card-modal-image {
    display: block;
	width: 100%;
	scale: 110%;
  }
}