@charset "UTF-8";

/* Typical Device Breakpoints 
-----------------------------
    Pequenas telas: até 600px
    Celular: 600px até 768px
    Tablet: 768px até 992px
    Desktop: 992px até 1200px
    Grandes telas: acima de 1200px
*/

/* Pequenas telas */
@media screen and (max-width: 600px) {
	h1.secao {
		scroll-margin-top: 173px;
	}

	header {
		padding-bottom: 8px;
		height: auto;
		flex-direction: column;
		justify-content: center;
	}

	header i {
		font-size: 35px;
		cursor: pointer;
		margin-bottom: 12px;
	}

	#switch:hover {
		outline: none;
	}

	header nav {
		padding-bottom: 1px;
		background-color: var(--default-background);
		width: 100%;
		margin: 0;
		margin-top: 12px;
		display: flex;
		flex-direction: column;
	}

	header nav a {
		display: block;
		border-bottom: 1px solid rgb(175, 175, 175);
		width: 90%;
		margin: auto;
	}

	.main {
		margin-top: 20vh;
		flex-direction: column;
		align-items: flex-start;
	}

	.main .descricao {
		min-width: 300px;
		font-size: 1.1em;
		line-height: 1.5em;
	}

	.main .container-img {
		margin: auto;
	}

	.main + .container-redes {
		margin-top: 320px;
	}

	.tecnologias {
		flex-direction: column;
		gap: 20px;
	}

	.tecnologias .comentario {
		width: 100%;
		margin: auto;
		margin-bottom: 15px;
		font-size: 1.1em;
	}

	.container-tecnologias {
		width: 100%;
	}

	.tecnologias .tecnologias-card i {
		font-size: 2em !important;
	}
}

@media screen and (max-width: 691px) {
  h1.secao {
    scroll-margin-top: 164px;
  }

	header {
		flex-direction: column;
		gap: 10px;
		height: auto;
	}
	img {
		width: 250px;
	}
	.main {
		margin-top: 164px;
		align-items: flex-start;
		height: 70vh;
	}

	.main .descricao {
		font-size: 1em;
	}
	.main .descricao h1 {
		font-size: 1.9em;
	}
	.tecnologias .comentario {
		width: 100%;
		margin: auto;
		margin-bottom: 15px;
		font-size: 1.1em;
	}
	.container-tecnologias {
		width: 100%;
	}

	.tecnologias .tecnologias-card i {
		font-size: 2em !important;
	}
}

/* CELULARES */
@media screen and (min-width: 691px) and (max-width: 780px) {
	header.container {
		align-items: center;
		justify-content: space-between;
		align-content: center;
		flex-wrap: wrap;
	}

	header h1 {
		font-size: 1.5em;
	}

	header nav {
		padding-top: 5px;
		font-size: 12px;
	}

	header nav a {
		font-size: 1.49em;
		margin: auto;
	}

	header #burguer {
		display: none;
	}

	img#perfil {
		width: 250px;
	}

	.main .descricao {
		margin: 0;
		padding: 19px;
		font-size: 1.1em;
		line-height: 1.5em;
	}
}

@media screen and (min-width: 601px) {
	#burguer {
		display: none;
	}
}

@media screen and (max-width: 500px) {
	.card-content-info-primary {
		width: 100%;
	}

	.card-content-info-secundary {
		width: 100%;
		order: -1;
	}

	.card-content {
		flex-direction: column;
	}
}