@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300&display=swap');

:root {
	--aboutMeCardBg: #2770e6;
	--darkColor: #000080;
	--darkest: #000000;
	--darker: #000040;
	--lighest: #ffffff;
	--secondaryBlue: rgb(30, 30, 110);
}

*{
	padding: 0;
	margin: 0;
	max-width: 100%;
	text-align: center;
}
html{
	overflow-x: hidden;
	scroll-behavior: smooth;
}
@keyframes lineAnim {
	from {
		width: 12px;
	}
	to {
		width: 80%;
	}
}
.line{
	width: 12px;
	height: 12px;
}
.lineAnimate{
	width: 80%;
	height: 12px;
	margin-left: 10%;
	margin-right: 10%;
	background-color: var(--secondaryBlue);
	border-radius: 6px;
	animation-name: lineAnim;
	animation-duration: 3s;
}

.hero{
	background-color: cyan;
}
.image{
	width: 100vw;
	margin: 0;
}

.navbar{
	z-index: 10;
	font-family: 'Be Vietnam Pro', sans-serif;
	position: sticky;
	top: 0;
	margin: 0;
	background-color: var(--secondaryBlue);
	padding: 12px;
}
.navbar ul{
	text-decoration: none;
	text-align: left;
}
.navbar li{
	color: white;
	padding: 12px;
	display: inline-block;
	transition: 0.5s;
}
.navbar li:hover{
	color: var(--secondaryBlue);
	background-color: lightblue;
	transition: 0.5s;
}
.alignNav{
  z-index: -1;
  margin-top: -58px;
}

.topic{
	margin-top: 0px;
	font-family: 'Work Sans', sans-serif;
	color: var(--lighest);
}
.description{
	font-family: 'Roboto', sans-serif;
	color: #cccccc;
}

.aboutme{
	padding-top: 24px;
	background-color: var(--darkest);
}
.projects{
	padding-top: 24px;
	background-color: var(--darker);
}
.teams{
	padding-top: 24px;
	background-color: var(--darkest);
}
.contact{
	padding-top: 24px;
	background-color: var(--darker);
}
.tbl{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
}
.tbl img{
	height: 200px;
	width: 200px;
}
.twoRow{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.fourCol{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
}
.fourCol a{
	color: cyan;
	font-family: 'Roboto', sans-serif;
}

.cardTxt a{
	color: #00cccc;
}
.cardTxt h1{
	color: var(--darkColor);
	border-bottom: 5px solid var(--darkColor);
	padding: 6px;
	margin-bottom: 12px;
	font-family: 'Rubik', sans-serif;
}
.cardTxt h3{
	color: cyan;
	font-family: 'Roboto Condensed', sans-serif;
}

.aboutMeCard{
	border: 6px solid var(--darkColor);
	background-color: var(--aboutMeCardBg);
	margin: 12px;
	padding: 24px;
	border-radius: 24px;
	display: inline-block;
	transition: transform .3s;
}
.aboutMeCard:hover{
	transform: scale(1.05);
}

.projectsCard{
	border: 6px solid var(--darkColor);
	background-color: var(--aboutMeCardBg);
	margin: 12px;
	padding: 24px;
	border-radius: 24px;
	display: inline-block;
	transition: transform .3s;
}
.projectsCard:hover{
	transform: scale(1.05);
}

.projectsCard img{
	background-color: grey;
	border: 12px solid var(--darkColor);
}

.teamsCard{
	border: 6px solid var(--darkColor);
	background-color: var(--aboutMeCardBg);
	margin: 12px;
	padding: 24px;
	border-radius: 24px;
	display: inline-block;
	transition: transform .3s;
}
.teamsCard:hover{
	transform: scale(1.02);
}
.teams img{
	height: 200px;
	border-radius: 200px;
	border: 12px solid var(--darkColor);
}

@media only screen and (max-width: 950px) {
  .tbl{
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
	}
	.aboutMeCard:hover{
		transform: scale(1.02);
	}
	.projectsCard:hover{
		transform: scale(1.02);
	}
}