index1.css

body{
	margin:0;
	padding: 0;
	background-color: #C3CCCC;
	
}
#index_sidenav{
		list-style-type: none;
		padding: 3px;
		margin-left: -210px
	}
	#index_sidenav li{
		display: block;
		background-color: #f2f2f2;
		width: 200px;
		padding:5px;


	}
	#index_sidenav li:hover{
		background-color: #C3DDDD;

	}
	#index_sidenav li a{
		text-decoration: none;
	}
	#icons .fa-instagram{
	 font-size: 30px;
	 width:50px;
	 height:50px;
	 border-radius: 25px;
	 background-color:#E1306C;

	 color:white;
	 padding:10px;
	}
#icons .fa-twitter{
	font-size: 30px;
	width:50px;
	height:50px;
	border-radius: 25px;
	padding:10px;
	background-color: #55ACEE;
	color: white;
}

#icons .fa-facebook{
	font-size: 30px;
	width:50px;
	height:50px;
	border-radius: 25px;
	padding:10px;
	background-color: blue;
	color: white;
}

#icons .fa-linkedin{
    font-size: 30px;
	width:50px;
	height:50px;
	border-radius: 25px;
	padding:10px;
	background-color: #55ACEE;
	color: white;
}

#icons .fa-instagram:hover{
	animation-name: icons;
	animation-iteration-count:1;
	animation-duration: 3s;
	animation-direction:alternate;
}
@keyframes icons{
	from{
		transform: scale(0.6);
	}
	to{
		transform: scale(0.9);
	}
}


#icons .fa-facebook:hover{
	animation-name: icons;
	animation-iteration-count:1;
	animation-duration: 3s;
	animation-direction:alternate;
}
@keyframes icons{
	from{
		transform: scale(0.6);
	}
	to{
		transform: scale(0.9);
	}
}
#icons .fa-twitter:hover{
	animation-name: icons;
	animation-iteration-count:1;
	animation-duration: 3s;
	animation-direction:alternate;
}
@keyframes icons{
	from{
		transform: scale(0.6);

	}
	to{
		transform: scale(0.9);
	}
}
#icons .fa-linkedin:hover{
	animation-name: icons;
	animation-iteration-count:1;
	animation-duration: 3s;
	animation-direction:alternate;
}
@keyframes icons{
	from{
		transform: scale(0.6);
	}
	to{
		transform: scale(0.9);
	}
}
.account{
	margin-left: 1300px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;

}
#login{
	background-color: #000;
	color:red;
	font-size: 18px;
	text-align: center;
	padding: 10px;
	width: 10rem;
	line-height: 30px;
	border-radius: 5px;
}


@media (max-width: 411px){
	
	 #horizontal {
		
		display: inline-block;
		text-align: center;
		color: red;
		overflow: auto;
		background-color: #000;
		width: 100%;

	}
	 #horizontal li a{
		color:red;
		font-size: 17px;
		display: inline-block;

	}
	
	
}
@media (max-width: 2000px){
	#horizontal{

		
		text-align: center;
		color: red;
		
		background-color: #000;
		width: 100%;
	}
	#horizontal li a:hover{
		background-color:#c4ada3;
		line-height:auto;
		width: auto;
		box-shadow: 1px 2px #3a4737 3px;
	}
	
#horizontal li a{
		color:red;
		font-size: 25px;
		padding-left: 30px;
		margin-left: 30px;

	}
	
	

		}
@media (max-width: 770px){


	#horizontal{

		
		text-align: center;
		color: red;
		
		background-color: #C3CCCC;
		width: 100%;
	}
	#horizontal li a:hover{
		background-color:#c4ada3;
		line-height:auto;
		width: auto;
		box-shadow: 1px 2px #3a4737 3px;
	}
	
#horizontal li a{
		color:blue;
		font-size: 25px;
		margin-top: 5px;

	}
#card .card{
		width:250px;
		
	}
}
@media  (max-width:550px){
	#horizontal{
		overflow: hidden;
		color:red;
		background-color: #000;
		width: 100%;
	}
	#horizontal li a:hover{
		background-color:#c4ada3;
		line-height:auto;
		width: auto;
		box-shadow: 1px 2px #3a4737 3px;
	}
	#horizontal li a{
		color:blue;
		font-size: 18px;
		margin: 0;
		padding: 15px;

	}
	#card .card{
		width:250px;
		
	}

}

@media  (max-width: 442px){
	#horizontal{
		overflow: hidden;
		color:red;
		background-color: #000;
		width: 100%;
	}
	#horizontal li a:hover{
		background-color:#c4ada3;
		line-height:auto;
		width: auto;
		box-shadow: 1px 2px #3a4737 3px;
	}
	#horizontal li a{
		color:blue;
		font-size: 18px;
		margin: 0;
		padding: 10px;

	}
	#card .card{
		width:250px;
		
	}

}
@media  (max-width: 390px)

{
	#horizontal{
		overflow: hidden;
		color:red;
		background-color: #000;
		width: 100%;
	}
	#horizontal li a:hover{
		background-color:#c4ada3;
		line-height:auto;
		width: auto;
		box-shadow: 1px 2px #3a4737 3px;
	}
	#horizontal li a{
		color:blue;
		font-size: 25px;
		text-align: center;
		margin: 0;
		padding-left:20px;

	}

}
@media screen and (max-width: 320px)

{
	#horizontal{
		overflow: hidden;
		color:red;
		background-color: #000;
		width: 100%;
	}
	#horizontal li a:hover{
		background-color:#c4ada3;
		line-height:auto;
		width: auto;
		box-shadow: 1px 2px #3a4737 3px;
	}
	#horizontal li a{
		color:blue;
		font-size: 25px;
		margin: 0;
		padding:3px;
		padding-left:15px;

	}

}

@media screen and (max-width: 280px)

{
	#horizontal{
		overflow: auto;
		color:red;
		background-color: #000;
		width: 100%;
	}
	#horizontal li a:hover{
		background-color:#c4ada3;
		line-height:auto;
		width: auto;
		box-shadow: 1px 2px #3a4737 3px;
	}
	#horizontal li a{
		color:blue;
		font-size: 16px;
		margin: 0;
		padding:2px;

	}

}