body {
	--artworks-per-row: 4; /* fallback, don't edit */
	--buttons-per-row: 4; /* edit this one in myag_user/style.css */
	--border-width: 4px;
}

.artworksWrapper, .groupsWrapper {
	width: calc(100% + var(--sizing));
	margin-bottom: 0;
	margin-right: 0;
	user-select: none;
	-webkit-user-select: none;
}

.artwork, .groupButton {
	font-size: var(--font-big-size);
}

/*============================================================================*/
/*                            GROUP BUTTONS SECTION                           */
/*============================================================================*/

.groupButton {
	box-shadow: 0px 0px 14px RGBA(0,0,0,0.1);
	background-color: var(--col-accent);
	color: var(--col-text);
	border-color: var(--col-accent);
	border-width: var(--border-width);
	border-style: solid;
	width: calc(100% / var(--buttons-per-row) - var(--sizing) - var(--border-width) - var(--border-width));
	height: var(--button-height);
	position: relative;
	display: inline-block;
	margin: var(--sizing);
	margin-left: 0;
	margin-top: 0;

	transition: color 0.1s, background-color 0.1s, border-color 0.1s, box-shadow 0.1s;
	cursor: pointer;

}

.groupButton:hover {
	box-shadow: 0px 0px 6px RGBA(0,0,0,0.2);
	background-color: var(--col-body);
	color: var(--col-accent);
	border-color: var(--col-accent);
}

.groupButton:active {
	filter: brightness(90%);
}

.groupButton p {
	padding: 0;
	margin: 0;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	font-family: var(--font-big);
	font-size:   var(--font-btn-size);
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}



/*============================================================================*/
/*                               ARTWORKS PANEL                               */
/*============================================================================*/



.artwork {

	width: calc(100% / var(--artworks-per-row) - var(--sizing));
	padding-top: calc(100% / var(--artworks-per-row) - var(--sizing));
	height: 0;
	position: relative;
	display: inline-block;
	margin: var(--sizing);
	margin-left: 0;
	margin-top: 0;
	vertical-align: middle;
	transition: filter 0.1s;
	filter: none;
	cursor: pointer;
}

.artwork img {
	max-width: 100%;
	max-height: 100%;
	min-width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: contain;
	box-shadow: var(--artwork-box-shadow);
	filter: var(--artwork-drop-shadow);
	transform: translate(-50%, -50%);
}

.artwork:hover {
	filter: brightness(90%);
}

.artwork.inactive:hover {
	filter: none;
}

.artwork:active {
	filter: brightness(80%);
}


#paginationPages {
	width: 100%;
	user-select: none;
	-webkit-user-select: none;
	text-align: center;
}

.paginationPageLink, .paginationArrow {
	display: inline-block;
	margin: 0;
	margin-left: 4px;
	margin-right: 4px;
	color: var(--col-accent);
	text-decoration: none;
	transition: text-decoration 0.3s;
	cursor: pointer;
}

.paginationPageLink:hover, .paginationArrow:hover {
	text-decoration: underline;
	color: var(--col-counterpick);
}

.paginationPageSelected {
	color: var(--col-text);
	text-decoration: underline;
}


#paginationMoreTrigger {
	height: 0;
	width: 100%;
}