/* Desktop */
@media screen and (max-width: 1200) {
	a {
		font-size: 1vw;
	}
	
	.text {
		font-size: 1vw;
	}
	
	.topnav a {
		font-size: 1vw;
		padding: 0.75vw 2.5vw;
	}
  
	.aboutpage {
		width: 55%;
		left: 22.5%;
		top: 5vw;
	}

	.aboutpage h1 {
		font-size: 5vw;
	}

	.aboutpage h2 {
		font-size: 2vw;
	}

	.aboutpage h3 {
		font-size: 2vw;
	}

	.aboutpage .container {
		flex-wrap: column;
		margin-bottom: 5vw;
	}

	.aboutpage .container .hithere {
		width: 60%;
	}

	.aboutpage .container .whoami {
		width: 40%;
	}

	.aboutpage .container .skills {
		width: 25%;
	}
	
	.projectspage {
		width: 55%;
		left: 22.5%;
		top: 5vw;
	}
  
	.projectspage h1 {
		font-size: 2vw;
	}

	.projectspage h2 {
		font-size: 1vw;
	}

	.projectspage .text {
		font-size: 1vw;
	}

	.projectspage .highlight .info{
		opacity: 0;
		transition: .5s ease;
	}

	.footer {
		font-size: 0.5vw;
	}
}



/* Mobile */

@media screen and (max-width:800px) {
	a {
		font-size: 3vw;
	}
	
	table {
		width: 100%;
	}
	
	video {
		width: 100%;
	}

	.text {
		font-size: 3vw;
	}

	.topnav a {
		font-size: 5vw;
		padding: 2vw 2vw;
	}
	
	.aboutpage {
		width: 80%;
		left: 10%;
		top: 15vw;
	}

	.aboutpage h1 {
		font-size: 10vw;
	}

	.aboutpage h2 {
		font-size: 5vw;
	}

	.aboutpage h3 {
		font-size: 5vw;
	}
	
	.aboutpage .container {
		flex-wrap: wrap;
		margin-bottom: 15vw;
	}

	.aboutpage .container .hithere {
		width: 100%;
	}

	.aboutpage .container .whoami {
		width: 100%;
	}

	.aboutpage .container .skills {
		width: 45%;
	}

	.projectspage {
		width: 80%;
		left: 10%;
		top: 10vw;
	}

	.projectspage h1 {
		font-size: 5vw;
	}

	.projectspage h2 {
		font-size: 2vw;
	}
	
	.projectspage .highlight {
		margin-bottom: 15vw;
	}

	.projectspage .highlight .info {
		opacity: 1;
		position: relative;
		margin-top: 5vw;
	}

	.footer {
		font-size: 2vw;
	}
}