@import url('https://fonts.googleapis.com/css2?family=Cardo&family=Quicksand:wght@300&family=Sacramento&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=Sacramento&display=swap');
@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla&family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora&family=Quicksand:wght@300&family=Slabo+27px&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
body{
	background-color: black;
	color: white;
	font-family: 'Karla', sans-serif;
	max-width: 100%;
}
.navbar{
	max-width: 100%;
}
.img {
	width: 60%;
	height: 60%;
}
.navbar-brand{
	font-family: 'MuseoModerno', cursive;
}
.bg-dark{
	background: transparent !important;
	transition: ease 2s;
}
.bg-dark.scrolled{
	background: #111 !important;
}
main h1 {
	font-family: 'MuseoModerno', cursive;
}
main h6 {
	font-family: 'Quicksand', serif;
}
.head {
	margin: 0 0;
	padding: 0 auto;
	max-width: 100%;
}

.jumbotron {
	padding: 0px;
	margin: 0;
	text-align: center;
	justify-content: center;
}
#particles-js{
	width: 100%;
	height: 350px;
	background-color: #111;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.particles-js-canvas-el{
	position: absolute;
	height: 300px !important;
}
 .center-content {
	 padding-top: 2vw;
	 justify-content: center;
	 text-align: center;
 }

.col-content {
	text-align: center;
}
.container .row .col-content {
	overflow: hidden;
}
 .container .row .col-content img {
	 max-width: 100%;
	 transition: transform 1s;
 }
 .container .row .col-content img:hover {
	 transform: scale(1.05);
 }

footer .col-content {
	padding-bottom: 0.8rem;
}
.navbar-brand {
	margin: 0px;
}
.navbar-toggler {
	padding: 2px;
}

.fa {
	color: whitesmoke;
	background-color: #47476b;
	font-size: x-small;
	padding: 0.3rem;
	border-radius: 1.3rem;
 }
.fa-camera{
	padding: 0px;
	padding-top: 1px;
	padding-right: 5px;
}
#top-icon {
	color: white;
	background-color: black;
	font-size: small !important;
}
footer{
	background-image: #111;
	padding-left: 30px;
	padding-right: 30px;
	background-color: rgba(20, 20, 20, 1);
}
#about-hr{
	border: 0.1px solid rgba(255, 255 , 255, 0.1);
	width: 30%;
}
#work-hr{
	border: 0.1px solid rgba(255, 255 , 255, 0.1);
	width: 30%;
	margin-bottom: 0px;
}
#about-hr-large{
	border: 0.1px solid rgba(255, 255 , 255, 0.1);
	width: 70%;
}
#caption-hr{
	border: 0.1px solid rgba(255,255,255,0.2) !important;
	width: 70%;
	margin-top: 1rem;
}
.figure-caption{
	align-items: center;
	text-align: center;
	justify-content: center;
	padding-left: 50px;
	padding-right: 50px;
	font-family: 'Quicksand', sans-serif;
	color: rgba(255, 255 , 255, 1);
}
img {
	padding-top: 40px;
	padding-left: 40px;
	padding-right: 40px;
}
#container-top{
	padding-top: 0px;
}
.con-us p{
	margin: 0px;
}
footer .container h1 {
	font-family: 'MuseoModerno', cursive;
}
footer .top {
	padding-bottom: 5px;
}
footer hr{
	border: 0.1px solid rgba(255, 255 , 255, 0.1);
	width: 30%;
}
footer .bottom{
	padding-top: 5px;
	padding-bottom: 5px;
}
footer .bottom h1 {
	font-size: 1.8rem;
	color: rgba(255, 255 , 255, 0.6);
}
footer p {
	color: rgba(255, 255 , 255, 0.8);
	font-family: 'Quicksand', 'sans-serif';
}
#footer-hr{
	border: 0.1px solid rgba(255, 255 , 255, 0.1);
	width: 50%;
}
#about-col{
	font-family: 'Quicksand', sans-serif;
	padding-left: 50px;
	padding-right: 50px;
}


/* Sorting Styling  */

#all{
	background-color: red;
}
.sorting{
	margin-top: 1em ;
	display: flex;
	justify-content: center;
}

.sorting-column{
	justify-content: center;
	margin: 0.2em;
}

.sorting-btn{
	background-color: black;
	color: white;
	margin: 0.2em;
	border-radius: 0.3em ;
}

@media (max-width:600px){
	.sorting{
		flex-direction: column;
		align-items: center;
	}
}