@import url("reset.css");
@import url("layout.css");
@import url("variables.css");
@import url("typography.css");

@media (max-width: 800px) {
	/*for tablet screen*/
	.navbar a {
		font-size: 20px;
		text-decoration: none;
		padding: 12vw;
	}

	.logo {
		max-width: 16vw;
		display: block;
	}

	.portfolio-text-mobile {
		display: flex;
		flex-direction: column;
	}
	/*order it in a column*/

	.portfolio-text-mobile .one-quarter {
		width: 100%;
		order: 1;
		margin-bottom: 2vh;
	}
	/*This is to make the text come before the images while in mobile, but since the .row tag is used for other layouts i had to shift the order of the elements.*/

	.portfolio-text-mobile .three-quarters {
		width: 100%;
		order: 2;
	}

	.row {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.row .one-eigth {
		width: 100%;
		margin-top: 0;
	}
	.portfolio-title {
		margin-bottom: 5rem;
		margin-left: 0.1rem;
	}

	.one-eigth img {
		width: 100%;
		height: 30vw;
		object-fit: cover;
	}

	.row .one-eigth:nth-child(1),
	.row .one-eigth:nth-child(2),
	.row .one-eigth:nth-child(3),
	.row .one-eigth:nth-child(4),
	.row .one-eigth:nth-child(5),
	.row .one-eigth:nth-child(6) {
		margin-top: 0;
	}

	.footer a {
		font-size: 18px;
		font-weight: 600;
		color: rgb(255, 255, 255);
		text-decoration: none;
		padding: 1vh;
		margin: 0;
	}
	.hero-bottom {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-left: 37px;
		margin-bottom: 20px;
		max-width: 70vw;
	}
	h5 {
		color: rgb(15, 15, 50);
		font-size: 28px;
		font-weight: 400;
	}
	.hero-bottom {
		margin-left: 0px;
	}

	.abstract-image {
		max-width: 1100px;

		margin-left: 0rem;
	}
}

@media (max-width: 600px) {
	/*for mobile screen*/

	.label {
		text-decoration: none;
	}
	.navbar {
		position: sticky;
		top: 0;
		z-index: 1;
		width: 100%;
		background-color: rgb(255, 255, 255);
		padding-left: 0vw;
	}

	.navbar a {
		font-size: 20px;
		text-decoration: none;
		padding: 15vw;
	}

	.logo {
		max-width: 16vw;
		display: block;
	}

	.logo-image img {
		width: 100%;
		margin-right: 5rem;
	}

	.logo-image {
		margin-right: 2vw;
		width: 80vw;
		border-radius: 0.5rem;
	}

	.portfolio-title {
		margin-bottom: 5rem;
	}

	.hero-color1 {
		height: 60vh;
		align-items: flex-start;
		padding-top: 80px;
		height: 60vh;
	}
	.hero-bottom {
		align-items: flex-start;
		margin-left: 0px;
		margin-bottom: 20px;
		max-width: 90vw;
	}

	.flex-item {
		width: 100vw;
		height: auto;
	}

	.portfolio-text {
		text-align: left;
		padding-bottom: 4vh;
		padding-top: 5vh;
	}

	.one-quarter {
		width: 100%;
		order: 2;
	}

	.three-quarters {
		width: 100%;
		order: 1;
	}

	.one-quarter img {
		width: 100%;
		height: auto;
	}

	.social-buttons {
		display: flex;
		flex-direction: column;
		gap: 3rem;
		margin-top: 1rem;
		margin-bottom: 3rem;
		flex-wrap: wrap;
	}

	.footer {
		background-color: rgb(150, 10, 55);
		padding: 2.5rem 4rem;
		width: 100%;
		position: sticky;
		bottom: 0;
	}

	.footer ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		/* gap: 2.5rem; */
	}
	/* Targets the ul tag of footer*/

	.footer a {
		font-size: 16px;
		font-weight: 600;
		color: rgb(255, 255, 255);
		text-decoration: none;
		padding: 1vh;
		margin: 0;
	}
	/* Targets the a tags of footer*/
	.footer {
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	}

	.img-hover {
		display: flex;
		flex-direction: column;
		padding: 1em;
	}

	.img-wrap::after {
		display: none;
	}

	.img-hover .label {
		position: static;
		opacity: 1;
		transform: none;
		transition: none;
		justify-content: center;
		padding-top: 0.5rem;
	}

	.img-hover .label span {
		writing-mode: horizontal-tb;
		text-orientation: mixed;
		color: rgb(15, 15, 50);
		font-size: 30px;
		letter-spacing: 0.1em;
		font-size: 20px;
		text-decoration: none;
	}

	.img-hover:hover .img-wrap img {
		transform: none;
	}

	.abstract-image {
		max-width: 1100px;

		margin-left: 0rem;
	}
}