{% extends "base.html" %}
{% block title %}Fun Facts{% endblock title %}
{% block custom %}
<style>
  body {
    background-image: url('https://images2.alphacoders.com/546/546678.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff; /* Sets default text color to white */
  }

  .content-box {
    background-color: rgba(255, 255, 255, 0.8);
    margin: 2rem;
    padding: 2rem;
    border-radius: 0.5rem;
  }

  .fun-fact {
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
    border-radius: 20px; /* Rounded corners for the bubble */
    padding: 1rem;
    margin-bottom: 1rem; /* Space between bubbles */
    font-size: 1.2rem; /* Slightly larger font */
    text-align: center; /* Center align text */
  }

  .fun-fact-special {
    color: #fafafa; /* Color for the 2 train fun fact */
  }

  .fun-fact-special-f {
    color: #ffffff; /* Color for the F train fun fact */
  }

  .button-link {
    text-align: center;
    margin-top: 1rem;
  }

  .btn-custom {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
  }

  .btn-custom:hover {
    color: #fff;
    background-color: #0056b3;
    border-color: #0056b3;
  }

  .image-credit {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: black;
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 0.8rem;
  }
</style>
{% endblock custom %}
{% block content %}
<div class="image-credit">
  This picture was taken by Tatiana Fet and uploaded to Pexels
</div>
<div class="container mt-3">
  <div class="row mt-3">
    <div class="col-lg-12 content-box">
      <h1 style="color: black;">Data Fun Facts:</h1>
      <div class="fun-fact">
        West Fourth was the most delayed station despite being in the heart of the City, it also is under China Town in Census data, a low median income area
      </div>
      <div class="fun-fact">
        The Lettered trains on average have more delays than their Numbered counterparts
      </div>
      <div class="fun-fact fun-fact-special">
        The 2 line is on average the most delayed train in our data in all time
      </div>
      <div class="fun-fact fun-fact-special-f">
        The F line was the most delayed train on average in the year 2018
      </div>
      <div class="fun-fact">
        Staten Island actually has an MTA line, though it is the only one for the entire island
      </div>
      <div class="fun-fact">
        West Fourth was almost delayed for 255 days and 19 hours in 2018
      </div>
      <div class="fun-fact">
        The station with the least delays is 116st Columbia University with almost 1 day and 6 hours of delays in 2018
      </div>
      <div class="fun-fact">
        Since 2020, the station with the most ridership is Time Sq-42nd St with over 107 Million riders counted
      </div>
      <div class="button-link">
        <a href="/map" class="btn btn-custom">Interactive Map</a>
      </div>
      <div class="button-link">
        <a href="/" class="btn btn-custom">Back to Home</a>
      </div>
      <div class="button-link">
        <a href="/about-us" class="btn btn-custom">About Us</a>
      </div>
    </div>
  </div>
</div>
{% endblock content %}