@charset "utf-8";
/* CSS Document */

html * {
    padding: 0;
    margin: 0;
    font-family: Politica, "Politica Black", "Politica Bold Cd", "Politica Bold Italic Xp", "Politica Thin Italic Cd", "Politica Xp";
    color: #000000;	
}

a{
	text-decoration: none;	
}
	
body{
	background-color:black;
}


.topnav{
	display: grid;
	place-items: center;
	grid-template-columns: 1fr  1fr;
	padding: 25px 50px;
	font-size: 18pt;
	
	
	
}

.nameleft{
	color: white;
}
.resumeright{
	color: white;
}

.nameleft:hover {
	background-color: cyan;
	color: black;
}

.resumeright:hover {
	background-color: magenta;
	color: black;
	
}

.maincontent{
	display: grid;
	place-items: center;
	padding: 50px;
	font-size: 20pt;
	
}

.mainsubheading{
	color: white;
}



.circlecontainer{
	padding: 60px 50px;
	display: grid;
	justify-content: center;
	place-items: center;
	grid-template-columns: 30px 30px 30px 30px;
	column-gap: 20px;
	
}

/*Actual circles start*/

.leftline{
	border-bottom: 5px solid black;
	display: block;
}

.cyanc{
/*	align-self: center;*/
	width: 30px;
	height: 30px;
	background-color: cyan;
	border-radius: 50%;
	
}

.magentac{
/*	align-self: center;*/
	width: 30px;
	height: 30px;
	background-color: magenta;
	border-radius: 50%;
}

.yellowc{
	align-self: center;
	width: 30px;
	height: 30px;
	background-color: yellow;
	border-radius: 50%;
}

.blackc{
/*	align-self: center;*/
	width: 30px;
	height: 30px;
	background-color: black;
	border-radius: 50%;
}

/*Actual circles end*/

.bottomlinkitem:hover{
	background-color:yellow;
	color: black;
	
}

.bottomlinks{
	padding-top: 60px;
	display: grid;
	place-items: center;
	font-size: 18pt;
	
}

.bottomlinkitem{
	padding: 6px;
	color:white;
	
}

/*"My work" css*/


*{
	padding: 0;margin: 0;
	box-sizing: border-box;
}


.snap-container{
	display: flex;
	overflow-x: scroll;
	padding: 24px; 
	width: 900px;
	height: 360px;
	scroll-snap-type: x mandatory;
	scroll-padding: 24px;
	gap: 12px;
	margin: 2rem auto;
}

.snap-container .item{
	flex: 0 0 100%;
	padding: 24px;
	border-radius: 8px;
	scroll-snap-align: start;
	
	
}