body
{
  background-color: var(--main-bg-color);
  color: #000000;
}

.jumbotron {
    border: solid 3px var(--theme-color);
    background-color: transparent;
    min-height: 75vh;
    max-width: 60vh;
    margin: 15px auto;
}
div.escalon{
    text-align: center;
    height: 25vh;
}
.banner{
    width:100%;
}
.nerd{
    max-width: 50%;
    height: auto;
}
.abajo{
    position: relative;
    bottom: -10vh;
}
#btnSignIn{
    animation-name: aparecerBoton;
    animation-duration: 2s;
    animation-delay: 2.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    visibility: hidden;
    animation-fill-mode: forwards;
}
@keyframes aparecerBoton {
    from  { transform: scale(0);visibility: visible; }
    80%  { transform: scale(0.7); }
    to { transform: scale(1);visibility: visible;}
}

img.logo{
    animation-name: aparecerBoton;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    visibility: hidden;
    animation-fill-mode: forwards;
}
@keyframes aparecerBoton {
    from  { transform: scale(0);visibility: visible; }
    70%  { transform: scale(0.7); }
    90%  { transform: scale(1.1); }
    to { transform: scale(1);visibility: visible;}
}