* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Google Sans Code", monospace;
}

::selection {
	background: black;
	color: white;
}

::-webkit-scrollbar {
   background-color: transparent;
   border-radius: 10px;
   width: 7px;
}

::-webkit-scrollbar-thumb {
   background-color: black;
   border-radius: 80px;
}

body {
	background: #f9f9f9;
	color: black;
}

.navbar {
	display: flex;
	justify-content: space-between;
	align-content: center;
	padding: 10px;
	position: sticky;
	top: 0;
	animation: navbar 1s linear both;
	animation-timeline: scroll(root block);
	animation-range: 0 200px;
	z-index: 99999;
}

@keyframes navbar {
	to {
		backdrop-filter: blur(22px);
		box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	}
}

.logo {
	display: flex;
	justify-content: space-around;
	align-items: center;
	gap: 10px;
}

.icons {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.point, .dev {
	color: darkorange;
}

main {
	border-left: 2px solid #ddd;
	padding: 25px;
	margin: 15px auto;
	width: 60%;
}

.name {
	color: darkorange;
}

.home {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.saludo {
	padding: 10px;
	width: 60%;
}

.img {
	padding: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40%;
}

.profile {
	border-radius: 50%;
}

p {
	font-family: sans-serif;
	color: rgba(0, 0, 0, .75);
	font-weight: 300;
}

.projects {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(
		auto-fill,
		minmax(200px, 1fr)
	);
	gap: 22px;
	padding: 27px;
}

.box {
	position: relative;
	width: 100%;
	box-shadow: 0 0 10px rgba(0, 0, 0, .2);
	padding: 22px;
	border-radius: 20px;
	cursor: default;
	transition: all 0.1s ease;
	&:hover {
		box-shadow: 0 0 10px rgba(0, 0, 0, .4);
	}
	&:active {
		transform: scale(0.9);
		box-shadow: 0 0 10px rgba(0, 0, 0, .1);
	}
}

.box:hover button {
	opacity: 1;
}

button {
	opacity: 0;
	overflow: hidden;
	position: absolute;
	top: -5px;
	right: -5px;
	text-align: center;
	padding: 2px;
	background: darkorange;
	color: white;
	border-radius: 10px;
	border: 0;
	box-shadow: inset 0 0 7px rgba(0, 0, 0, .4);
	font-size: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	z-index: 991;
	transition: all 0.4s ease;
	&:hover {
		transform: scale(1.05);
	}
	&:hover::after {
		content: 'Ver';
	}
}

span:not(.dev, .point) {
	font-size: 31px;
}

.lenguajes {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(
		auto-fill,
		minmax(200px, 1fr)
	);
	padding: 25px;
	gap: 22px;
}

.len {
	padding: 7px;
	border-radius: 7px;
	border: 0.4px solid #ccc;
	text-align: center;
	color: black;
	box-shadow: inset 0 0 7px rgba(0, 0, 0, .4);
	transition: all 0.2s ease;
}

.title {
	animation: scale-up 1s linear infinite;
}

@keyframes scale-up {
	from {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	to {
		transform: scale(1);
	}
}
.len:hover {color: white}
.len:nth-child(1):hover{background: red;}
.len:nth-child(2):hover{background: #09f;}
.len:nth-child(3):hover{background: gold;}
.len:nth-child(4):hover{background: orangered;}
.len:nth-child(5):hover{background: #07F;}
.len:nth-child(6):hover{background: darkgreen;}
.len:nth-child(7):hover{background: #000;}
.len:nth-child(8):hover{background: #09F;}
.len:nth-child(9):hover{background: #08f;}
.len:nth-child(10):hover{background: limegreen;}
.len:nth-child(11):hover{background: #000;}
.len:nth-child(12):hover{background: darkorange;}
.len:nth-child(13):hover{background: gray;}
.len:nth-child(14):hover{background: #092d4a;}
.len:nth-child(15):hover{background: #04F;}
.len:nth-child(16):hover{background: #555;}
.len:nth-child(17):hover{background: darkred;}





@media screen and (max-width: 600px) {
	.home {
		flex-direction: column-reverse;
	}
	.img {
		width: 100%;
	}
	* {
		scrollbar-width: none;
	}
	main {
		width: 95%;
	}
}