* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .app, body, html {
            height: auto;
            display: flex;
            flex-direction: column;
            font-family: Helvetica, sans-serif;
            scroll-snap-type: y mandatory;
            scroll-behavior: smooth;
        }
        .nav {
            display: flex;
            flex-direction: column;
            position: fixed;
            right: 1mm;
            top: 11mm;
            gap:2mm;
            border-radius: 1mm;
            width: max-content;
            visibility: hidden;
            background-color: #0008;
        }
        .navIcon:hover {background-color: #fff3;}
        .navIcon:active {background-color: #0006;}
        .navIcon {
            position: fixed;
            border-radius: 1mm;
            top: 1mm;
            right: 1mm;
            height: 9mm;
            width: 9mm;
            padding: 1mm;
        }
        .visible {
            visibility: visible;
        }
        .on {
            background-color: #0008;
        }
        .link {
            text-decoration: none;
            color: #fff9;
            font-weight: bold;
            padding: 2mm;

        }
        .link:hover {
            color:#0008;
            background-color: #fff9;
        }
        .add-button {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 9mm;
        }
        .page {
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            height: 100vh;
            scroll-snap-align: center;
            background-color: cadetblue;
            color: #fff;
        }