index.css

/* Style sheet for Index Page
   Creation Date :19-02-2021				
   Last Updated  :19-02-2021
*/
header
{
width:100%;
position:fixed;
top:0px;
z-index:99999 !important;
font-size:1rem;
background:white;
box-shadow:0px 0px 15px silver;
}	  


.description:before{
		content:"Project Description";
		display:block;
		color:black;
		}
		.description{
		color:gray;}
		 body{margin:0px;}
.footer
{
position:fixed;
z-index:99999 !important;
bottom:0px;
width:100%;
background:dodgerblue;	
display:flex;
flex-direction:row;
justify-content:space-evenly;
padding:5px;
flex-wrap:wrap;
}
.flex span{
	font-size:2.5em;
	line-height:1.5em;
	font-style:italic;
	font-weight:900;
	max-width:225px;
	min-width:120px;
	word-wrap:br
	font-family:monospace;
}
.block{
	padding:20px;
	box-shadow:0px 0px 10px black;
}
.sideTag
{
	position:relative;
	left:100%;
	
}	 
.projects
{
display:flex;
flex-wrap:wrap;
flex:1 1 150px;
}  

.project{
margin:20px;
border:1px solid teal;
padding:30px;
max-width:320px;
}
	   #main{
	   margin-top:45px;
	   }
            #main{
                display:flex;
                flex-direction: column;
                width:90%;
                align-items:center;
                background:rgba(84, 87, 241, 0.13);
                margin:auto;
                
            }
            .lab{
                position:relative;
                z-index: 9999 !important;
				left:60px;
                font-size:35px;
            }
            .flex{
                display:flex;
				position:relative;
                align-items:center;
                justify-content: center;
            }
            .skills{
                display:flex;
				flex-direction:row;
				flex-wrap:wrap;
            }
#title{text-align:center;}            
            
            #nav-bar{
                
            }
            #nav-bar li
            {
                display:inline-block;
                margin:0px 10px;
            }
			footer{
				position:fixed;
				
			}
.hide{
	display:none;
}
.show{
		display:flex;
	}
	.max-pic{
				
                border:20px solid white;
                border-radius:10% 0% 10%;
                box-shadow:0px 0px 15px black;
                position:relative;
				margin:auto;
				top:25px;
            }
			
@media screen  and (max-width:425px){
	
	header{
		font-size:2rem;
		padding:10px;
	}
	header button{
		font-size:1rem;
		padding:2px;
		border:none;
	}
	#title{
		position:relative;
		font-size:0.6rem;
		font-family:cursive;
		
		
		
		margin-top:100px;
		
	}
	#title h3{
		text-align:center;
		width:100%;
	}
	#nav-bar{
		flex-direction:column;
		position:relative;
		border-radius:25px;
		padding:10px;
		margin:10px;
		background:rgba(255,200,255,0.9);
	}
	#nav-bar li{
		padding:10px;
		margin:auto;
		width:max-content;
	}
	div#profile {
		margin:auto;
		display:grid;
		
	}
	img.max-pic{
		max-width:240px;
		min-width:150px;
	}
	#about{
		margin-top:15px;
		padding:10px;
		position:relative;
	}
	.projects{
flex-direction:column;}
.project{
max-width:300px;}
	.project span{
		
		word-wrap:break-word;
		font-weight:900;
		font-family:sans-serif;
	}
	img.social{
		width:20px;
		height:20px;
	}
	footer{
		display:flex;
		flex-wrap:wrap;
		width:320px;
	}
}

@media screen and (min-width:426px) and (max-width:768px){
header{
	font-size:2.6rem;
	padding:10px;
}	
header button{
	font-size:1.4rem;
}
#title{
	margin-top:104px;
}
#title h3{
	font-size:1.2rem;
}
#nav-bar{
width:75%;
height:-webkit-fill-available;
height:-moz-available;
height:100%;
display:flex;
flex-direction:column;
position:fixed;
top:0px;
background:white;
z-index:99999 !important;
box-shadow:0px 0px 10px silver;

}
button.close{
	position:absolute;
	right:0px;
	font-size:1.5rem;
	background:none;
	border:1px solid black;
	border-radius:5px;
	margin:15px;
}
.show{
transition:all 0.5s;	
}
.hide{
transition:all 0.5s;	
}
#nav-bar.show{
transform:translate(0);	
}
#nav-bar.hide{
	transform:translate(-100%);
	left:-100%;
	
}
#nav-bar ul{
	display:flex;
	flex-direction:column;
	
}
#nav-bar ul li a{
	font-weight:900;
	font-size:2rem;
	text-decoration:none;
	color:Teal;
	
	
}
div#profile{
	display:grid;
	margin:auto;
}
img.max-pic{
	width:240px;
}
#about{
	margin-top:15px;
	padding:10px;
	position:relative;
}
.block{
	margin:10px;
	padding:10px;
}
div.footer{
	background-color:white;
	box-shadow:0px 0px 10px silver;
	padding:10px;
}
}
@media screen and (min-width:769px) 
{
	header div{
		font-size:2.8rem;
		padding:10px;
	}
	header button{
		display:none;
	}
	#title h3{
		position:relative;
		margin-top:82px;
	}
	#nav-bar{
		display:flex;
		justify-content:flex-end;
	}
	button.close{
		display:none;
	}
	
	#nav-bar ul li a{
		text-decoration:none;
		font-weight:900;
		font-family:cursive;
		
	}
	.max-pic{
	float:right;	
	margin-right:40px;
	}
	#about{
		border:1px solid black;
		padding:20px;
		border-radius:25px;
	}
	.project:hover{
		box-shadow:0px 0px 15px gray;
	}
	.footer{
		background:rgba(0,0,70,1);
		padding:10px;
		
	}
	.footer:before{
		content:"Follow Me";
		color:white;
	}
	}