/* Some basics to make it easier to read. */

@font-face {
	font-family: 'NeueHaasBlack';
	src: url('fonts/NeueHaasDisplayBlack.ttf');
	font-weight: 400;

}

@font-face {
	font-family: 'NeueHaasBold';
	src: url('fonts/NeueBold.otf');
}

@font-face {
	font-family: 'NeueHaasRegular';
	src: url('fonts/Neue-Regular.otf');
}

:root {
     --color-3D: #0A4DFF;
     --color-media: #7A38EB;
     --color-print: #D3026B;
     --color-wood: #F5BB3C;
	 --color-open: #F14A02;
	 --color-sewing: #238C87;

}


body {
	--spacing: 2em;

	display: grid;
	gap: var(--spacing);
	margin: 0;
	padding: var(--spacing);
	overflow-x: hidden;
	padding-bottom: 5em;
}

@media (width > 768px) {
	body { --spacing: 3em;
	}
}

form {
	background-color: rgb(222, 222, 222);
	display: grid;
	gap: var(--spacing);
	padding: var(--spacing);
}

button {
    border: 1px solid black;
    padding: 0.5em;
}

select, input {
    border: 1px solid black;
    padding: 0.5em;
    background-color: white;
}


#tools {
	display: grid;
	gap: 1em;
}

@media (width > 768px) {
#tools {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em;
}
}

.tool-select {
	color: white;
	width: 100%;
}


#tool-select-3D {
	background-color: var(--color-3D);
}

#tool-select-media {
	background-color: var(--color-media);
}

#tool-select-print {
	background-color: var(--color-print);
}

#tool-select-wood {
	background-color: var(--color-wood);
}

#tool-select-sewing {
	background-color: var(--color-sewing);
}

#tool-select-open {
	background-color: var(--color-open);
}


#makingcenter-list {
	display: grid;
	gap: 2em;
}

li img {
	width: 100%;
	display: block;
}

li header {
	padding: 1em;
	color: white;
}

info {
	padding: 1em;
}

#tool-picker {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5em;
}



#form-buttons {
	position: fixed;
	left: 0;
	width: 100%;
	bottom: 0;
	background-color: black;
	color: white;
	padding: 1em;
	text-align: center;
}

.time-btn.active {
	background-color: white;
	color: black;
	border: 3px solid rgb(0, 0, 0);
}

.time-btn {
	background-color: white;
	color: black;
	border: 1px solid rgb(0, 0, 0);
	display: inline-block;
	margin-top: 0.5em;

}

.facility-btn.dimmed {
	opacity: 0.4;
}

#day-select {
	display: block;
	margin-top: 0.5em;
	margin-right: 0.5em;
}

#day-select.active {
	border: 3px solid black;
	background-color: white;;
}

label {
	display: block;
}


#reset-btn.disabled,
#search-btn.disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* #tool-select-dropdown.active {
	border: 3px solid black;
	background-color: white;;
} */