@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@300&display=swap');

body {
    font-family: 'Akshar', sans-serif;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: #ee5522;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='100' y1='33' x2='100' y2='-3'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='100' y1='135' x2='100' y2='97'%3E%3Cstop offset='0' stop-color='%23000' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23000' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23d23d09' fill-opacity='0.32'%3E%3Crect x='100' width='100' height='100'/%3E%3Crect y='100' width='100' height='100'/%3E%3C/g%3E%3Cg fill-opacity='0.32'%3E%3Cpolygon fill='url(%23a)' points='100 30 0 0 200 0'/%3E%3Cpolygon fill='url(%23b)' points='100 100 0 130 0 100 200 100 200 130'/%3E%3C/g%3E%3C/svg%3E");
}

.container {
    margin-top: 2em;
    height: 35em;
    width: 25em;
    background-color: #ee3b1b;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 2em;
    box-shadow: 0px 17px 15px 0px rgba(0, 0, 0, 0.57);
}

.container h1 {
    margin-bottom: 1em;
    color: #ffffff;
    text-shadow: 1px 1px 2px black;
}

#boton {
    box-shadow: inset 0px -2px 8px 0px #cf866c;
    background: linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
    background-color: #d0451b;
    border-radius: 11px;
    border: 1px solid #942911;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    padding: 14px 24px;
    text-decoration: none;
    text-shadow: 0px 3px 2px #854629;
}

#boton:hover {
    background: linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
    background-color: #bc3315;
}

#boton:active {
    position: relative;
    top: 1px;
}

.textContainer {
    font-size: 1.5em;
    margin-top: 1em;
    color: #fca88d;
    text-shadow: 1px 1px 2px black;
}

.textContainer img {
    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    border-radius: 0.4em;
    width: 12em;
    height: 11em;
    object-fit: cover;
}

#error {
    font-size: larger;
    color: #ffffff;
    text-shadow: rgb(99, 11, 11) 1px 0 10px;

}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, #c94f3a 5%, #d0451b 100%);

    height: 6em;
    width: 100vw;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

footer a {
    color: #fca88d;
    text-decoration: none;
    text-shadow: rgb(99, 11, 11) 1px 0 10px;
}

@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}