@import url('https://fonts.upset.dev/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body
{

	color-scheme: light dark;

	margin: 10px;

	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;

	font-weight: 400;

	text-align: center;

	/* Base colors */
	background-color: light-dark(#f0f0f0, #121212);
	color: light-dark(#121212, #f0f0f0);

	transition-duration: .2s;
}

/* Form */
.formGroup
{
	/* Force elements to be on the same line */
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;

}

.formGroup label {
    width: 120px;
    text-align: right;
    flex-shrink: 0;
}

input[type=text], input[type=number]
{
	width: 100%;
	max-width: 500px;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid  light-dark(#ccc, #333);
	border-radius: 32px;
	box-sizing: border-box;

	transition-duration: .2s;
}

input[type=text]:hover, input[type=number]:hover
{
	/* Inset shadow on hover */
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

input[type=text]:focus, input[type=number]:focus
{
	/* Inset shadow on focus */
	box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.4);
	outline: none;
}

input[type=checkbox]
{
	width: 30px;
	height: 30px;
	margin: 0 10px;

	transition-duration: .2s;
}

input[type=checkbox]:hover
{
	/* Inset shadow on hover */
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

input[type=checkbox]:focus
{
	/* Inset shadow on focus */
	box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.4);
	outline: none;
}

input[type="color"] {
	-webkit-appearance: none; /* remove default look in WebKit */
	border: none;
	width: 50px;
	height: 30px;
	padding: 0;
	cursor: pointer;
	border-radius: 6px;
  }

  input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
  }
  
  input[type="color"]::-webkit-color-swatch {
	border-radius: 6px; 
  }

/* Footer */
.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
}

/* Result grid */
.grid-container
{
	display: grid;
	grid-template-rows: auto auto;
	gap: 50px;
}

.grid-item {
    width: 100%;
}

.grid-item p {
    margin-bottom: 10px; /* Keep text above the scrollable area */
}

.scrollable-horiz {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 120px;
    white-space: nowrap;
}

.scrollable-vert {
    overflow-x: hidden;
	overflow-y: scroll;
    max-height: 300px;
	height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
}


.scrollable-horiz img {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.scrollable-vert img {
    display: block; /* Use block instead of inline-block for vertical scrolling */
    white-space: normal;
    width: auto;
    height: auto;
}

.merged
{
	height: auto;
	width: auto;
}

@media only screen and (max-width: 600px) {
	.scrollable-vert
	{
		overflow-x: scroll;
	}
}