{% extends 'projekte/base.html' %}
 
{% load static %}

      {% block content %}
           

        <style>
            
    
            .button {
                display: inline-block;
                text-decoration: none;
                color: #fff;
                padding: 3px;
                border-radius: 6px;
                position: relative;
                overflow: hidden;
            }
            h1{
                text-align: center;
            }

            .button::before{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width:200%;
                height: 100%;
                background: linear-gradient(115deg, 
                #4fcf70, #fad648,
                #a767e5, #12bcfe,
                #44ce7b);
                background-size: 50% 100%;
                border-radius: inherit;
            }
            .button:hover::before {
                animation: animate_border .75s linear infinite;
            }
            .button span {
                display: inline-flexbox;
                background-color: #000;
                margin-left: 130px ;
                padding: 50px, 50px;
                border-radius: 3px;
                position: relative;
                z-index: 2;
            }
            .button{
  margin-top: auto;
}

            @keyframes animate_border {
                to { transform: translate(-50%);
                }
            }
            
            .card{
                width: 300px;
                height: 350px;
               
                background-color: #333;
                border-radius: 10px;
                outline: 1px solid
                rgb(255, 255, 255);
                outline-offset: -8px;
                box-shadow: 3px 3px 10px rgba(0, 0, 0, .1);
                position: relative;
                overflow: hidden;
            }

            .card-image{
                position:absolute;
                align-self: center;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                opacity: .6;
                transition: transform .75;
            }
            .card:hover .card-image{
                transform: scale(1.15)
            }

            .card-title{
                position:absolute;
                text-align: center;
                margin-bottom: 50px;
                left: 15px;
                bottom: 15px;
                font-size: 20px;
                text-shadow: 0 0 1px
                rgb(255, 255, 255);
            }

            .col-md-4{
                margin-left: 10px;
                margin-top: 10px;
            }

           </style>

              

        <div class="row">
        {% for project in projekte_alle %}
            <div class="col-md-4">
                <div class= "card mb-2">
                <div class="card">
                    <img src="{% static project.image %}" alt="Szene aus dem Stück" class= "card-image">
                    
                        <h3 class="card-title">{{ project.title }}</h5>
                        
                        <a href="{% url 'projekte:projekte_detail' project.pk %}"
                        class="button" >
                            <span>Details</span> 
                        </a>
                    </div>
                </div>
            </div>
        {% endfor %}
        </div>
   
        {% endblock%}
</html>