@import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Inter:wght@400;700&family=Roboto&display=swap');




#selectedCategories .categoryTitle {
	display: inline-block;

}




div#cardContainer {
    margin: 20px;
}


#selectedCategories {
	margin: 20px;
	font-family: Inter;
	font-size: 36px;
	font-weight: bold;

}

.filter {
	font-family: Inter;
	font-size: 34px;
	font-weight: bold;
}


#profile h1, nav span{
	font-family: 'Inconsolata', monospace;
	font-weight: lighter;
}

#profile h1 {
	font-size: 24px;
}

nav span {
	font-size: 18px;
}


.selectedPage {
	color:  white;
}


#projGallery {
	height: 50vw;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}


@media only screen and (min-width: 640px) {

	body {
		display: grid;
		grid-template-columns: 25% 75%;
	}

	#navigation {
	    grid-column: 1 / span 1;
	    margin: 40px 20px;
	}

	#main {
	    grid-column: 2 / span 1;
	    display: block !important;
	}

	#profile {
		display: block;
		text-align: center;
	    /*grid-column: 1 / span 2;*/
	}


	.imgContainer {
    	display: grid;
    	grid-template-columns: 70% 30%;
    	text-align: left;
	}

	#imageBox {
		background-position-y: top;
	}

	button {
		display: inline-block;
	}

	.filter {
		font-size: 30px;
	}

	#profile h1 {
		font-size: 18px;
	}

	nav span {
		font-size: 14px;
	}

	.games:hover {
		color: rgba(255, 255, 255, 1.0);
		background-color: var(--game);
		transition: 0.3s;
	}


	.design:hover {
			color: rgba(255, 255, 255, 1.0);
			background-color: var(--des);
			transition: 0.3s;
		}

	.code:hover {
		color: rgba(255, 255, 255, 1.0);
		background-color: var(--code);
		transition: 0.3s;
	}

	.art:hover {
			color: rgba(255, 255, 255, 1.0);
			background-color: var(--art);
			transition: 0.3s;
		}


	.sampleDesc {
		opacity: 0;
		background-color: var(--secondary);
		transition: 0.3s;
		height: 100%;
		text-align: center;
		position: relative;
	}


	.sampleDesc h4 {
    	display: block;
    	background: none;
    	padding: 0px;
    	border-bottom-right-radius: 0px;
	}

	.sampleDesc h4 {
		top: 50%;
	    position: absolute;
	    /* text-align: center; */
	    /* width: 100%; */
	    /* height: 10%; */
	    left: 50%;
	    transform: translate(-50%, -50%);
	}

	.sampleDesc:hover {
		opacity: 1;
		transition: 0.3s;
	}


	#navLinks {
		text-align: left;
	  	margin: 0px;
	  	line-height: normal;
	}


	#accessibility {
	font-family: 'Inconsolata';
	display: inline-block;
	min-width: 40px;
	position: fixed;
	font-size: 16px;
	bottom: 10px;
	left: 10px;
	background-color: var(--darkerPrimary);
	z-index: 100;
	opacity: 0.5;
	transition: 0.2s;
	}

	#accessibility:hover {
		opacity: 1;
		transition: 0.2s;
	}

	#accessibilityMobile {
		display:  none;
	}

	nav {
		background: none;
		position: fixed;
		left: 0px; 
		width: 25%;
		
	}

	#navLinks {
		padding: 20px;
		width: 70%;
		margin: auto;
		display: block;
	}


	#socials span {
		display: none;
	}

	#socials li {
	    display: inline-block;
	    width: 15%;
	}


	#hamburger, #tune {
		/*display: none !important;*/
		display: none;
	}

	#projGallery {
		height: 40vw;

	}

	#bio, #commissionSheet {
		width: 70%;
	}

	#bio h2, #commissionSheet h2 {
		font-size: 36px;
	}

	#projName {
		font-size: 34px;
    	margin-top: 0px;
	}

	#projCat, .projCatCard {
		font-size: 24px;
    	margin-bottom: 15px;
	}


	th {
		font-size: 16px;
	}

	.projImage, .imageBox {
		height: 40vw;
	}

	.imageCaption {
		padding: 20px;
	}

	.sampleWrap {
		height: 200px;

	    background-repeat: no-repeat;
	    background-position: center;
	}

	#modalBox img {
		width: auto;
		height: 100%;
		position: relative;

}
	}





}


/*Desktop screen stuff here*/
@media only screen and (max-width: 1200px) {

	body {
		display: grid;
		grid-template-columns: 25% 75%;
	}

	div#cardContainer {
	    display: grid;
	    grid-column-gap: 20px;
	  	grid-template-columns: auto;
	  	margin: 20px;
	  	grid-auto-rows: 40vw;
	}

	#navigation {
	    grid-column: 1 / span 1;
	    margin: 40px 20px;
	}

	#main {
	    grid-column: 2 / span 1;
	}


	#proj {
		/*position: fixed;*/
		left: 0px;
		margin: 70px 40px;
	}

	#profile {
		display: block;
		text-align: center;
	    /*grid-column: 1 / span 2;*/
	}



	#profpic {
		  display: inline;
	}

	#socials li {
	display: inline-block;
	width: 15%;
	}

	#socials img {
		height: 20px;
	}

	#socials span {
		display: none;
	}



	.card {
		
	}

	#tune {
		display: none;
	}


	#hamburger {
		display: none;
	}

	#navLinks {
		/*display: none; /*important!*/
		float:  none;
	}

	main {
		float: none;
		display: block !important;
	}

	nav {
		float: none;
	}

	body {
		width: 100%;
		margin: auto;
	}

	#bio, #commissionSheet {
		width: 80%;
	}



	
}






/*Desktop screen stuff here*/
@media only screen and (min-width: 1200px) {

	body {
		display: grid;
		grid-template-columns: 25% 75%;
	}

	div#cardContainer {
    display: grid;
    grid-column-gap: 20px;
  	grid-template-columns: 50% auto;
  	margin: 20px;
  	grid-auto-rows: 20vw;
	}

	#navigation {
	    grid-column: 1 / span 1;
	    margin: 40px 20px;
	}

	#main {
	    grid-column: 2 / span 1;
	}


	#proj {
		left: 0px;
		margin: 70px 40px;
	}

	#profile {
		display: block;
		text-align: center;
		float: none;
	    /*grid-column: 1 / span 2;*/
	}



	#profpic {
		  display: inline;
	}

	#socials li {
	display: inline-block;
	width: 15%;
	}

	#socials span {
		display: none;
	}


	#socials img {
		height: 20px;
	}



	.card {
		
	}

	#tune {
		display: none;
	}


	#hamburger {
		display: none;
	}

	#navLinks {
		/*display: none ; /*!important*/
	}

	main {
		float: none;
		display: block !important;;
	}

	nav {
		float: none;
	}

	body {
	margin: auto;
	}

	#bio, #commissionSheet {
		width: 70%;
	}



	


	
}