body {
	margin: 0;
	font-family: 'Red Hat Display', sans-serif;

	&.toggle-active {
		#search {
			display: block !important;
		}

		#saved {
			display: none;
		}
	}

	&.shareable-page #search {
		display: none;
	}
}

h1, h2, h3, h4, label, legend {
	font-weight: bold;
}

fieldset label {
    font-weight: normal;
}

a {
	text-underline-offset: 8px;
}

h4 {
	margin: 20px;
}

input {
	text-align: center;
	font-size: 16px;
}

/* Chrome, Safari, Edge */
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
.no-spinner {
  -moz-appearance: textfield;
}

button, a[href] {
	touch-action: manipulation;
}


.flex-col {
	display: flex;
	flex-direction: column;

	input {
		width: fit-content;
  		margin: auto;
	}
}

img, label, legend {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	user-select: none;
}

.btn-img {
	background: none;
	border: none;
	cursor: pointer;

	img {
		transform: scale(1);
		transition: transform 0.2s ease;

		&:hover {
			transform: scale(1.1);
		}
	}
}


#modal {
	z-index: 100;
	visibility: hidden;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	
	background-color: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(10px);

	.modal-container {
		align-self: center;
		background-color: white;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		border-radius: 15px;
		padding: 20px;
		position: relative;

		#loginForm {
			display: flex;
			flex-direction: column;

			#password {
				margin: 10px 0 20px 0;
			}

			#continue-btn {
				width: fit-content;
  				display: flex;
				margin: auto;
			}
		}
	}
}

#header {
	padding: 20px;
	display: flex;
	justify-content: space-between;

	p {
		margin: 0;
	}

	#home-btn {
		display: none;
	}

	#signup-or-login-btn {
		margin-left: auto;
		animation: jiggle 5s ease-in-out infinite;
	}
}

#searchForm {
	text-align: center;
	width: fit-content;
	margin: auto;

	> * {
		margin: 10px 0;
	}
	
	fieldset {
		margin: auto;

		> div {
			text-align: left;
		}

		legend {
			width: fit-content;
  			margin: auto;
		}
	}
}

#results {
	.cards {
		position: relative;

		#save-list-ui {
			display: flex;
			justify-content: center;
			position: sticky;
			top: 0;
			z-index: 1;
			background: rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);

			button {
				margin: 10px 0;
			}
		}
	}
}

#saved {
	h2 {
		margin: 20px 20px 0 20px;
	}

	.controls {
		position: relative;
		padding: 0 60px;

		.title {
			font-size: 24px;
			display: block;
			width: fit-content;
			margin: 40px auto 0 auto;
		}

		#trash-btn {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto 20px auto 0;
			display: flex;
			place-items: center;
		}
	}
}

.card {
	border: 1px solid #ddd;
	padding: 16px 20px;
	margin: 20px;
	border-radius: 8px;
	position: relative;
	overflow: hidden;

	.fade {
		width: 50vw;
		height: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 20%;
		z-index: -1;
		background: linear-gradient(
			to right,
			white 60%,
			rgba(255, 255, 255, 0) 100%
		);
	}

	.map {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		right: 0;
		z-index: -2;
		margin: auto;

		.leaflet-control-attribution {
			font-size: 8px;
			opacity: 0.7;
		}
	}

	.open-house-info {
		p {
			font-variant-numeric: tabular-nums;
		}
	}
}


@keyframes jiggle {
	0%, 10%, 100% { transform: rotate(0deg); }
	2.5% { transform: rotate(-5deg); }
	5% { transform: rotate(5deg); }
	7.5% { transform: rotate(-5deg); }
}


@media only screen and (max-width: 768px) {
	.card {
		padding: 16px;
	}
}