/*/////////////////////////////////////////////////////////
Author: J. Amelia Caceres | Last Updated: 07/24
/////////////////////////////////////////////////////////*/

@media screen and (max-width: 600px) {

	body.home {
		/*background-image: url(../images/background-home.png);*/
		background-repeat: no-repeat;
		background-position-y: 10%;
		background-position-x: 90%;
		background-size: 65%;
	}

	.about {
		max-width: 600px;
		margin: 3em 0 4em 0;
	}

	.navigation li {
		display: inline-block;
		margin-bottom: 1.8em;
	}

	.navigation .links a {
		margin-right: .2rem;
		padding: .7rem .8rem .6rem .8rem;
		border-radius: 5px;
		letter-spacing: 1px;
	}

	p.professional-title {
		font-weight: 400;
		font-size: 1.2em;
		margin-bottom: 2em;
	}

	p.professional-description {
		margin-bottom: 5em;
	}

	.project {
		box-shadow: 12px 12px #161A25;
		margin-bottom: 6em;
	}

}

@media screen and (min-width: 601px) {

	body.home::before {
		content: "";
		position:absolute;
		inset: 0;
		/*background-image: url(../images/background-home.png);*/
		background-repeat: no-repeat;
		opacity: 0;
		transform: scale(1.05);
		animation: fadeBounceBG 2.5s ease-out forwards;
		z-index: 0;
		background-position-y: 50%;
		background-position-x: 98%;
		background-size: 400px;
	}

	@keyframes fadeBounceBG {
		0% {
			opacity: 0;
			transform: scale(1.05);
		}
		60% {
			opacity: 1;
			transform: scale(0.97);
		}
		80% {
			transform: scale(1.02);
		}
		100% {
			opacity: 1; /* <- Add this line */
			transform: scale(1); /* <- Final scale */
		}
	}
}

@media screen and (max-width: 799px) {

	body {
		font-size: 16px;
	}

	p.design-philosophy {
		font-size: 2.2em;
		line-height: 1.1em;
	}

	.header-subnavigation {
		display: none
	}

	.dropdown {
		padding: 0;
	}

	.dropbtn {
		padding: 1em;
		border-radius: 9px;
	}

	.dropdown-content {
		margin-top: .5em;
		padding: .5em;
	}

	.dropdown-content button {
		font-size: 1em;
	}

	.new-post-button a {
		display: block;
		text-align: center;
	}
}

@media screen and (min-width: 800px) {

	.dropdown-content {
		min-height: 25vh;
		max-height: 45vh;
		overflow: hidden;
	}

	.navigation-top {
		margin-bottom: 2.5em;
	}

	.sticky {
		position: sticky;
		top: 1.5em;
		height: 8em;
	}

	.dropbtn {
		display: none;
	}

	.dropdown-content {
		display: block;
		min-width: 160px;
		z-index: 1;
	}

	.dropdown button {
		text-align: left;
	}

	.fa-solid.fa-chevron-down {
		display: none;
	}

	body.home::before {
		background-position-y: 20%;
		background-position-x: 98%;
		background-size: 350px;
	}

	.about {
		display: grid;
		grid-template-columns: 3fr 5fr;
		grid-column-gap: 2em;
		max-width: 900px;
	}

	.new-post {
		padding: 2.5em 2em 2em 3em;
	}

	.new-post-content {
		display: grid;
		grid-template-columns: 7fr 3fr;
		grid-column-gap: 5em;
		margin: auto;
		align-items: center;
	}

	.new-post-tag {
		margin-bottom: 1em;
	}

	.project {
		display: grid;
		grid-template-columns: 5fr 3fr;
	}

	.project-description {
		padding-right: 15%;
	}

	.projects-layout {
		display: grid;
		grid-template-columns: 3fr 9fr;
		grid-column-gap: 3em;
	}

	.thoughts-layout {
		display: grid;
		grid-template-columns: 3fr 9fr;
		grid-column-gap: 3em;
	}

	.projects .image-content p {
		font-size: 1em;
		max-width: 90%;
		margin: auto;
	}

	.resume {
		display: grid;
		grid-template-columns: 2fr 5fr;
		grid-column-gap: 8em;
	}

	.resume-experience {
		max-width: 600px;
	}

	.mobile-portfolio-nav {
		display: none;
	}

	.footer .footer-message p {
		padding-top: 18px;
	}

}

@media screen and (min-width: 1000px) {

	body.home::before {
		background-position-y: 20%;
		background-position-x: 98%;
		background-size: 350px;
	}

	.new-post-tag {
		margin-bottom: 1.2em;
	}

	.new-post-content {
		display: grid;
		grid-template-columns: 8fr 3fr;
		grid-column-gap: 5em;
		margin: auto;
		align-items: center;
	}

	.new-post-link p{
		font-size: 1.1em;
		line-height: 1.5em;
	}

	.new-post-link h3 {
		font-size: 1.6em;
		line-height: 1.2em;
	}

	.projects-layout h1 {
		font-size: 2.5em;
	}

	.projects-layout h2 {
		font-size: 2em;
	}

	.project-description {
		min-height: 50vh;
	}

	.thoughts-layout h1 {
		font-size: 2.5em;
	}

	.thoughts-layout h2 {
		font-size: 1.7em;
	}

	h2.thoughts-subheader {
		font-size: 1.7em;
		font-family: "Roboto", sans-serif;
		font-optical-sizing: auto;
		margin-bottom: 1em;
		font-weight: 300;
	}
}

@media screen and (min-width: 1200px) {

	body.home::before {
		background-position-y: 20%;
		background-position-x: 90%;
		background-size: 400px;
	}
}