<!DOCTYPE html>
<html lang="nl">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Mijn Scherm</title>


    <style>

        /* ========================================
           BASIS
           ======================================== */

        html,
        body {

            margin: 0;
            padding: 0;

            width: 100%;
            height: 100%;

        }


        /* ========================================
           PAGINA / ACHTERGROND
           ======================================== */

        body {

            font-family: Arial, Helvetica, sans-serif;

            background-image: url("achtergrond/achtergrond.jpg");

            background-size: 100% 100%;

            background-position: center;

            background-repeat: no-repeat;

            overflow: hidden;

        }


        /* ========================================
           BOVENSTE BALK
           ======================================== */

        .topbar {

            width: 100%;
            height: 120px;

            display: flex;

            justify-content: center;
            align-items: center;

            gap: 30px;

            background-color: rgba(255, 255, 255, 0);

            box-sizing: border-box;

        }


        /* ========================================
           BUTTONS
           ======================================== */

        .topbar button {

            width: 200px;
            height: 45px;

            border: none;

            border-radius: 12px;

            font-family: Arial, Helvetica, sans-serif;

            font-size: 24px;

            font-weight: bold;

            color: #222222;

            background-color: rgba(255, 255, 255, 0.90);

            cursor: pointer;

            transition:
                transform 0.2s ease,
                background-color 0.2s ease,
                box-shadow 0.2s ease;

        }


        /* ========================================
           BUTTON - MUIS EROVER
           ======================================== */

        .topbar button:hover {

            background-color: rgba(255, 255, 255, 1);

            transform: scale(1.05);

            box-shadow:
                0 5px 20px rgba(0, 0, 0, 0.30);

        }


        /* ========================================
           BUTTON - INGEDRUKT
           ======================================== */

        .topbar button:active {

            transform: scale(0.98);

        }


        /* ========================================
           HOOFDINHOUD
           ======================================== */

        .content {

            width: 100%;

            height: calc(100vh - 120px);

            display: flex;

            justify-content: center;

            align-items: center;

            text-align: center;

            box-sizing: border-box;

        }


        /* ========================================
           UDEN IN BEELD
           ======================================== */

        .uden-in-beeld {

            display: inline-block;

            font-family: Arial, Helvetica, sans-serif;

            font-size: 48px;

            font-weight: bold;

            color: #ffffff;

            text-decoration: none;

            padding: 15px 30px;

            border-radius: 15px;

            background-color: rgba(255, 255, 255, 0.15);

            text-shadow:
                0 3px 8px rgba(0, 0, 0, 0.70);

            transition:
                transform 0.25s ease,
                background-color 0.25s ease,
                box-shadow 0.25s ease,
                color 0.25s ease;

        }


        /* ========================================
           UDEN IN BEELD - HOVER
           ======================================== */

        .uden-in-beeld:hover {

            color: #222222;

            background-color: rgba(255, 255, 255, 0.90);

            transform: scale(1.08);

            box-shadow:
                0 8px 30px rgba(0, 0, 0, 0.40);

        }


        /* ========================================
           UDEN IN BEELD - KLIK
           ======================================== */

        .uden-in-beeld:active {

            transform: scale(1.02);

        }


        /* ========================================
           KLEINERE SCHERMEN
           ======================================== */

        @media (max-width: 900px) {

            .topbar {

                height: 90px;

                gap: 15px;

            }


            .topbar button {

                width: 180px;

                height: 55px;

                font-size: 18px;

            }


            .content {

                height: calc(100vh - 90px);

            }


            .uden-in-beeld {

                font-size: 40px;

            }

        }


        /* ========================================
           SMARTPHONE
           ======================================== */

        @media (max-width: 600px) {

            .topbar {

                height: 80px;

                gap: 8px;

                padding: 0 8px;

                box-sizing: border-box;

            }


            .topbar button {

                /*
                 * De twee buttons verdelen
                 * de beschikbare ruimte gelijk.
                 */

                flex: 1;

                width: auto;

                height: 50px;

                font-size: 15px;

                padding: 0 5px;

                white-space: nowrap;

            }


            .content {

                height: calc(100vh - 80px);

            }


            .uden-in-beeld {

                font-size: 30px;

                padding: 12px 20px;

            }

        }

    </style>

</head>


<body>


    <!-- ========================================
         BOVENSTE BUTTONS
         ======================================== -->

    <div class="topbar">


        <button
            onclick="window.location.href='15-activiteiten/!-activiteiten.html'">

            Activiteiten

        </button>

        

    </div>



    <!-- ========================================
         HOOFDINHOUD
         ======================================== -->

    <div class="content">


        <a
            href="00-onderwerpen/onderwerpen-a.html"
            class="uden-in-beeld">

            Uden in Beeld

        </a>


    </div>



</body>

</html>