html{
	scroll-behavior: smooth;	
}


@font-face {
  font-family: 'Prisma';
  src: local('Prisma'), url('./fonts/Prisma.ttf') format('truetype');
}


body {
	/*background: url("./images/background-1.png");*/
	background-color: #1b1b1b;
	background-size: cover;
	font-family: Roboto;
	margin: 0;
	padding: 0;
}

#navigation-container {
	width: 600px;
	margin: 0 auto;
	height: 70px;
}

#nav-active {
	color: #fff;
	font-size: 20px;	
}


.navigation-bar {
	transition: 2s;
	background-color: black;
	height: 70px;
	width: 100%;
	text-align:center;
	
}

.navigation-bar img{
	transition: 1s;
	float:left;
	width: 70px;
	height: 70px;

}

.navigation-bar img:hover{
	transition: 1s;
	float:left;
	transform: scale(1.2);
	transform: rotate(20deg);
	
}

.navigation-bar ul {
	padding: 0px;
	margin: 0px;
	text-align: center;
	display:inline-block;
	vertical-align:top;
	
}

.navigation-bar li {
	list-style-type: none;
	padding: 0px;
	height: 24px;
	margin-top: 4px;
	margin-bottom: 4px;
	display: inline;
	
}

.navigation-bar li a {
	transition: 1s;
	color: #f9500d;
	font-size: 16px;
	text-decoration: none;
	line-height: 70px;
	padding: 5px 15px;
	
	
	
}

.navigation-bar:hover{
	transition: 1s;
	transform-origin: center;
	background-color: #222;

}

.navigation-bar li a:hover{
	transition: 0.1s;
	color: #fff;
	border: red;
	border-bottom: 4px solid #fff;

}

.name{

	transition: transform 1s;
	display: inline-block;
	color: #ff4500;
	font-family: Prisma ;
	margin-top: 100px;
	font-size: 300px;
	
}

.name a{
	color:#ff4500;
	transition: 1s;
	text-decoration: none;
	display: inline-block;

	
}

.name:hover{
	transition: transform 1s;
	color: #ff1200;
	-webkit-transform: scale(1.2);
	
}

.name:hover a{
    color: #ff1200;
}


.name a:active{
	transform: scale(1.2) rotate(360deg);
	text-shadow: 0 0 9px #ff1200;
	color: #ff4400;
}
	

.name_centerer {
	transition: 2s;
	text-align:center;
	
}

.info_section{
	word-wrap: break-word;
	border-radius: 50px;
	margin: auto;
	width: 70%;
	height: auto;
	padding: 10px;
	text-align: center;
	background: rgba(1, 1, 1, 0.8);

}

.info_section h1{
	transition: 1s;
	color: #fff;
	display: inline-block;
	border-bottom: 3px solid #fff;
	margin: auto;
	font-size: 50px;
	padding: 5px;
	color: white;
	text-align: left;

}
.info_section h1:hover{
	transition: 1s;
	font-size: 60px;
	

}

.info_section p{
	margin: auto;
	font-size: 20px;
	padding: 10px;
	color: #ff4500;
	text-align: left;
	

}