@charset "utf-8";
html {
  background-color: rgb(242, 240, 238); 
}

body{
  max-width:1000px;
  padding-top: 20px;
  margin: auto;
  font-family: Arial, Helvetica, sans-serif;
}

p {
  color: rgb(32, 30, 30);
  font-family: Arial, Helvetica, sans-serif;
  margin:40px;
  padding: 5px;
}

h1 {
    color: rgb(244, 102, 8);
    font-family:Arial, Helvetica, sans-serif;
    margin:40px;
    text-align: center;
    border: 2px solid rgb(244, 102, 8);
    border-radius: 20px;

}

h2 {
  color: rgb(244, 102, 8);
  font-family: Arial, Helvetica, sans-serif;
  margin:40px;
  text-align: left;
  border-bottom:1px solid rgb(244, 102, 8);
  padding: 2px;
}

 h3 {
  color: rgb(242, 240, 238);
  border-bottom:1px solid rgb(244, 102, 8);
 }


figcaption {
    color: rgb(255, 77, 23);
    font-family: Arial, Helvetica, sans-serif;
  }

ul {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  margin: 20px;
}

nav{
  background-color: rgb(242, 240, 238);
  padding: 20px;
  border: 2px solid  rgb(255, 89, 0);
  border-radius: 20px;
}

.boton:link,.boton:visited{
    color:rgb(255, 89, 0);
    text-decoration:none; color: rgb(255, 89, 0);
    padding:10px;
    margin:10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:small;
    border: 2px solid rgb(255, 89, 0) ;
    border-radius:20px ;
}

.boton:hover,.boton:active{
    color:rgb(253, 253, 255);
    border:2px solid rgb(255, 89, 0);
    border-radius:20px;
    padding:10px;
    margin:10px;
    background-color:rgb(255, 89, 0);
}

footer{
  color: rgb(242, 240, 238);
  font-family: Arial, Helvetica, sans-serif;
  font-size: xx-small;
  margin: 30px;
  background-color:rgb(1, 1, 1);
  text-align:center;
  border: 2px;
  border-radius: 20px;

}


.flex-container { 
  display: flex; 
  align-items:center; 
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(219, 91, 5);
  gap: 50px;
  flex-direction: row;
  padding: 20px;

} 

.flex-item { 
 flex:auto; 
 padding: 10px; 
 text-align: center;
 border-radius: 20px;
}