html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #1e272e;
  background-color: #f5f6fa;
  box-sizing: border-box;
}

.container {
  height: 100%;
  min-height: 100vh;
  min-width: 400px;
  max-width: 1024px;
  margin: 0 auto;
  padding: 2em 2.5em 3em 2.5em;
  background-color: #ffffff;
  -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.25);
  box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.25);
}
h1 {
  margin-top: 2em;
  font-size: 180%;
  font-family: 'Lexend Deca', sans-serif;
  border-bottom: 4px solid #0fbcf9;
  color: #273c75;
  background-color: #ecf0f1;
  padding-left: 0.5em;
}
h1:first-of-type {
  margin-top: 0;
}

h1 img {
  height: 2.5em;
  vertical-align: middle;
  padding-right: 0.2em;
}

.interactivo {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 65%;
}
iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

a {
  color: #44bd32;
}
a:visited {
  color: #4cd137;
}

ul li {
  padding-bottom: 1em;
}

code {
  font-size: 110%;
  font-family: 'Inconsolata', monospace;
  color: #16a085;
}

.actividad img {
  display: block;
  width: 95%;
  margin: 0 auto;
}