* {
    padding: 0;
    border: 0;
    margin: 0;
    box-sizing: border-box;
}

@font-face {
	font-family: Lobster;
	src: url(Tipos/Lobster/Lobster-Regular.ttf);
}

@font-face {
	font-family: Roboto;
	src: url(Tipos/Roboto/RobotoSlab-VariableFont_wght.ttf);
}

title{
	font-family: sans-serif;
	font-size: 24pt;
	color: black;
}



body {
	background-color: #82b6c9;
	font-family: sans-serif;
	font-size: 12pt;
	color: saddlebrown;
}

div {
	padding: 20px;
	box-sizing: border-box;
    background-color: #82b6c9;
  
}


#justin{
width:100%;
height: auto;
display: block;

}

#logo{
width: 140px;
height: 80px;


}

#inicio{

    display: flex;
    justify-content: space-between;
}

#biografia{
	padding: 20px;
	
}

#biografia h1{
	margin-bottom: 15px;
	color: #121010;
}

#biografia p{
	width: 50%;
	margin-top: 15px;
	color:  #121010;
}

#contbio {
	padding: 0;
	
	
}

#contbio p{
	width: 50%;
	justify-self: flex-end;
}


nav{
	padding: 15px;
}

nav ul{
	color: #121010;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	gap: 20px;
}

h1{
	font-family: Lobster;
}

p{
	font-family: Roboto;
}

#burguer {
	display: none;
	justify-self: flex-end;

}

@media only screen and (max-width: 600px){
	#burguer{
		width: 60px;
		display: block;
		justify-self: flex-end;
		
		
	}

	nav {
		display: none;

	}
	
	#menumobile{
	transition: top .5s;
	position: fixed;
	z-index: 100;
	width: 100%;
	height: 100vh;
	top: 0%;
	left: 0;
	background-color: yellow;}
	
	#menumobile a{
	display: block;
	width: 100%;
	text-align: center;
	font-size: 24px;
	padding-top: 20px;
	padding-bottom: 20px;
	text-decoration: none;
	color: rgb(0, 0, 0);}
	}