:root {
	--color-background:     #0A0F18;
	--color-background-alt: #121A2A;
	--color-text:           #FFF;
	--color-text-muted:     #A0AEC0;
	--color-border:         #2D3748;
	--color-input-bg:       rgba(45, 55, 72, 0.5);
	--color-primary:        #2DD4BF;
	--color-primary-hover:  #14B8A6;
	--color-accent:         #4F46E5;
	--border-radius:        0.4rem;
	--transition-speed:     0.2s;
}

* {
	box-sizing: border-box;
	margin:     0;
	padding:    0;
}

body {
	font-family:      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
	line-height:      1.5;
	color:            var(--color-text);
	background-color: var(--color-background);
}

canvas {
	position: fixed;
	z-index:  -1;
	top:      0;
	left:     0;
	width:    100%;
	height:   100%;
}


#hero {
	position:              relative;
	display:               grid;
	align-items:           center;
	height:                25vh;
	text-align:            center;
	gap:                   0 2.5vh;
	grid-template-columns: 1.15fr 0.85fr;
	grid-template-rows:    1fr 1fr;
	grid-template-areas:
    "hero hero"
    "desc logo";
}

#hero h1 {
	font-size:   3rem;
	font-weight: bold;
	margin-top:  2vh;
}

#hero p {
	font-size:  1.25rem;
	text-align: right;
	color:      var(--color-text-muted);
}

#hero a {
	cursor:          pointer;
	text-decoration: none;
	justify-self:    left;
}


#app {
	display:               grid;
	width:                 100%;
	max-width:             max(69vw, 1400px);
	margin:                0 auto;
	padding:               3rem 3rem;
	grid-template-columns: 1fr 1fr;
	gap:                   2rem;
}

.section {
	display:        flex;
	flex-direction: column;
	gap:            1.5rem;
}

.section h2 {
	font-size:     1.5rem;
	font-weight:   bold;
	margin-bottom: 0.5rem;
}

#output {
	align-content:    center;
	height:           100%;
	text-align:       center;
	color:            var(--color-text-muted);
	border:           2px solid var(--color-border);
	border-radius:    var(--border-radius);
	background-color: var(--color-input-bg);
}

#output svg {
	width:      auto;
	max-width:  95%;
	height:     auto;
	max-height: 95%;
	object-fit: scale-down;
}

#output p {
	font-size:     2rem;
	align-content: center;
	height:        100%;
}


#file {
	position: absolute;
	top:      0;
	left:     0;
	display:  none;
}


label {
	font-weight: 500;
	color:       var(--color-text);
}

textarea,
select {
	font-family:      inherit;
	font-size:        1rem;
	width:            100%;
	padding:          0.75rem;
	resize:           vertical;
	transition:       border-color var(--transition-speed);
	color:            var(--color-text);
	border:           1px solid var(--color-border);
	border-radius:    var(--border-radius);
	background-color: var(--color-input-bg);
}

textarea:focus,
select:focus {
	border-color: var(--color-primary);
	outline:      none;
}

textarea {
	min-height: 7em;
}

select { /* Custom dropdown arrow */
	padding-right:       2.5rem;
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a0aec0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 0.75rem center;
	background-size:     1.33rem;
	appearance:          none;
}


.btn {
	font-size:       1rem;
	font-weight:     500;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         1rem;
	cursor:          pointer;
	transition:      all var(--transition-speed);
	border-radius:   var(--border-radius);
	gap:             0.5rem;
}

.btn-primary {
	width:            100%;
	color:            var(--color-background);
	border:           none;
	background-color: var(--color-primary);
}

.btn-primary:hover {
	background-color: var(--color-primary-hover);
}

.btn-outline {
	color:            var(--color-text);
	border:           2px solid var(--color-border);
	background-color: transparent;
}

.btn-outline:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.btn:disabled {
	cursor:  not-allowed;
	opacity: 0.6;
}