html{
	scroll-behavior: smooth;
}
body {
	background-color: rgb(53, 53, 53);
	color: rgb(211, 211, 211);	
}

.navbar {
	opacity:1;
	background:rgba(0, 0, 0, 0) ;
	height:60px;
	transition: 1s ease;
}

.navbar.scrolled{
	background:rgb(0, 0, 0) ;
	height:60px;
}

.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link:focus {
	color:black;
	background-color:rgba(211, 204, 204, 0.774);
	border-radius: 5px;
}

.dropdown-menu{
	background-color: black;
}
.navbar .navbar-nav .nav-link {
    color:white;
}

.footer{
	background-color:black;
	text-align: center;
	color: white ;
}

.hero{
	background: url(../img/bg.jpg) ;
	background-size: cover;
	height: 100vh;
}

.front{
	background: url(../img/bg.jpg) ;
	background-size: cover;
	height:100vh;
	color: white;
}

.intro{
	color:white;
}

.project{
	padding: 5px 5px 5px 5px;
	border-bottom: solid rgb(167, 167, 167) 2px;
	background:rgba(24, 23, 23, 0.527);
}

.project_head{
	color:black;
	margin: 0px 5px 5px 5px;
	padding: 1% 5% 1% 3%;
	display:flex;
}

.projectImg{
	height: auto;
	width: 80%;
}

.project_text{
	min-height:20vh;
}

.project_links{
	height:5vh;
}

.project_link{
	font-weight:bold;
	color:rgba(138, 173, 248, 0.945);
}

h2{
	padding-top: 3px;
}

#projects{
	background-color:  rgb(102, 102, 102);
}

#contact{
	background-color: rgba(0, 0, 0, 0.781);
}

p{
	font-size: 18px;
	padding-top: 10px;
}

strong{
	color: white;
}

strong:hover, strong:focus{
	cursor: pointer;
}

.pointer{
	cursor: pointer;
}

a{
	color: rgb(211, 211, 211);
}
a:hover, a:focus{
	color: rgb(255, 255, 255);
}

.outline{
	border: 2px solid rgba(0, 0, 0, 0.829);
}

.downarrow{
	height: 30px;
	width: 30px;
}

/*Animation*/
.flashing {
	animation: flash 1s step-start infinite;
}
@keyframes flash{
	50%  { opacity: 0 ;}
}

.animation_1 {
	animation: key_one 2s ease-in-out infinite;
  }
  
  @keyframes key_one {
	0% {transform: translate(0, 10px);}
	50% {transform: translate(0, 0);}
	100% {transform: translate(0, 10px);}
  }