@import url('https://fonts.googleapis.com/css2?family=DM Sans:wght@200;300;400;500;600;700&display=swap');


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'DM Sans',sans-serif;
	scrollbar-color: #ffd63e black;
}

::selection {
	color: #000;
	background: #fff;
}



/* Text */

a {
    font-weight: bold;
	text-decoration: none;
	font-size: 1vw;
	text-align: center;
	color: #888888;
	transition: .5s ease;
}

a:hover {
    color: #ffd63e;
}


h1 {
	color: #ffd63e;
	text-align: center;
	font-size: 2vw;
	font-weight: bold;
}


ul {
	list-style-type: none;
	color: #ffffff;
}


tr {
	font-weight: normal;
}

th {
	font-weight: normal;
	width: 25%;
	vertical-align: top;
}

table {
	width: 60%;
	margin: auto;
	justify-content:center;
	text-align: center;
	color: #ffffff;
	font-weight: normal;
	padding-bottom: 1vw;
}

video {
	width: 75%;
}

.text {
	color: #ffffff;
	font-size: 1vw;
	text-align: justify;
}


/* Image Grid */

.row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1vw;
	width: 100%;
	padding-top: 1vw;
}

.column {
	float: left;
	width: 100%;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.column img {
	cursor: pointer;
	align-items: center;
	justify-content: center;
	opacity: 0.5;
	transition: .5s ease;
}

.column img:hover {
	opacity: 1;
}



/* Top Nav */

.topnav {
	overflow: visible;
	background-color: #000000;
	width: 100%;
	position: fixed;
	display: flex;
	border: none;
	outline: none;
	margin: 0;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.topnav a {
	float: center;
	color: #888888;
	text-align: center;
	padding: 0.75vw 1vw;
	text-decoration: none;
	border: none;
	outline: none;
	margin: 0;
	font-size: 1.25vw;
	font-weight: bold;
	transition: .5s ease;
}

.topnav a:hover {
	color: #ffd63e;
}



/* About */

.aboutpage {
	position: absolute;
	top: 5vw;
	left: 22.5%;
	width: 55%;
	margin: auto;
	justify-content:center;
	text-align: center;
	padding-bottom: 10vw;
}

.aboutpage h1 {
	color: #ffd63e;
	font-size: 5vw;
	font-weight: bold;
	padding-top: 2vw;
}

.aboutpage h2 {
	color: #ffffff;
	font-size: 2vw;
	font-weight: normal;
	margin-bottom: 5vw;
}

.aboutpage h3 {
	color: #ffd63e;
	font-size: 2vw;
	font-weight: bold;
	margin-bottom: 1vw;
}

.aboutpage .container {
	align-items: center;
	justify-content: center;
	display: flex;
	flex-wrap: column;
	gap: 1.5vw;
	margin-bottom: 5vw;
}

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

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

.aboutpage .container .whoami img {
	display: block;
	width: 100%;
}

.aboutpage .container .whoami .young {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: .5s ease;
	background-image: url(../img/young.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

.aboutpage .container .whoami:hover .young {
	opacity: 1;
}

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



/* Games */

.gamespage {
	position: absolute;
	top: 5vw;
	left: 22.5%;
	width: 55%;
	margin: auto;
	justify-content:center;
	padding-bottom: 10vw;
}


.gamespage h2 {
	color: #ffffff;
	text-align: center;
	font-size: 0.75vw;
	font-weight: normal;
	margin-bottom: 1vw;
}

.gamespage .highlight {
	position: relative;
	width: 100%;
	height: 100%;
	justify-content: center;
	margin-top: 3vw;
	margin-bottom: 2vw;
}

.gamespage .highlight img {
	display: block;
	width: 100%;
	height: auto;
}


.gamespage .highlight .info {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: #000000;
	padding-top: 0.5vw;
}

.gamespage .highlight:hover .info {
	opacity: 1;
}

/* Research */

.researchpage {
	position: absolute;
	top: 5vw;
	left: 22.5%;
	width: 55%;
	margin: auto;
	justify-content:center;
	padding-bottom: 10vw;
}

/* Contact */

.contactpage {
	position: absolute;
	top: 5vw;
	left: 22.5%;
	width: 55%;
	margin: auto;
	justify-content:center;
	padding-bottom: 10vw;
}


.contactpage .container {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.contactpage .form {
	width: 60%;
	display: flex;
    align-items: center;
    justify-content: center;
	flex-direction: column;
	gap: 1vw;
	margin: 1vw;
	
}

.contactpage .form input {
	width: 100%;
	border: 0.2vw solid #888888;
    outline: none;
	text-align: justify;
	color: #ffffff;
	background-color: #000000;
	font-weight: bold;
	font-size: 1vw;
	padding: 0.5vw;
	transition: .5s ease;
}

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

.contactpage .form input::placeholder {
    color: #888888;
	text-align: justify;
}

.contactpage .form textarea {
    width: 100%;
	border: 0.2vw solid #888888;
    outline: none;
	color: #ffffff;
	background-color: #000000;
	font-size: 1vw;
	padding: 0.5vw;
	transition: .5s ease;
	resize: none;
	scrollbar-color: #ffd63e black;
}

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

.contactpage .form textarea::placeholder {
    color: #888888;
	text-align: justify;
}

.contactpage .form button {
    cursor: pointer;
	font-weight: bold;
	text-decoration: none;
	font-size: 1.5vw;
	text-align: center;
	color: #888888;
	background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    outline: none;
	transition: .5s ease;
}

.contactpage .form button:hover {
    color: #ffd63e;
}

.contactpage .testimonials {
	position: relative;
	width: 100%;
	height: 100%;
	justify-content: center;
	margin-top: 3vw;
	margin-bottom: 2vw;
}

.contactpage .testimonials img {
	display: block;
	width: 100%;
	height: auto;
}


.contactpage .testimonials .info {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: #000000;
	padding-top: 2vw;
}

.contactpage .testimonials:hover .info {
	opacity: 1;
}


/* Footer */

.footer {
   position: fixed;
   text-align: center;
   display: flex;
   color: #444444;
   background-color: #000000;
   font-size: 0.75vw;
   font-weight: bold;
   justify-content: center;
   bottom: 0;
   overflow: visible;
   width: 100%;
   padding: 1vw;
   z-index: 10;
}