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

@font-face {
    font-family:Lobster;
    src: url(tipos/Lobster\,Open_Sans\,Roboto\,Texturina.zip);
}

@font-face {
    font-family:Roboto;
    src: url(tipos/Open_Sans\,Roboto\,Texturina.zip);
}




body 

{
    background-color: rgb(0, 0, 0);
 
}

header {
   
    display: flex;
    justify-content: space-between;
    


    background-color: rgb(0, 0, 0);
}

nav{
width: 100px;
    display: flex;
    justify-content: flex-end;
    align-items: center;


    background-color: rgb(0, 0, 0);
}



#burger{

display: block;
width: 50px;
display: none;

}




     h1 {
      
	font-family: Roboto;
	font-size: 54pt;
	color: #fff;
	font-weight: bold;
	display: block;
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	white-space: nowrap;
	margin: 0;
	

    
    }
    
   h2{

font-family: Roboto;
	font-size: 24pt;
	color: #fff;
	font-weight: bold;
	display: block;
	position: absolute;
	top: 90%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	white-space: nowrap;
	margin: 0;
	
    
   }


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

       }
nav a{
text-decoration: none;
color: #ffffff;
list-style: none;
display: inline-block;
margin: 23px;
font-size: 20px;
font-family: sans-serif;
font-weight: 600;
width: 100px;
}




	/* CORES DE FUNDO */

.bc-claro{
		background-color: hsl(0, 0%, 0%);
	}



      

  
 
	
	

.texto{
 padding: 0px;
font-family: "Roboto Serif", serif;
 margin-top: 16px;
 color: #ffffff;
 font-size: 19px;
 line-height: 24px;
 width: 500px;	  
justify-self: start      

}

#txtintro {
    width: 500px;
    flex-start
}


.resto{
    font-family: "Roboto Serif", serif;
    margin-top: 16px;
    color: #ffffff;
    font-size: 19px;
    line-height: 24px;
    width: 500px;
    justify-self: flex-end;
}
	

@media (max-width: 720px) {

    #burger {
        display: block;
    }

    nav {
        display: none;
    }


}