/* Reset básico */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	html {
		scroll-behavior: smooth;
	}

	body {
		font-family: 'IBM Plex Mono', monospace;
		color: #333;
		background-color: #f9f9f9;
	}

	main {
		display: fit-content;
		flex-direction: column;
		position: relative;
		padding-bottom: 100px;
		align-items: center;
	}

	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: fit-content;
		text-align: center;
		/* margin-top: 30px; */
	}

	.buttonContainer {
		flex-direction: column;
		text-align: center;
		align-items: center;
		justify-content: center;
	}

	.typewriter-box {
		width: 450px;
		height: 150px;
		padding: 15px;
		/* background-color: rgba(24, 24, 24, 0.352); */
	}

	.typewriter {
		overflow: hidden;
		text-align: justify;
		font-family: 'IBM Plex Mono', monospace;
		color: #ffffff;
		font-size: 18px;
	}

	.typewriter.animated {
		white-space: normal;
		text-align: justify;
	}

	@keyframes typing {
		from {
			width: 0
		}

		to {
			width: 100%
		}
	}


	.container2 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: Top;
		height: 100vh;
		text-align: center;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.foreground {
		position: static;
		top: 50%;
		left: 50%;
		z-index: 1;
		background: rgba(0, 0, 0, 0);
		padding: 50px;
		border-radius: 12px;
		text-align: center;
		color: rgb(66, 66, 66);
	}

	.background-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		filter: blur(10px) brightness(60%);
	}

	.profile-image {
		opacity: 0;
		width: 300px;
		height: 200px;
		margin: 30px;
		/* object-position: 50px; */
		object-fit:cover;
		zoom: 2.0;
		border-radius: 5px;
		filter: brightness(100%);
		animation: fadeIn 1s ease-in-out forwards;
	}

	.hero-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.hero h1 {
		font-size: 3rem;
		
		margin-bottom: 10px;
	}

	.hero p {
		font-size: 1.2rem;
		margin-bottom: 20px;

	}

	.btn {
		padding: 10px 20px;
		font-family: "apercu", -apple-system, system, sans-serif;
		font-weight: 600;
		color:  #ff6600;
		text-decoration: none;
		font-size: 30px;
		margin-top: 20px;
		opacity: 0;
		transition: 0.3s linear;
		animation: fadeIn 1s ease-in-out forwards;
	}
	
	.btn:hover {
		text-shadow: #222;
		color: #3d1500;
		transition: 0.3s ease;
	}


	.title {
		/* font-family: 'IBM Plex Mono', monospace; */
		font-family: "apercu", -apple-system, system, sans-serif;
		color: #ffffff;
		font-weight: bold;
	}


	@keyframes fadeIn {
		to {
			opacity: 1;
		}
	}

	/* Section */
	.section p {
		text-align: center;
		color: #ffffff;
		background-color: #222;
		border-radius: 5px;

	}

	.section h2 {
		font-size: 2rem;
		margin-bottom: 5px;
	}

	.socialMediasIcons {
		/* background-color: #ffffff; */
		width: fit-content;
		height: auto;
		padding: 10px 15px;
		display: flex;
		align-items: center;
		border-radius: 10px;
		gap: 20px;
	}

	/* .socialMediasIcons:hover {
		background-color: #d8d8d8;
		transition: 0.1s linear;
	} */

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

	.social-link {
		display: flex;
		align-items: center;
		text-decoration: none;
		color: #e65c00;
		transition: 200ms linear;
		font-family: 'IBM Plex Mono', monospace;
	}

	.social-link:hover {
		display: flex;
		align-items: center;
		text-decoration: none;
		color: #000000;
		font-family: 'IBM Plex Mono', monospace;
	}

	.social-text {
		font-size: 16px;
		color: #0077b5;
	}

	.aboutSection {
		font-size: 12dp;
		font-family: "apercu", -apple-system, system, sans-serif;
		font-weight: 400;
		justify-content: center;
		text-align: justify;
		color: #ffffff;
		line-height: 22px;
		width: 450px;
		height: fit-content;
		/* padding: 40px; */
		border-radius: 50px;
	}

	.aboutContainer{
		display: flex;
		height: 0px;
		overflow: hidden;
		transition: height 0.5s ease-in-out;
		background-color: #e65c0019;
		flex-direction: row;
		stroke-width: 100px;
		stroke-opacity: 100%;
		stroke: #000000; 
		stroke-width: 10%;
		stroke-linecap: round;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin-top: 30px;
		margin-bottom: 30px;
		backdrop-filter: blur(70px);
  		-webkit-backdrop-filter: blur(100px);
	}

	.aboutContainer.open {
		height: 500px;
		background-color: #24242494;
		justify-content: center;
		text-align: center;
		transition: height 0.5s ease-in-out;
		opacity: 1;
	}	

	.bgCanvas{
		position: fixed;
		top: 0;
		left: 0;
		width: auto ;
		height: auto;
		z-index: -2;
	}

	.bgCanvasBlur{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 100%;
		width: 700px;
		z-index: -1;
		background-color: rgba(16, 16, 16, 0.802);
		backdrop-filter: blur(100px);
  		-webkit-backdrop-filter: blur(20px);
	}

	.portfolioContainer{
		display: flex;
		align-self: center;
		justify-content: center;
	}

	.portfolio-image {
		opacity: 1;
		width: fit-content;
		height: fit-content;
		min-width: 150px;
		max-height: 200px;
		max-width: 200px;
		margin: 30px;
		object-fit: cover;
		border-radius: 20px;
		transition: 0.3s ease;
		filter: brightness(80%);
	}

	.portfolio-image:hover {
		transition: 0.3s ease;
		filter: brightness(100%);
		transform: scale(1.2);
		cursor: pointer;
		box-shadow: #00000031 0px 0px 20px;
	}

	.tag{
		display: inline-block;
		width: auto;
		height: auto;
		text-align: center;
		font-family: 'IBM Plex Mono', monospace;
		font-size: 20px;
		padding-left: 10px;
		padding-right: 10px;
		background-color: #ffffff;
		border-radius: 5px;
		margin-bottom:50px;
	}

	.languagesContainer{
		display: flex;
		align-items: center;
		background-color: rgb(255, 255, 255);
		gap: 20px;
	}


	.defaultTitle {
		margin-top: 10px;
	}

	.defaultText {
		margin-top: 10px;
		margin-bottom: 30px;
	}

	footer {
		background-color: #222;
		color: white;
		font-family: 'IBM Plex Mono', monospace;
		font-size: 16px;
		position: fixed;
		bottom: 0;
		text-align: center;
		padding-top: 5px;
		padding-bottom: 5px;
		width: 100%;
		margin-top: auto;
	}