@media (min-width:550px) {

	:root {
		--h1-size: 56px;
	}

	.modal-content {
		width: 90%;
		max-width: 580px;
		border-radius: 12px;
	}

	h1 {
		margin-inline: 40px;
	}


	.h1 {

		& #junimos {
			width: 50%;
		}

		& .description {
			margin-bottom: 20px;
		}
	}

	.title-modal {
		&>h3 {
			font-size: 28px;
		}
	}

}

@media (min-width:768px) {
	footer {
		margin-top: 40px;
		padding: 32px 80px;

		& .warning {
			border: 2px dashed var(--brand);
		}
	}

}

@media (min-width:1024px) {
	body {
		font-size: 18px;
	}

	:root {
		--h1-size: 64px;
	}

	.back-button {
		width: 155px;
		position: absolute;
		top: 74px;
		left: 20px;
		z-index: 50;

		border-radius: 4px;
		border: 4px solid var(--brown);
		background: var(--yellow-dark);
	}

	.mobile-select {
		display: none;
	}

	.web-select {
		display: block;
	}

	/* dropdown */

	.find-buttons {
		width: fit-content;
		height: 48px;
		padding-inline: 20px;
		margin-inline: 20px;
	}

	/* h1 */

	.h1 {
		padding: 44px;

		&>section {
			border-radius: 16px;
			border: 8px solid var(--brown);
			padding-block: 32px;

		}

		& .description {
			padding-inline: 44px;
			margin-bottom: 0px;
			margin-top: 24px;
		}

		& #leaf-1 {
			right: 32px;
			top: 32px;
			width: 80px;
			height: 80px;
		}

		& #leaf-2 {
			left: 32px;
			top: 32px;
			width: 80px;
			height: 80px;
		}

		& #junimos {
			margin-top: 12px;
			width: 50%;
		}

	}


	/* modal */
	.title-modal {
		border-bottom: 6px solid var(--brown);
		padding: 12px 20px;

		&>h3 {
			font-size: 32px;
		}
	}

	.modal-content {
		border: 6px solid var(--brown);
		border-radius: 12px;
		max-width: 700px;

		&>p {
			padding-inline: 24px;
			padding-block: 32px;
			line-height: 1.3em;
			font-family: 18px;
		}
	}

	.close-button {
		width: 44px;
		height: 44px;

		border-radius: 6px;
		border: 4px solid var(--brown);
	}

	.nav-mobile {
		display: none;
	}

	.nav-web {
		display: flex;
		justify-content: space-between;
		padding-inline: 32px;
		padding-block: 6px;
		border-bottom: 6px solid var(--brown);
		background-color: var(--dark-green);
	}

	.sidebar-web {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: sticky;
		width: 200px;
		padding-block: 16px;
		min-height: 100vh;
		border-right: 6px solid var(--brown);
		background: var(--dark-green);
	}

	.dashboard {
		display: flex;
		min-height: 100vh;
		align-items: flex-start;
	}

	.main-content {
		flex: 1;
		overflow-y: auto;
		max-height: 100vh;
	}

	.link-button {

		& img {
			width: 24px;
			height: 24px;
		}

		&:hover {
			color: var(--brand);
		}
	}



}


@media (min-width:1224px) {
	h1 {
		margin-inline: 100px;
		font-size: 80px;
	}

	.h1 {
		padding: 44px 120px;

		& #junimos {
			width: 40%;
		}

		& #leaf-1 {
			right: 80px;
		}

		& #leaf-2 {
			left: 80px;
		}
	}

	footer {
		margin-top: 40px;
		padding: 32px 120px;

		& .warning {
			border: 2px dashed var(--brand);
		}
	}

	.footer-bottom {
		&>img {
			width: 50%;
		}
	}

}