a {
	text-decoration: none;
	color: rgb(23, 19, 249);
}
a:hover {
	color: rgb(51, 83, 3);
}
.white-outline {
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.rainbow-text {
	background: linear-gradient(to right, #f00,#f00,#ffb300,#ffb300, #e6e206, #f9a825, #ff5722);
	background-clip: text;
	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}

@property --angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}
@keyframes rotate {
	from {
		--angle: 0deg;
	}
	to {
		--angle: 360deg;
	}
}
.rotating-gradient-border::after, .rotating-gradient-border::before {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	padding: 5px;
	z-index: -1;
	
	background: linear-gradient(red, orange, yellow); /* default background */
	background: conic-gradient(from var(--angle), red, blue, green, yellow, orange, red);
	animation: rotate var(--no-animations, 6s) infinite linear;
}
@keyframes glow {
	from {
		padding: 10px;
	}
	to {
		padding: 2px;
	}
}
.rotating-gradient-border::before {
	filter: blur(.8rem);
	padding: 8px;
	opacity: 0.8;
	animation: glow var(--no-animations, 2.5s) ease-in-out infinite alternate, rotate var(--no-animations, 6s) infinite linear;
}
@media (prefers-reduced-motion) {
	body {
		--no-animations: 0s;
	}
}
.disable-animations {
	--no-animations: 0s;
}
/* TOP LEVEL ELEMENTS ------------------------ */
html, body {
	min-height: 100dvh;
	margin: 0;
}
body {
	text-align: center;
	font-size: clamp(1rem, 1vw + .75rem, 1.5rem);
	/* TODO properly scale font-size */
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	overflow-y: scroll;
}
@media (min-width: 540px) and (orientation: landscape) {
	body {	
		display: flex;
		justify-content: center;
		background: linear-gradient(to bottom, rgb(145, 213, 218), rgb(24, 40, 119));
		background-attachment: fixed;
	}
	#gradient-border {
		width: 70vw;
		min-height: min-content;
		margin-top: 2dvh;
		padding: 5px;
		padding-bottom: 0;
		border-radius: 20px 20px 0 0;
		background: linear-gradient(to bottom, rgb(255, 242, 0), red);
	}
}
#main-wrapper {
	min-height: 100%;
	border-radius: 15px 15px 0 0;
	box-sizing: border-box;
	
	background: #c1e4f1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#content {
	padding: calc(.5rem + 3vw);
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 5;
	/* overflow-y: auto; /* if it doesnt fit vertically - hide footer*/
	user-select: none;
}
#content * {
	max-width: 100%;
}

footer {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: max(5px, 2%);

	border-top: 3px solid red;
	background-color: rgba(0, 255, 0, 0.249);
	background: linear-gradient(to right, red, yellow, red);
	padding: 15px 0;
}
#footer-icon {
	height: 1.5em;
	padding: 2px;
	background-color: rgba(255, 255, 255, 0.936);
	border-radius: 7px;
}
button.toggle-anim {
	font-size: 0.8em;
	background-color: rgb(81, 254, 81);
	color: rgb(52, 52, 52);
	border-radius: 5px;
}
	.disable-animations button.toggle-anim {
		background-color: rgba(255, 0, 106, 0.5);
	}
	.toggle-anim::after {
		content: '!';
		font-weight: bold;
	}
	.disable-animations .toggle-anim::after {
		content: '?';
}

/* PATTERN SELECTION ---------------------------- */
#pattern-selection {
	display: flex;
	justify-content: left;
	flex-direction: row;
	gap: clamp(5px, 3vw, 40px);
	touch-action: manipulation;
}
#shapes {
	display: flex;
	align-content: center;
	flex-wrap: wrap;
	gap: .3em;
}
.shape, #size {
	height: clamp(25px, 5vw, 50px);
	border-radius: 8px;
	border: 2px solid blue;
	color: blue;
	background-color: rgba(0, 255, 217, 0.1);
	padding: 4px;
}
.shape {
	aspect-ratio: 1;
	cursor: pointer;
}
.shape.selected {
	filter: hue-rotate(-80deg);
	background-color: rgba(0, 255, 166, 0.142);
}

#size {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	aspect-ratio: 2;
	padding-left: unset;
	padding-right: unset;
	font-weight: bold;
}
#size-box {
	border-left:  blue 1.5px solid;
	border-right: blue 1.5px solid;
	width: 37%;
	aspect-ratio: 1;
	align-content: center;
}
/* --------------- */
#pattern-table {
	position: relative;
	width: clamp(200px, 60%, 90vw);
	aspect-ratio: 1;
	margin: max(25px, 4vw) 0;
	touch-action: none;
	border-radius: 8px;
	background-color: #ddd;
}
#pattern-table::after {
	border-radius: 13px;
}
canvas#lines {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.lock-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.lock-cell {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dot-div {
	width: 8%; /* inner dot size */
	padding: min(3vw, 30%); /* outer "click margin" */
	aspect-ratio: 1;
	/* background-color: grey; */
	border-radius: 50%;
}
.dummy-pattern .dot-div {
	padding: 0;
	width: 50%;
	height: 50%;
}
.dot-div:hover {
	cursor: pointer;
}
.dot-div.selected div {
	transform: scale(1.3);
	transition: .2s;
}
.dot-div div {
	width: 100%;
	min-width: 5px;
	aspect-ratio: 1;
	flex-shrink: 0;
	flex-grow: 0;
	border-radius: 50%;
	background-color: black;
}
.dummy-pattern .dot-div div {
	background-color: blue;
	min-width: 3px;
}

/* results div ---------------- */
#results {
	padding: 8px;
	margin-top: 15px;
	max-width: 80%;
	gap: .7ch;

	text-align: left;
	position: relative;
}
#results::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;

	width: 90%;
	height: 100%;
	border-radius: 10px 0 0 10px;
	background: linear-gradient(to bottom, violet, blue, green, yellow, orange, red);
	mask-image: linear-gradient(to right, black, transparent);
}

@keyframes traceBehindBox {
	from {
		left: -20px;
		top: 90%
	}
	30% {
		left: 30%;
		top: -20%;
	}
	60% {
		left: 100%;
		top: 105%;
	}
	to {
		left: 90%;
		top: -20%;
	}
}
@keyframes orbit {
	to {
		rotate: 360deg;
	}
}
#results::after {
	content: '';
	position: absolute;
	width: 30px;
	height: 30px;
	z-index: -2;
	transform-origin: -15px 0;
	border-radius: 15px;

	opacity: .8;
	filter: blur(3px);
	background: black;
	background: conic-gradient(from var(--angle), red, blue, green, yellow, orange, red);
	animation: rotate var(--no-animations, 1s) infinite linear reverse,
		alternate var(--no-animations, 8s) infinite traceBehindBox cubic-bezier(0.68,-0.55,0.27,1.55),
		orbit var(--no-animations, 5s) infinite linear;
}
.disable-animations #results::after {
	display: none;
}
.result-header {
	font-weight: bold;
}
#pattern-result {
	min-width: 3ch;
	display: inline-block;
	cursor: pointer;
	transition: color 2s ease-in;
	width: fit-content;
}
#pattern-result.copied {
	color: green;
	transition: none;
}
#pattern-result span {
	display: inline-block;
}
@keyframes fadeFromRight {
	from {
		opacity: 0;
		translate: 50% 0;
		margin-right: 1em;
	}
}
@keyframes fadeFromTop {
	from {
		opacity: 0;
		translate: 10% -60%;
	}
}
.colon {
	margin: 0 2px;
}
.dot-repr {
	font-weight: bold;
}
.colon:nth-last-child(2) {
	position: relative;
	animation: forwards ease-out 0.8s fadeFromTop;
}
.dot-repr:last-child {
	position: relative;
	animation: forwards ease-out 1s fadeFromRight;
}

/* small display devices ---------------- */
@media (width < 10cm) {
	body {
		font-size: 3vw;
	}
	.shape, #size {
		height: calc(11vw - 10px);
	}
	#pattern-table {
		width: 80vw;
	}
	footer {
		font-size: 4.5vw;
	}
}