<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/css/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="/css/picnic.min.css">
        <link rel="stylesheet" href="/css/rome.css">
        <link rel="stylesheet" href="/css/simplemde.min.css">
        <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
        <title>{% block title %}{% endblock %}</title>

        <style>
            .documentation > section {
                background: #fff;
                text-align: left;
                width: 90%;
                max-width: 960px;
                margin: 0 auto;
                padding: 80px 0 0;
            }

            .flex>* {
                padding-right: .6em;
            }

            .flex>h1, .flex>span {
                padding: 0;
            }

            nav.transparent {
                box-shadow: none;
                background: none;
            }

            .pseudo.button {
                background: transparent;
                color: #111;
            }

            .shyButton {
                font-size: .75em;
            }

            .shyFont {
                font-size: .65em;
            }

            .top {
                z-index: 10001;
            }

            .fl {
                float: left;
            }

            .fr {
                float: right;
            }

            td, th {
                padding: .3em .45em .3em .6em;
            }

            .fitty {
              display: inline-block;
              white-space: normal;
              line-height: 1em;
              padding-bottom: .1em;
              text-align: center;
            }

            #slidr-div p {
                margin: 0;
                text-align: center;
                line-height: 1;
            }
            @media screen and (orientation: landscape) {
                #slidr-div p {
                    font-size: 8vw;
                }
            }
            @media screen and (orientation: portrait) {
                #slidr-div p {
                    font-size: 10vh;
                }
            }

            .title {
                font-family: 'Lobster', cursive;
                font-size: x-large;
            }

            nav .menu>.navy {
                color: #000;
                background-color: transparent;
                margin-right: 2.5em;
            }

            nav .menu>.navy:hover {
                background-color: rgba(17, 17, 17, .15);
            }

            .navy:hover, .title:hover {
                color: rgba(17, 17, 17, .3);
            }

            .hidden-hover {
                opacity: 0;
            }

            .hidden-hover:hover {
                opacity: 1;
            }

            .filter a {
                text-align: center;
            }

            .card footer {
                position: absolute;
                bottom: 0;
            }

            .card-wrapper {
                margin: 0 auto;
            }

            .box {
                padding: 1em;
                background-color: rgba(17, 17, 17, .1);
                border: none;
                height: 17em;
                width: 17em;
                margin: .6em auto;
            }

            .new i {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-right: -50%;
                transform: translate(-50%, -50%);
            }

            .box:hover {
                background-color: rgba(17, 17, 17, .05);
            }

            .card footer {
                padding-left: 0;
                padding-bottom: 0;
            }

            .fitty > p {
                margin: 0;
            }

            nav {
                max-width: 100vw;
            }

            .pengumuman {
                width: 100%;
            }

            #info span {
                width: 98%;
                padding: .7em 0;
                margin: 0;
            }

            nav a {
                color: inherit;
            }

            .filter > div {
                text-align: center;
            }

            .rd-month button {
                color: #000;
            }

            .rd-container {
                z-index: 5;
            }

            h1 {
                padding: .2em 0;
            }

            .cp {
                width: 100%;
                font-size: small;
                text-align: center;
                position: fixed;
                bottom: 0;
                padding: .3em;
            }
        </style>
    </head>
    <body>
        <nav>
            <span class="brand">
                <a href="/" class="title">Live Info</a>
            </span>
            {% block nav %}{% endblock %}
        </nav>
        <script src="/js/rome.js"></script>
        <script src="/js/slidr.min.js"></script>
        <script src="/js/simplemde.min.js"></script>
        {% block body %}
        {% endblock %}

        <script>
            function fadeOutEffect() {
                var fadeTarget = document.getElementById("info");
                var fadeEffect = setInterval(function () {
                    if (!fadeTarget.style.opacity) {
                        fadeTarget.style.opacity = 1;
                    }
                    if (fadeTarget.style.opacity < 0.1) {
                        clearInterval(fadeEffect);
                        fadeTarget.remove();
                    } else {
                        fadeTarget.style.opacity -= 0.1;
                    }
                }, 50);
            }
        </script>
    </body>
</html>
