@font-face {
		font-family: "Seurat Pro";
		src: url("/fonts/seuratpro.woff2");
		}
		
		body {
		background-color:#170d29;
		}

		.mainpage {
		color:white;
		font-family: "Seurat Pro";
		margin:0 auto;
		max-width: 1100px;
		}

		.icons {
		border-radius: 600px;
		width: 200px;
		flex-shrink:0;
		align-self:center;
		}
		
		.homebutton{
		float:right;
		display:none;
		}

		.titletext {
		text-align:center;
		}	
		
		.boxestitle {
		display:inline-block;
		width:50%;
		font-size:24px;
		}
		
		.boxeshome {
		display:inline-block;
		float:right;
		font-size:24px;
		transition: all 0.1s ease-in-out;	
		}
		
		.boxeshome:hover {
		transform: scale(1.04);
		transition: all 0.07s ease-in-out;	
		}
		
		.boxeshome:active {
		transform: scale(0.95);
		opacity:0.7;	
		}
		
		.boxesartfight {
		display:inline-block;
		font-size:24px;
		transition: all 0.1s ease-in-out;	
		}
		
		.boxesartfight:hover {
		transform: scale(1.04);	
		transition: all 0.07s ease-in-out;	
		}
		
		.boxesartfight:active {
		transform: scale(0.95);
		opacity:0.7;	
		}
		
		
		.boxes {
		border-radius:10px;
		background-color:#2e1757;
		padding:20px;
		}
		
		.projects {
		display: flex;
		flex-direction: column;
		text-align: center;
		gap: 15px;
		}
		
		.heading {
		font-size:30px;
		margin:0;
		padding-bottom:20px;
		text-align:center;	
		}
		
		.flex {
		display:flex;
		}
		
		.infoboxes {
		flex-direction: column;
		gap: 15px;
		}
		
		.mainboxes{
		border-radius:10px;
		padding:20px;
		margin-top:20px;
		background-color:#231242;
		}
		
		.padneed {
		padding-left:10px;
		}

		.name {
		font-size:30px;
		margin:0;
		}
		
		.namecard {
		gap:15px;
		}
		
		.socialicons {
		gap:10px;
		}
		
		.socials {
		width:40px;
		height:auto;
		border-radius:6px;
		transition: all 0.1s ease-in-out;	
		}
		
		.projecticons {
		width:60%;
		transition: all 0.1s ease-in-out;	
		}
		
		.projecticons:hover, .socials:hover {
		cursor:pointer;
		transform: translateY(-3px) scale(1.01);
		box-shadow: 0px 3px 5px rgba(11, 4, 60, 0.3);
		}
		
		.projecticons:active, .socials:active {
		transform: translateY(2px) scale(0.99);
		opacity:0.7;
		box-shadow: 0px 4px 1px rgba(11, 4, 60, 0.0);
		}

		
		
		@media screen and (max-width: 750px) {
		
		.icons {
		width: 50%;
		text-align:center;
		}
		
		.namecard {
		flex-direction: column;
		}
		
		.boxeshome {
		display:none;
		}		
		
		.boxestitle {
		font-size:26px;
		display:block;
		width:auto;
		}
		
		.projecticons {
		width:100%;
		}
		
		.boxes{
		text-align:center;
		}
		
		.socialicons {
		margin:0 auto;
		width: fit-content;
		}
		
		.name {
		padding-left:0px;
		}
		
		.mainpage {
		margin-left:0%;
		margin-right:0%;
		font-size:15px;
		}
		
		.mainboxes{
		padding:10px;
		}
		
		.padneed {
		padding-left:0px;
		}
		
		.dealwiththeicon {
		text-align:center;		
		}
		
		
		}
		
		
		
		@media screen and (max-width: 500px) {
			
			
		.boxestitle {

		font-size:20px;
		}
			
			
		}
		
		
		@media screen and (max-width: 400px) {
			
			
		.boxestitle {

		font-size:18px;
		}
			
			
		}