{% extends 'base.html.twig' %}

{% block style %}

    @media screen and (min-width: 1000px) {
        #textpresentation {
            padding-top:40px !important;
        }
    }

    @media screen and (max-width: 650px) {
        #textpresentation {
            padding-top:80px !important;
        }
    }

    #photoaccueil {
        position: relative;
        overflow: hidden;
    }

    #photoaccueil video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        object-fit: cover;
    }

    .container {
        color:white;
        margin-top: 20px;
        overflow: hidden;
    }

    #textpresentation {
        flex-grow:1;
        background: linear-gradient(to right, rgba(13, 13, 13,0.8), transparent);
        padding: 10px;
        padding-left:50px;
    }

{% endblock %}

{% block body %}
    <link href="https://fonts.googleapis.com/css2?family=Love+Ya+Like+A+Sister&display=swap" rel="stylesheet">
    <div style="display:flex;height: max-content;flex-grow: 1;">
        <div id="photoaccueil" style="flex-grow:1;display:flex">
            <video autoplay loop muted>
                <source src="{{ asset('img/FondPhoto.mp4') }}" type="video/mp4">
            </video>
            <div id="textpresentation" class="fade-in">
                <div class="container">
                    <h1 style="font-size:80px;margin-bottom:0px;">MLyshu</h1>
                    <h2 style="font-size:30px;margin-top:20px;">Développeur Web Junior</h2>
                </div>
                <p style="color:white;margin-bottom:150px;">Diplômé d'une licence professionnelle WIMSI</p>
                <a href="{{ path('aboutme') }}" style="background-color:#262626;color:white;padding:20px;border-radius:10px">Découvrez qui je suis</a>
                <p style="color:white;margin-top:50px;font-style:italic;">*Photo à propriété personnelle. © Tous droits réservés.</p>
            </div>
        </div>
    </div>
{% endblock %}