/* Desktop */
@media screen and (max-width: 1200) {
	a {
		font-size: 1vw;
	}
	
	h1 {
		font-size: 2vw;
	}
	
	.text {
		font-size: 1vw;
	}
	
	.topnav a {
		font-size: 1.25vw;
		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: 33%;
	}
	
	.gamespage {
		width: 55%;
		left: 22.5%;
		top: 5vw;
	}
  
	.gamespage h2 {
		font-size: 1vw;
	}

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

	.gamespage .highlight .info{
		opacity: 0;
		transition: .5s ease;
	}
	
	.researchpage {
		width: 55%;
		left: 22.5%;
		top: 5vw;
	}
	
	.contactpage {
		width: 55%;
		left: 22.5%;
		top: 5vw;
	}
	
	.contactpage .contactform {
		width: 60%;
		margin: 1vw;
	}

	.contactpage .contactform input {
		border: 0.2vw solid #888888;
		font-size: 1vw;
		padding: 0.5vw;
	}

	.contactpage .contactform input:focus {
		border: 0.2vw solid #ffd63e;
	}

	.contactpage .contactform textarea {
		border: 0.2vw solid #888888;
		font-size: 1vw;
		padding: 0.5vw;
	}

	.contactpage .contactform textarea:focus {
		border: 0.2vw solid #ffd63e;
	}

	.contactpage .contactform button {
		font-size: 1.5vw;
	}
	
	.contactpage .testimonials .info {
		opacity: 1;
		position: relative;
		margin-top: 5vw;
	}

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



/* Mobile */

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

	.text {
		font-size: 3vw;
	}

	.topnav a {
		font-size: 4vw;
		padding: 2vw 3vw;
	}
	
	.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: 32%;
	}

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

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

	.gamespage .highlight .info {
		opacity: 1;
		position: relative;
		margin-top: 5vw;
	}
	
	.researchpage {
		width: 80%;
		left: 10%;
		top: 10vw;
	}
	
	.contactpage {
		width: 80%;
		left: 10%;
		top: 10vw;
	}
	
	.contactpage .form {
		width: 100%;
		gap: 2vw;
		margin: 2vw;
	}
	
	.contactpage .form input {
		border: 0.6vw solid #888888;
		font-size: 3vw;
		padding: 1.5vw;
	}

	.contactpage .form input:focus {
		border: 0.6vw solid #ffd63e;
	}

	.contactpage .form textarea {
		border: 0.6vw solid #888888;
		font-size: 3vw;
		padding: 1.5vw;
	}

	.contactpage .form textarea:focus {
		border: 0.6vw solid #ffd63e;
	}

	.contactpage .form button {
		font-size: 5vw;
	}
	
	.contactpage .testimonials .info {
		opacity: 1;
		position: relative;
		margin-top: 5vw;
	}
	

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