<html>
    <head>
        <title>Azure Cloud App</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    </head>
    <style type="text/css">
        @media screen and (max-width: 599px) {
            .note-grid {
                grid-template-columns: 100%;
                grid-auto-rows: auto;
                row-gap: 0.5rem;
                display: grid;
            }
        }

        @media screen and (min-width: 600px) {
            .note-grid {
                grid-template-columns: repeat(4, 25% [col-start]);
                grid-template-rows: repeat(2, 50% [row-start]);
                column-gap: 1rem;
                row-gap: 0.5rem;
                display: grid;
            }
        }
    </style>
    <body>
        <%- include ('./partials/navbar') %>
        <main class="container-fluid" role="main" style="min-height: 90vh;">
            <%- body %>
        </main>
        <%- include ('./partials/footer') %>
    </body>
</html>