{# templates/bundles/TwigBundle/Exception/error404.html.twig #}

{% block wrapper %}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">

<style type="text/css" data-styleid="uploadedFonts">@font-face {
    font-family: wf_0139aab93773433595b368632;
    src: url("https://static.wixstatic.com/ufonts/1bc5ee_0139aab93773433595b3686326c88093/woff2/file.woff2") format("woff2"),
    url("https://static.wixstatic.com/ufonts/1bc5ee_0139aab93773433595b3686326c88093/woff/file.woff") format("woff"),
    url("https://static.wixstatic.com/ufonts/1bc5ee_0139aab93773433595b3686326c88093/ttf/file.ttf") format("ttf");
    }
    @font-face {
    font-family: wf_3a88947baaac4795ae43aec53;
    src: url("https://static.wixstatic.com/ufonts/1bc5ee_3a88947baaac4795ae43aec53a97eb2b/woff2/file.woff2") format("woff2"),
    url("https://static.wixstatic.com/ufonts/1bc5ee_3a88947baaac4795ae43aec53a97eb2b/woff/file.woff") format("woff"),
    url("https://static.wixstatic.com/ufonts/1bc5ee_3a88947baaac4795ae43aec53a97eb2b/ttf/file.ttf") format("ttf");
    }

    *{
        font-family: 'Poppins';
        font-weight: 500;
    }
    img{
        width: 300px;
    }
    .containererror500{
        width: 100%;
        /* height: 600px; */
        min-height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
    }
    .containertext{
        margin: 20px;
        display: flex;
        flex-flow: wrap;
    }
    h3{
        font-size: 16px;
        margin: 0;
        width: 100%;
    }
    b{
        font-weight: 700;
    }
    h1{
        font-size: 53px;
        margin: 0;
        width: 100%;
    }
    .green{
        color: #15EEBD;
    }
    .boton{
        padding: 15px 50px;
        font-size: 13px;
        color: #fff;
        background: linear-gradient(0deg, #0ee09b 0%, #20f2cb 50%);
        border-radius: 10px;
        cursor: pointer;
    }
    .containertext{
        width: 300px;
    }
    .mt10{
        margin-top: 10px;
    }
</style>
<div class="containererror500">
    <img src="/img/500/piola-500.png" alt="">
    <div class="containertext">
        <h3 class="green"><b>ERROR 500</b></h3>
        <h1 class="mt10"><b>Oops!</b></h1>
        <h3 class="mt10">Ha ocurrido un error, intentaremos solucionarlo lo antes posible</h3>
        <div class="mt10 boton" onclick="location.href = '/';">
            Volver al inicio
        </div>
    </div>
</div>
{% endblock %}