@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

* {
	font-family: 'Kalam', cursive;
}

html {
    scroll-behavior: smooth;
}

body {
	
	
	margin: 0;
	padding: 0x;
	background: #8e9eab;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #eef2f3, #8e9eab);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #eef2f3, #8e9eab); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */	
}

header {
	top: 0;
	left: 0;
	background: #000;
	width: 100%;
	height: auto;
	background: #8e9eab;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to left, #eef2f3, #8e9eab);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to left, #eef2f3, #8e9eab); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */



}

a {
	text-decoration: none;
	color: #000;
	margin: 10px;
	


	
}

ul {
	
	padding: .5em;
	list-style: none;	
}

h1 {
	text-align: center;
	font-size: 35px;
	margin-bottom: -10px;
}

h2 {
	font-size: 20px;
	text-align: center;
}


img {
	max-width: 100%;	
}



.menu {
	background: rgb(0, 0, 0, .1);
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}


		.titulo {
			font-size: 30px;
		}

		.nav ul {

		display: flex;
		flex-direction: row;
		justify-content: center;	
		}

		.nav ul li a:hover {
			color: #fff;
			
		}

main {	
	width: 100%;
	height: auto;
}
	

	.sobreMiContenedor {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: space-around;
		padding: 10px;	
	}



		.foto img{
			width: 300px;
			border-radius: 20px;
			box-shadow: 0px 0px 30px black;
			
		}

		.textoSobreMi {
			width: 450px;
			margin-left: 20px;
		}

	.demosContenedor{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;

	}

	.demos {
		margin-top: -25px;
	}
		.demoItem {
			width: 400px;
			height: auto;
			padding: 10px;
			

			
		}

			.demoImg img{
				width: 400px;
				height: 250px;
				border-radius: 20px;
				box-shadow: 0px 0px 20px black;
				margin-bottom: 20px;
				

			}

			.demoBotones {
				display: flex;
				flex-flow: rox	nowrap;
				justify-content: space-around;
			}

				 button {
					cursor: pointer;
					border: none;
					border-radius: 5px;
					font-size: 15px;
					height: 44px;
					padding: 12px;
					background-color: #b6bdc9;
					box-shadow: 0px 0px 10px black;
					transition: 500ms;
					margin-bottom: 20px;
				}

				button:hover {
					transform: scale(1.1);

				}

				a:hover {
					color: #fff;
				}

				
	.conocimientosContenedor {
		font-size: 20px;
		margin-top: 30px;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		gap: 30px;
		
	}

	


		.conocimientosContenedor div img {
			width: 80px;
			height: auto;
			
		}
			.nombreIcono {
				text-align: center;
				margin-top: -5px;

			}

			.textoSpinner {
				font-size: 13px;
				text-align: center;
				margin: -15px 0;
				
			}

			

	.contactoContenedor {
		margin: 30px 0 40px 0;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		display: flex;
		align-items: center;
		font-size: 20px;
		
	}

	.contactoContenedor div a img {
		transition: 500ms;
	}

	.contactoContenedor div a img:hover {
		transform: scale(1.2);
	}
		

		.linkedin img {
			width: 56px;
			border-radius: 10px;
		}

		.twitter img {
			width: 60px;
			border-radius: 15px;
		}

		.email img {
			width: 57px;
			
		}





	footer {
		width: 100%;
		height: auto;
		background: #000;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		
	}

		

	@media all and (max-width: 840px) {
		
		header {
			top: 0;
			left: 0;
		}
		.nav {
			margin-top: -40px;
		}

		.menu {
			height: auto;
			flex-flow: column nowrap;
			align-items: center;	
		}
		.sobreMiContenedor {
			margin-top: 20px;
		}

		.demos {
			margin-top: -30px;
		}

		
		
	}

	@media (max-width: 560px) {

		header {
			position: initial;
		}
		
		.nav ul {
			flex-flow: column nowrap;
			align-items: center;
		}

		.nav {
			margin-top: -30px;
		}

		.nav ul li{
			margin: 5px;
		}

		main {
			padding-top: 0;
		}

		
	}


	/* Spinner */
	.sk-circle {
		margin: 20px auto;
		width: 40px;
		height: 40px;
		position: relative;
	  }
	  .sk-circle .sk-child {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	  }
	  .sk-circle .sk-child:before {
		content: '';
		display: block;
		margin: 0 auto;
		width: 15%;
		height: 15%;
		background-color: #333;
		border-radius: 100%;
		-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
				animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
	  }
	  .sk-circle .sk-circle2 {
		-webkit-transform: rotate(30deg);
			-ms-transform: rotate(30deg);
				transform: rotate(30deg); }
	  .sk-circle .sk-circle3 {
		-webkit-transform: rotate(60deg);
			-ms-transform: rotate(60deg);
				transform: rotate(60deg); }
	  .sk-circle .sk-circle4 {
		-webkit-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
				transform: rotate(90deg); }
	  .sk-circle .sk-circle5 {
		-webkit-transform: rotate(120deg);
			-ms-transform: rotate(120deg);
				transform: rotate(120deg); }
	  .sk-circle .sk-circle6 {
		-webkit-transform: rotate(150deg);
			-ms-transform: rotate(150deg);
				transform: rotate(150deg); }
	  .sk-circle .sk-circle7 {
		-webkit-transform: rotate(180deg);
			-ms-transform: rotate(180deg);
				transform: rotate(180deg); }
	  .sk-circle .sk-circle8 {
		-webkit-transform: rotate(210deg);
			-ms-transform: rotate(210deg);
				transform: rotate(210deg); }
	  .sk-circle .sk-circle9 {
		-webkit-transform: rotate(240deg);
			-ms-transform: rotate(240deg);
				transform: rotate(240deg); }
	  .sk-circle .sk-circle10 {
		-webkit-transform: rotate(270deg);
			-ms-transform: rotate(270deg);
				transform: rotate(270deg); }
	  .sk-circle .sk-circle11 {
		-webkit-transform: rotate(300deg);
			-ms-transform: rotate(300deg);
				transform: rotate(300deg); }
	  .sk-circle .sk-circle12 {
		-webkit-transform: rotate(330deg);
			-ms-transform: rotate(330deg);
				transform: rotate(330deg); }
	  .sk-circle .sk-circle2:before {
		-webkit-animation-delay: -1.1s;
				animation-delay: -1.1s; }
	  .sk-circle .sk-circle3:before {
		-webkit-animation-delay: -1s;
				animation-delay: -1s; }
	  .sk-circle .sk-circle4:before {
		-webkit-animation-delay: -0.9s;
				animation-delay: -0.9s; }
	  .sk-circle .sk-circle5:before {
		-webkit-animation-delay: -0.8s;
				animation-delay: -0.8s; }
	  .sk-circle .sk-circle6:before {
		-webkit-animation-delay: -0.7s;
				animation-delay: -0.7s; }
	  .sk-circle .sk-circle7:before {
		-webkit-animation-delay: -0.6s;
				animation-delay: -0.6s; }
	  .sk-circle .sk-circle8:before {
		-webkit-animation-delay: -0.5s;
				animation-delay: -0.5s; }
	  .sk-circle .sk-circle9:before {
		-webkit-animation-delay: -0.4s;
				animation-delay: -0.4s; }
	  .sk-circle .sk-circle10:before {
		-webkit-animation-delay: -0.3s;
				animation-delay: -0.3s; }
	  .sk-circle .sk-circle11:before {
		-webkit-animation-delay: -0.2s;
				animation-delay: -0.2s; }
	  .sk-circle .sk-circle12:before {
		-webkit-animation-delay: -0.1s;
				animation-delay: -0.1s; }
	  
	  @-webkit-keyframes sk-circleBounceDelay {
		0%, 80%, 100% {
		  -webkit-transform: scale(0);
				  transform: scale(0);
		} 40% {
		  -webkit-transform: scale(1);
				  transform: scale(1);
		}
	  }
	  
	  @keyframes sk-circleBounceDelay {
		0%, 80%, 100% {
		  -webkit-transform: scale(0);
				  transform: scale(0);
		} 40% {
		  -webkit-transform: scale(1);
				  transform: scale(1);
		}
	  }