<style>
    .welcome{
      height: 100vh;
      width: 100%;
      display: flex;
      flex-direction: row;
    }
  
    .welcome__image{
      height: 100%;
      width: 65%;
      background-image: url("../2.jpg");
      background-size: cover;
      background-repeat: no-repeat;
    }
  
    .welcome__image--blur{
      width: 100%;
      height: 100%;
      background-color: rgba(50, 101, 212, 0.603);
    }
  
    .welcome__login{
      width: 35%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  
    button, a, .list-group{
      width: 300px;
    }

    .list-group-item{
        overflow: scroll;
    }

    @media (max-width: 1024px) {
    .welcome__image{
    width: 50%;
    background-position:right;
  }
  .welcome__login{
    width: 50%;
    
    }
  }

  @media (max-width: 650px) {
    .welcome__image{
    width: 0%;
    background-image: none;
  }
  .welcome__login{
    width: 100%;
    }
  }
  </style>

<div class="welcome">
    <div class="welcome__image">
      <div class="welcome__image--blur"></div>
    </div>
    <div class="welcome__login">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                Your hash is correct and no one manipulated your data.
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <h2 class="caption mb-2">Your answers</h2>
            <div class="list-group">
                <% for (var i = 0; i < answers.length ; i++) { %>
                  <h4 class="mt-2"> <%= i+1 %>. <%= polls[i] %></h4>
                      <h5 class="list-group-item list-group-item">Answer: <%= answers[i] %></h5>
                  <% } %>
            </div>

  <a href="/dashboard" class="btn btn-secondary mt-2">Back</a>
  
</div>
</div>
