/* Font import */

@font-face {
	font-family: "GT Maru";
	src: url("assets/fonts/GTMaru-Light.otf");
}

@font-face {
	font-family: "GT Maru";
	src: url("assets/fonts/GTMaru-Black.otf");
	font-weight: bold;
}

/* CSS Reset by Andy Bell */
/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Prevent font size inflation */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	line-height: 1.5;
	margin: 0;
}

h1,
p {
	margin: 0;

}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
	line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
	color: currentColor;
}

/* Make images easier to work with */
img,
picture,
svg {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select,
h1,
h2 {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 5ex;
}

/* ChuntFM Artwork Generator CSS */
:not(textarea)::selection {
	background-color: transparent;
}

:not(input, textarea) {
	cursor: default;
}

input[type="range"],
input[type="radio"],
input[type="color"],
label[for*="img"],
button,
.graphical-elements-wrapper>label {
	cursor: pointer;
}

label {
	margin-bottom: 4px;
}

.main-wrapper {
	--small-artwork-width: 80vw;
	--max-artwork-width: 600px;
	--size: min(var(--small-artwork-width), var(--max-artwork-width));
	--controls-width: 400px;
	--spacing: 32px;

	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--spacing);
	margin: var(--spacing);
}

#canvas,
.controls-wrapper,
.save-wrapper {
	border: 4px solid black;
	/* border-radius: 8px; */
}

.artwork-wrapper {
	flex-basis: var(--size);
	aspect-ratio: 1;
	display: flex;
}


.controls-wrapper {
	flex-basis: var(--controls-width);
	display: flex;
	flex-direction: column;
	padding: 16px;
	justify-content: space-between;
}

.controls-wrapper>input,
textarea,
.colour-options {
	margin-bottom: 8px;
}

/* max-width = --max-artwork-width + --controls-width + (--spacing * 3) */
@media (max-width: 1096px) {
	.controls-wrapper {
		flex-basis: var(--size);
	}

	.controls-wrapper>input,
	.colour-options {
		margin-bottom: 16px;
	}

}

.main-header {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 4px;
	gap: 16px;
	align-self: center;
}

.controls-wrapper>input,
textarea {
	border: 2px solid black;
}

input[type="range"] {
	width: 90%;
	align-self: center;
}

.colour-options {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.image-options {
	display: flex;
	justify-content: space-evenly;
	gap: 8px;
	align-items: center;
}

.colour-option-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	gap: 8px;
	border: 2px solid black;
	/* border-radius: 4px; */
	padding: 8px;
	flex-wrap: wrap;
	flex: 1;
}

.image-option-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.flex-centered-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}

.graphical-elements-wrapper {
	display: flex;
	justify-content: space-between;
}

.graphical-elements-wrapper>* {
	margin-inline: 8px;
}

.graphical-elements-wrapper input[type="checkbox"] {
	display: none;
}

.graphical-elements-wrapper label {
	width: 40px;
	border: 2px solid black;
	text-align: center;
	margin-inline: 8px;
}

label:has(input:checked) {
	background-color: black;
	color: white;
}

input {
	accent-color: black;
}

.main-footer {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
	flex: 1;
}

.main-footer>* {
	border: 2px solid black;
	padding: 6px 8px;
	gap: 8px;
	flex: auto;
}

.save-wrapper {
	flex-basis: var(--size);
	align-self: center;
	height: 48px;
	display: flex;
	align-items: stretch;
	justify-content: stretch;
}

.save-wrapper>* {
	flex: auto;
	border: none;
}


h1 {
	text-align: right;
	font-family: "GT Maru", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-weight: bold;
	font-size: 1.5rem;
	letter-spacing: -2px;
}

body {
	font-family: "GT Maru", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 0.8rem;
}

.hidden {
	display: none;
	visibility: hidden;
}