@charset "utf-8";

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Catamaran", sans-serif;
  margin: 0;
  color: #21334a;
  background-color: #fff8e7;
}
header,
footer {
  background-color: #21334a;
  color: #fff8e7;
}

header {
  margin-bottom: 2em;
  box-shadow: 0 /* desplazamiento horizontal */ 16px
    /* desplazamiento vertical */ 8px /* desenfoque */ hsla(279, 45%, 26%, 0.2); /* color */
}
main {
  margin: 0 1em;
}
h1 {
  font-family: 'Sanchez', serif;
  text-align: center;
  margin-bottom: 1.5em;
}
h2,
h3,
h4 {
  color: #5c4236;
  font-weight: 800;
}
img {
  max-width: 100%;
}
a {
  text-decoration: none;
}
ul,
ol {
  list-style: none;
  padding: 0;
}
#menu {
  display: block;
  max-width: 66.6%;
  margin-inline: auto;
  padding: 1em;
}
#logo img {
    margin-block-end: 0.5em;
    width: 16rem;
    margin: 1em auto;
    background-color: #fff8e7;

}
nav {
  margin: auto;
}

header nav ul {
  margin-block: 0;
}
header nav a {
  color: #fff8e7;
  background-color: #5c4236;
  display: block;
  width: 8em;
  padding: 1em;
  border-radius: 0.25em;
  text-align: center;
  margin: 0.3em auto;
  transition: background-color 0.5s;
}
header nav a:hover,
header nav a:focus-visible {
  background-color: #fff8e7;
  color: #5c4236;
  outline: none;
}

nav #menu li {
  margin: 0 0 0.3em 0;
}
#retrato {
  display: block;
  max-width: 66.6%;
  margin-inline: auto;
  box-sizing: border-box;
  border-radius: 50%;
  box-shadow: 0 /* desplazamiento horizontal */ 16px
    /* desplazamiento vertical */ 8px /* desenfoque */ hsla(279, 45%, 26%, 0.2); /* color */
  transition: 0.5;
  }
#retrato:hover {
  transform: rotate(15deg);
}
article {
  padding: 0 1em 0 1em;
}
section {
  margin-bottom: 2em;
}
footer {
  padding-top: 2em;
}
footer .disclaimer {
  font-weight: 200;
  font-size: 0.7em;
  margin: 3em;
}
.logosuba {
  margin-inline: auto;
  box-sizing: border-box;
  max-width: 30%;
  background-color: white;
  padding: 2em;
}
@media screen and (min-width:900px) {
  #menu {
    display: flex;
  }
  #retrato{
    padding-top:.5em;
    max-width: 40%;
  }
  h1 {
    font-size: 4.5em;
    margin-top: .5em;
    margin-bottom: .5em;
  }
  nav {
    margin-right: 0;
  }
  article {
    width: 90%;
    margin: 0 auto;
  }
  section ul {
    display: flex;
    justify-content: space-between;
  }
  section {
    font-size: 1.2em;
  }
}
@media screen and (min-width:1300px) {
  #retrato {
    width: 20%;
  }
  article {
    width: 80%;
    margin: 0 auto;
  }
  footer .disclaimer {
    width: 75%;
    margin: 0 auto;
    padding: 4em 0;
  }
  .disclaimer p {
    font-size: 1em;
  }
}