/* Medium Views (>600px) */

@media screen and (orientation: portrait) and (min-width: 600px) {
	.container--home {
		padding: 7em 0 0;
		min-height: 100vh;
		/* border: 1px solid red; */
	}

	#home::before {
		display: block;
		content: "";
		height: 7em;
		margin-top: -7em;
	}

	#about::before,
	#education::before,
	#languages::before,
	#skills::before,
	#experience::before,
	#tech::before,
	#contact::before {
		display: block;
		content: "";
		height: 5em;
		margin-top: -5em;
	}

	/* container--header */
	.menu__burguer {
		width: 2.3rem;
	}

	.menu__x {
		width: 1.5rem;
	}

	.logo {
		width: 3.3rem;
	}

	.menu__list {
		gap: 2em;
	}

	.menu__close {
		position: absolute;
		top: 2.5rem;
		right: 1.8rem;
	}

	/* container--home */
	.home__content {
		margin-bottom: 4rem;
	}

	.home__btn {
		margin-top: 1.5em;
	}

	.btn__effect {
		padding: 0.5em 0.8em;
		font-size: 1.2rem;
	}

	.bubble--primary {
		width: 60%;
	}

	/* container--about */
	.about__text,
	.experience__text {
		text-align: justify;
	}

	/* container--tech */
	.tech__flexbox {
		gap: 2rem 2rem;
	}

	/* container--contact */
	.contact__img {
		width: 22px;
		margin-right: 0.08em;
	}
}

@media screen and (orientation: landscape) and (min-width: 600px) {
	::placeholder {
		font-weight: 300;
	}

	body.light ::placeholder {
		font-weight: 400;
	}

	/* container--header */
	.menu__btn {
		/* display: none; */
		visibility: hidden; /* To center menu items*/
	}

	.menu__close {
		display: none;
	}

	.logo__link {
		left: 1.5%;
	}

	.nav {
		opacity: 1;
		height: auto;
	}

	.menu__list {
		flex-direction: row;
		letter-spacing: var(--ls-1px);
	}

	.menu__link::before {
		width: 0;
	}

	.menu__link:hover {
		color: var(--color-1st-dark);
	}

	/* container--home */
	.container--home {
		padding: 0 0 0;
		min-height: 100vh;
		/* border: 1px solid red; */
	}

	.home {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		text-align: left;
		gap: 2rem;
		height: 100vh;
	}

	.home__title {
		margin: 0;
		font-size: var(--fsm-h1);
	}

	.home__subtitle {
		margin: 0.5em 0 0.7em;
		font-size: var(--fsm-h2);
	}

	.home__btn {
		margin: 0;
		letter-spacing: var(--ls-2px);
		font-size: var(--fsm-btn);
	}

	.btn__effect {
		padding: 0.5em 1em;
	}

	.home__bubble {
		width: 40%;
	}

	/* container--about */
	.about__text,
	.experience__text {
		text-align: justify;
	}

	/* container--tech */
	.tech__flexbox {
		gap: 2rem 2.5rem;
	}

	/* container--contact */
	.contact__img {
		width: 22px;
		margin-right: 0.1em;
	}

	.contact__form input,
	.contact__form textarea {
		font-weight: 300;
	}

	body.light .contact__form input,
	body.light .contact__form textarea {
		font-weight: 400;
	}

	.arrow {
		right: 1.5rem;
		bottom: 5rem;
	}

	/* container--footer */
	.container--footer {
		padding: 0.7em 0;
	}

	.footer {
		flex-direction: row;
		justify-content: space-between;
		gap: 0;
	}
}

/* Medium Views (>1200px) */

@media screen and (orientation: landscape) and (min-width: 1200px) {
	body {
		font-size: var(--fsm-p);
	}

	.bubble--sections {
		display: block;
	}

	/* container--header */
	.menu__list {
		font-size: 1.125rem;
		gap: 2.5em;
	}

	/* container--home */
	.home {
		gap: 5rem;
	}

	.btn__effect {
		padding: 0.5em 1em;
	}

	.home__bubble {
		width: 37%;
	}

	.container--flex {
		display: flex;
	}

	/* container--education */
	.degree__name,
	.experience__job {
		font-size: var(--fsm-h4);
	}

	.place,
	.date {
		font-size: var(--fsm-small);
	}

	/* container--languages */
	.language__text--secondary {
		font-size: var(--fsm-small);
	}

	/* container--experience */
	.job__date {
		font-size: var(--fsm-small);
	}

	/* container--contact */
	.contact__flexbox {
		flex-direction: row;
		align-items: flex-start;
		gap: 5rem;
	}

	.contact__info {
		margin-top: 3em;
		width: 25%;
	}

	.contact__form {
		margin-top: 0;
		width: 50%;
	}

	.arrow {
		right: 1.7rem;
		bottom: 5rem;
	}
}
