/*SIDE-SCROLLER*/
.side-scroller{
	white-space: nowrap;
	overflow: hidden;
	height: var(--main-height);
}

.side-scroller-wrapper{
	--frames: 1;
	--frame: 0;
	display: flex;
	height: calc(100% - 2em);
	transition: transform 0.45s cubic-bezier(.22,.61,.36,1) 0s;
	width: calc(var(--frames) * 100%);
	transform: translateX(calc(-1 * 100% / var(--frames) * var(--frame)));
}

.side-scroller-frame{
	font-size: 1rem;
	width: 100vw;
	padding: var(--top-padding) var(--side-padding) 0 var(--side-padding);
}

.side-scroller-frame-indicators{
	text-align: center;
	height: 2em;
}

.side-scroller-frame-indicator{
	cursor: pointer;
	display: inline-block;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	margin: 0.5em 0.25em;
	transition: background-color 0.3s ease-in-out 0s,
				transform 0.3s cubic-bezier(.18,.89,.32,1.28) 0s;
	box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.75);
	background-image: url("/img/roundFrame.png");
	background-size: 100%;
	background-color: #2E1D0D90;
}

.no-touch .side-scroller-frame-indicator:hover{transform: scale(1.5)}
.side-scroller-frame-indicator.active{background-color: var(--red-ink)}

/*RULE-BOX*/
.rule-box{
	background-image: url("/img/parchment.jpg");
	position: relative;
	overflow: hidden;
	border-radius: 5%;
	box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.75);
}

.rule-icon{display: block}

.rule-icon path{
	stroke: var(--fake-black);
	stroke-dasharray: var(--path-length);
	--path-length: 2000;
	stroke-width: 0;
	stroke-dashoffset: 0;
}

.no-touch .disabled path{
	transition: stroke-dashoffset 1s linear,
				fill 0.5s ease-in-out,
				stroke-width 0.3s linear,
				opacity 1s linear;
}

.disabled .rule-icon path{
	stroke-width: 0.3px;
	opacity: 0.8;
	stroke-dashoffset: var(--path-length);
}

.no-touch .disabled.rule-box:hover path{
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1s linear,
				fill 0.5s linear,
				stroke-width 0.3s linear,
				opacity 1s linear;
}

.no-touch .rule-icon path{
	transition: stroke-dashoffset 1s ease-out,
				fill 0.5s ease-in-out,
				stroke-width 0.3s linear,
				opacity 0.5s linear;
}

.touch .rule-box path{
	transition: stroke-dashoffset 1s linear,
				fill 0.5s linear 0.7s,
				stroke-width 0.2s linear 1s,
				opacity 1.2s linear;
}

.touch .disabled.rule-box path{
	transition: stroke-dashoffset 1s linear 0.2s,
				fill 0.5s linear,
				stroke-width 0.2s linear,
				opacity 1.2s linear;
}

.rule-icon path.black{fill: var(--fake-black)}
.disabled .rule-icon path.black{fill: white}
.rule-icon path.red{fill: var(--red-ink)}
.disabled .rule-icon path.red{fill: white}
.touch .disabled .rule-icon path{opacity: 0.5}
.touch .rule-box:not(.disabled) path{stroke-dashoffset: 0 !important}

/*RULE-NAME*/

.rule-name{
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: rgba(255,255,255,0.85);
	text-align: center;
	border-radius: calc(var(--box-size) / 20) calc(var(--box-size) / 20) 0 0;
	transform: translateY(100%);
	transition: transform 0.3s cubic-bezier(.22,.61,.36,1) 0s;
	transform-origin: bottom;
	font-size: calc(var(--box-size) / 9.5); /*coefficient based on the longest word*/
	font-family: MedievalSharp;
}

.rule-name p::first-letter{
	font-size: 200%;
	color: var(--red-ink);
}

.rule-name p{
	cursor: pointer;
	display: inline-block;
	/*fixing mozilla :first-letter bug*/
	-moz-animation: bugfix 10s;
}

.rule-name *{
	margin: 0;
	padding: 0;
}

.no-touch .rule-box:hover .rule-name,
.touch .rule-box:not(.disabled) .rule-name{transform: translateY(0%)}

/*MAIN-PARALAX*/
main{
	--frame: 0;
	transition: background-position 0.45s cubic-bezier(.22,.61,.36,1) 0s;
	background-position: calc(var(--frame) * -100px) 0;
}

/*SQUARE GRID*/
.square-grid{
	--content-width: calc(100vw - 2 * var(--side-padding));
	--gutter: 10px;
	--columns: 3;
	--row-size: calc(( var(--content-width) - (var(--gutter) * (var(--columns) - 1))) / var(--columns));
	display: grid;
	width: 100%;
	max-width: var(--content-width);
	grid-template-columns: repeat(var(--columns), 1fr);
	grid-auto-rows: var(--row-size);
	grid-gap: var(--gutter);
}