* { 
  margin     : 0; padding: 0;
  box-sizing : border-box;
}
:focus { outline: 0 none transparent; }
body {
  min-height       : 85vh;
  display          : flex;
  flex-direction   : column;
  align-items      : center;
  justify-content  : center;
  background-color : #678;
}
.contenedor,.fondo {
  max-width   : 500px;
  width       : 100%;
  height      : auto;
  margin      : auto;
  line-height : 0;
  opacity     : 0;
  transition  : all 0.3s ease-in;
}
.fondo {
  opacity          : 1;
  position         : relative;
  border           : 6px solid #fff;
  background-color : rgba(0, 0, 0, 1);
  box-shadow       : 0 0 50px 0 rgba(0, 0, 0, 0.5);
}
img {
  max-width : 100%;
  height    : auto;
}
.fondo:before{
  content     : attr(data-nun);
  position    : absolute;
  bottom      : -75px;
  right       : 10px;
  text-shadow : 3px 3px 6px #333;
  font        : 4em/1 sans-serif;
  color       : #fff;
}
button {
  border     : 1px solid #fff;
  min-width  : 10vw;
  padding    : 1vw 2vw;
  margin     : 10px;
  cursor     : pointer;
  transition : all 0.15s ease-in;
  box-shadow : 2px 2px 0 0 rgba(0, 0, 0, 0.4);
}
button:hover {
  box-shadow: 0 0 4px 4px #0f0;
}
button:active {
  background-color : rgba(255,0,0,0.8);
  color            : #fff;
}