@section('seasonal_css')
<style>
    @import url("https://fonts.googleapis.com/css?family=Cookie");
    body {
        background-color: #000000;
    }

    h1 {
        font-family: 'Cookie', cursive;
        font-size: 80px;
        text-align: center;
        color: white;
        letter-spacing: 3px;
    }

    .drop {
        position: absolute;
        top: 0;
        z-index: 1;
        border-radius: 100%;
        background-color: #fff;
        box-shadow: 0 0 10px #FFF;
    }

    .animate {
        animation: falling 5.5s infinite ease-in;
    }

    @keyframes falling {
        0% {
            top: -10px;
        }
        10% {
            transform: translateX(-5px);
        }
        20% {
            transform: translateX(5px);
        }
        30% {
            transform: translateX(-5px);
        }
        40% {
            transform: translateX(5px);
        }
        60% {
            transform: translateX(-5px);
        }
        70% {
            transform: translateX(5px);
        }
        80% {
            transform: translateX(-5px);
        }
        90% {
            transform: translateX(5px);
        }
        95% {
            opacity: 1;
        }
        100% {
            top: 95vh;
            opacity: 0;
        }
    }
    .line {
        padding-inline-start: 0px;
        text-align: center;
    }

    li {
        position: relative;
        margin: 0 15px;
        list-style: none;
        padding: 0;
        display: inline-block;
        width: 12px;
        height: 28px;
        border-radius: 50%;
        top: 35px;
        background: #fff;
    }
    li:before {
        content: "";
        position: absolute;
        background: #222;
        width: 10px;
        height: 9px;
        border-radius: 3px;
        top: -4px;
        left: 1px;
    }
    li:after {
        content: "";
        top: -14px;
        left: 9px;
        position: absolute;
        width: 52px;
        height: 19px;
        border-bottom: solid #222 2px;
        border-radius: 30%;
    }

    .red {
        background-color: #fb4545;
        animation: lightningRed 1s infinite;
    }

    .green {
        background-color: #24D024;
        animation: lightningGreen 0.8s infinite;
    }

    .yellow {
        background-color: #fff952;
        animation: lightningYellow 0.9s infinite;
    }

    .blue {
        background-color: #0A53DE;
        animation: lightningBlue 1.1s infinite;
    }

    .pink {
        background-color: #f53896;
        animation: lightningPink 1.2s infinite;
    }

    @keyframes lightningRed {
        0% {
            box-shadow: 5px 10px 35px 10px #fb4545;
        }
        50% {
            box-shadow: none;
        }
        100% {
            box-shadow: 5px 10px 35px 10px #fb4545;
        }
    }
    @keyframes lightningGreen {
        0% {
            box-shadow: 5px 0 35px 10px #24D024;
        }
        50% {
            box-shadow: none;
        }
        100% {
            box-shadow: 5px 0 35px 10px #24D024;
        }
    }
    @keyframes lightningYellow {
        0% {
            box-shadow: 5px 0 35px 10px #fff952;
        }
        50% {
            box-shadow: none;
        }
        100% {
            box-shadow: 5px 0 35px 10px #fff952;
        }
    }
    @keyframes lightningBlue {
        0% {
            box-shadow: 5px 0 35px 10px #0A53DE;
        }
        50% {
            box-shadow: none;
        }
        100% {
            box-shadow: 5px 0 35px 10px #0A53DE;
        }
    }
    @keyframes lightningPink {
        0% {
            box-shadow: 5px 0 35px 10px #f53896;
        }
        50% {
            box-shadow: none;
        }
        100% {
            box-shadow: 5px 0 35px 10px #f53896;
        }
    }
    @media (max-width: 1024px) {
        .line {
            padding: 0;
        }

        li {
            margin: 0 15px 20px 15px;
        }
    }

</style>
@endsection

@section('seasonal_js')
    <script>
    $(function() {

    function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
    };

    var limit_flake = 50;
    setInterval(function() {
    let dimension = randomInt(3, 9) + "px";
    var flake = "<div class='drop animate' style='left:" + randomInt(10, window.innerWidth - 20) + "px;width:" + dimension + ";height:" + dimension + "'></div>";
    $('body').append(flake);

    var list_flake = $('.drop');
    if (list_flake.length > limit_flake) list_flake[list_flake.length - 1].remove();
    }, 200);
    })

    </script>
@endsection

@section('seasonal_html')
    <div class="light" >
    <ul class="line">
        <li class="red"></li>
        <li class="yellow"></li>
        <li class="blue"></li>
        <li class="pink"></li>
        <li class="red"></li>
        <li class="green"></li>
        <li class="blue"></li>
        <li class="yellow"></li>
        <li class="red"></li>
        <li class="pink"></li>
        <li class="blue"></li>
        <li class="yellow"></li
        <li class="yellow"></li>
        <li class="red"></li>
        <li class="pink"></li>
        <li class="green"></li>
        <li class="blue"></li>
        <li class="pink"></li>
        <li class="red"></li>
        <li class="green"></li>
        <li class="blue"></li>

        <li class="red"></li>
        <li class="green"></li>
        <li class="blue"></li>
        <li class="yellow"></li>
        <li class="red"></li>
        <li class="pink"></li>
        <li class="green"></li>
        <li class="blue"></li>
        <li class="pink"></li>
    </ul>
    </div>
@endsection