:root {
	--themeColor : #242424;
	--wordColor : white;
}

@font-face {
  font-family: Yanone;
  src: url(/font/yanone.otf);
}

* {
 font-family: Yanone , Sans-Serif;
}

html, body {
	margin:0px;
	padding:0;
}

ul{
	font-size:19px;
	list-style-type: square;
	padding-inline-start: 22px;
}

.title{
	margin-top: 50px;
	margin-bottom:40px;
	font-weight:bold;
	text-align:center;
}

.par{
	margin-top:20px;
	font-size:19px;
}

.container{
	overflow:hidden;
}

#slideMenu{
	width:80%;
	max-width:800px;
	height:120%;
	background-color: var(--themeColor);
	position:fixed;
	top:0;
	left:-800px;
	z-index:10;
	text-align:center;
	color:--wordColor;
	opacity:none;
	
	transition-duration: .5s;
}
#slideBackground{
	opacity:0;
	top:0;
	z-index:9;
	width:100%;
	height:120%;
	position:fixed;
	background-color:black;
	display:none;
	
	transition-duration: .5s;
}

.navBar{
	background-color:var(--themeColor);
	font-weight:bold;
	margin-bottom:0px;
}

.mobilePad{
	margin:10px 0;
	font-size:23px;
	color:var(--wordColor);
	display:flex;
}

.newLink{
	color:var(--wordColor);
	text-decoration: none;
	cursor:pointer;
}
.newLink:hover, .newLink:active {
	color: var(--wordColor);
	text-decoration: none;
}

.navButton{
	padding:20px 0;
	width:100%;
	color:var(--wordColor);
	font-size:20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	transition-duration: .2s;
}
.current , .navButton:hover, .navButton:active {
	background-color: #464646;
	color: var(--wordColor);
	text-decoration: none;
}

.button-size{
	width:18.75%;
}

.nav-image{
	width: 27px;
	cursor:pointer;
}

footer{
	background-color:var(--themeColor);
	font-weight:normal;
	margin-bottom:0px;
	margin-top:20px;
	color: var(--wordColor);
}

.footer-link{
	color: var(--wordColor);
	text-decoration: none;
}

.footer-link:hover{
	color: var(--wordColor);
	text-decoration: none;
	opacity: 0.8;
}

.card-header{
	background-color:var(--themeColor) !important;
	color:var(--wordColor);
}

.projectCard{
	border:1px solid #cdcecf;
	width:100%;
	max-width:660px;
	box-shadow: 5px 5px 2px #d6d8db;
	margin-bottom:30px;
}

.flex-center{
display:flex;
justify-content:center;
}


.p-slide{
	padding:10px;
	margin-bottom:15px;
	font-size:20px;
}

.fade-in {
animation: fade-in ease 1.5s;
-webkit-animation: fade-in ease 1.5s;
-moz-animation: fade-in ease 1.5s;
-o-animation: fade-in ease 1.5s;
-ms-animation: fade-in ease 1.5s;

}
@keyframes fade-in {
0% {opacity:0;}
100% {opacity:1;}
}

.fade-in-out {
animation: fade-in-out ease 5s;
-webkit-animation: fade-in-out ease 5s;
-moz-animation: fade-in-out ease 5s;
-o-animation: fade-in-out ease 5s;
-ms-animation: fade-in-out ease 5s;

}
@keyframes fade-in-out {
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}
}




#ball{
	background-color:purple;
	width:3%;
	height:2.54%;
	border-radius:50%;
	
	animation: change-color 1s infinite;
}


@keyframes change-color {
	
	25% {
		background-color: #f05037;
	}
	
	50% {
		background-color: #fdc151;
	}
	
	75% {
		background-color: #6dc186;
	}
	
	100% {
		background-color: #92bfd2;
	}
	
}

.ball-animation{
	animation: curve 3s linear infinite;
}

@keyframes curve {
	
	15% {
		transform: translate(17%,-6%);
	}
	
	30% {
		transform: translate(24%,-6.8%);
	}
	
	35% {
		transform: translate(29%,-6%);
	}
	
	40% {
		transform: translate(40%,0%);
	}
	
	45% {
		transform: translate(49%,2.2%);
	}
	
	50% {
		transform: translate(55%,2%);
	}
	
	63% {
		transform: translate(62%,-1%);
	}
	
	76% {
		transform: translate(72%,-7%);
	}
	
	85% {
		transform: translate(79%,-7.7%);
	}
	
	92% {
		transform: translate(83%,-7%);
	}
  
	100% {
		transform: translate(98%,2%);
	}
  
}