* {
    background-repeat: no-repeat;
}


body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg clip-path='url(%26quot%3b%23SvgjsClipPath1040%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%2332325d'%3e%3c/rect%3e%3ccircle r='31.525' cx='1412.43' cy='316.12' fill='url(%26quot%3b%23SvgjsLinearGradient1041%26quot%3b)'%3e%3c/circle%3e%3ccircle r='30.17' cx='1335.55' cy='251.29' fill='url(%26quot%3b%23SvgjsLinearGradient1042%26quot%3b)'%3e%3c/circle%3e%3ccircle r='41.765' cx='95.15' cy='74.75' fill='url(%26quot%3b%23SvgjsLinearGradient1043%26quot%3b)'%3e%3c/circle%3e%3ccircle r='49.685' cx='64.88' cy='257.95' fill='url(%26quot%3b%23SvgjsLinearGradient1044%26quot%3b)'%3e%3c/circle%3e%3ccircle r='53.125' cx='566.65' cy='158.79' fill='%2343468b'%3e%3c/circle%3e%3ccircle r='14.89' cx='33.93' cy='11.55' fill='url(%26quot%3b%23SvgjsLinearGradient1045%26quot%3b)'%3e%3c/circle%3e%3ccircle r='51.915' cx='1225.22' cy='224.14' fill='url(%26quot%3b%23SvgjsLinearGradient1046%26quot%3b)'%3e%3c/circle%3e%3ccircle r='17.83' cx='346.83' cy='98.73' fill='%2343468b'%3e%3c/circle%3e%3c/g%3e%3cdefs%3e%3cclipPath id='SvgjsClipPath1040'%3e%3crect width='1440' height='560' x='0' y='0'%3e%3c/rect%3e%3c/clipPath%3e%3clinearGradient x1='1349.38' y1='316.12' x2='1475.48' y2='316.12' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1041'%3e%3cstop stop-color='%23e298de' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23484687' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='1275.21' y1='251.29' x2='1395.89' y2='251.29' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1042'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='11.620000000000005' y1='74.75' x2='178.68' y2='74.75' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1043'%3e%3cstop stop-color='%23f29b7c' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%237e6286' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='-34.49000000000001' y1='257.95' x2='164.25' y2='257.95' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1044'%3e%3cstop stop-color='%23ab3c51' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%234f4484' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='4.149999999999999' y1='11.55' x2='63.71' y2='11.55' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1045'%3e%3cstop stop-color='%2384b6e0' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23464a8f' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3clinearGradient x1='1121.39' y1='224.14' x2='1329.0500000000002' y2='224.14' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1046'%3e%3cstop stop-color='%2332325d' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%23424488' offset='0.9'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 100vh;
}
.container {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
}

h1 {
    font-size: 24px;
    font-family: 'Open Sans', sans-serif;
}

input[type="text"] {
    background: linear-gradient(to right, #2b5876 0%, #4e4376 51%, #2b5876 100%);
    margin: 10px;
    padding: 15px 45px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    border-radius: 10px;
    border: none;
    border-image: linear-gradient(to right, #4e4376 0%, rgba(43, 88, 118, 0.5) 100%) 1;
    border-image-slice: 1;
}

input[type="text"]:focus {
    color: #fff;
    text-decoration: none;
    outline: none;
    transition: all ease-in-out .3s;
}


button {
    background: linear-gradient(to right, #2b5876 0%, #4e4376 51%, #2b5876 100%);
    margin: 10px;
    padding: 15px 20px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.8s;
    background-size: 200% auto;
    color: white;
    border-radius: 10px;
    box-shadow:0 0 5px #4e4376;
    border: none;
    display: flex;
    margin: 10px auto;
}

button:hover {
    background-position: right center;
    /* change the direction of the change here */
    color: #fff;
    box-shadow: inset 0 0 10px #4e4376, 0 0 5px rgba(43, 88, 118, 0.5) ;
    text-decoration: none;
}
 

p#message {
    margin-top: 20px;
    font-weight: bold;
}

p#tries {
    margin-top: 10px;
}

#footer p {
    position: absolute;
    top: 90%;
    opacity: 0.8;
}