@media screen and (max-width: 768px) {
	header {
		background-image: linear-gradient(rgba(0, 0, 0, 0.11), rgba(255, 255, 255, 0));
		color: #fff;
		padding: 0;
		margin: 0;
		position: absolute;
		width: 100vw;
		overflow: hidden;
		z-index: 1000;

		ul {
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: left;
			margin: 0;
			padding: 2vh 0;
			animation: none;
			justify-content: space-evenly;
			
			a {
				font-family: "Bebas Neue", Archivo, sans-serif;
				font-size: 4vw;
				color: #fff;
				text-shadow: #3333333e -0px 15px 5px;
			}
		}
		
	}
	
	header:hover {
		ul {
			justify-content: space-evenly;
			padding: 2vh 0;
			height: 15vh;
			animation: none;
		}

		a {
			font-size: 4vw;
			transform: none !important;
			transition: none !important;
		}

		a:hover {
			transform: none !important;
			font-size: 4vw !important;
			text-shadow: #3333333e -0px 15px 5px !important;
			transition: none !important;
		}
	}

	header:active {
		ul {
			justify-content: space-evenly;
			/* height: 40vh; */
			animation: none;
		}

		a {
			font-size: 2vh;
			transform: none !important;
		}

		a:active {
			transform: none !important;
			font-size: 2vh !important;
		}
	}

	body {
		#landing {
			#personal-info {
				display: flex;
				flex-direction: column-reverse;
				align-items: center;
				text-align: center;
				width: 100%;
				height: 100vh;
				justify-content: space-evenly; /* Add this to distribute items evenly */

				p {
					width: 80vw;
					font-size: 2vw;
				}

				#personal-image {
					width: 100vw;
					height: auto;
					/* margin-left: -25%;  */
					mask-image: linear-gradient(to right, transparent 0%, black 50%);

				}
			}

			#names{
				width: 100%;
				position: absolute;
				bottom: 10vh;
				/* right: -12%; */
				z-index: 1000;
			}
		}
	}

	#interests {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin: 0;
		padding: 0;


		table {
			width: 100%;
			margin: 0;
			border: none;
			border-spacing: 0;

			thead {
				height: 100vh;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				animation: color-scrolling linear;
				animation-duration: 1ms;
				animation-timeline: view(y 0% -50%);

				th {
					font-size: 10vw;
					animation: movement-scrolling linear;
					animation-duration: 1s;
					animation-timeline: view(y -10%);
				}
			}

			tbody {
				tr {
					border: none;
					border-bottom: 4px solid #333;
					display: block;
					/* Change from flex to block */
					position: relative;
					height: 33.33vh;
					width: 100%;

					h2 {
						font-size: 4vw;
					}

					/* Hide the second cell completely */
					td:nth-child(2) {
						display: none;
					}

					/* Make first cell full width with overlay */
					td:nth-child(1) {
						width: 100%;
						height: 33.33vh;
						display: flex;
						justify-content: center;
						align-items: center;
						border: none;
						padding: 0;
						position: relative;
						overflow: hidden;
					}

					/* Image as background */
					td img {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						object-fit: cover;
						object-position: 50% 20%;
						z-index: 1;
						/* filter: brightness(0.4) contrast(1.2); */
					}

					/* Text content overlay */
					td h2,
					td p,
					td div,
					td {
						position: relative;
						z-index: 2;
						color: white;
						text-align: center;
						padding: 20px;
						font-size: 4vw;
						text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
						/* background: rgba(0, 0, 0, 0.3); */
						border-radius: 8px;
						backdrop-filter: blur(2px);
					}
				}

				/* Remove the even row alternating since we're using single columns now */
				tr:nth-child(even) {
					td:nth-child(1) {
						width: 100%;
					}
				}

				tr:hover {
					background-color: transparent;

					td img {
						filter: brightness(0.6) contrast(1.1);
						transition: filter 0.3s ease;
					}

					td h2,
					td p,
					td div {
						background: rgba(0, 0, 0, 0.5);
						transition: background 0.3s ease;
					}
				}
			}
		}
	}

}