*,
        *:before,
        *:after {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Titillium', sans-serif;
            color: white;
            background-color: #333;
        }

        a {
            color: inherit;
            text-decoration: dashed;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Formula1 Bold', sans-serif;
        }

        names-list {
            display: block
        }

        input[name="name2"],
        input[name="name3"],
        input[name="name4"],
        input[name="name5"] {
 			-webkit-user-select: text; /* Chrome, Opera, Safari */
 			-moz-user-select: text; /* Firefox 2+ */
 			user-select: text; /* Standard syntax */
			display: none;
        }

        main {
            display: grid;
            grid-template-areas:
                "logo"
                "title"
                "drawing"
                "spacer"
                "form";
            gap: 16px;
            padding: 16px;
            max-width: 800px;
            margin: auto;
        }

        .hidden {
            display: none;
        }

        .title {
            display: flex;
            gap: 8px;
            align-items: start;

            p,
            h1 {
                margin: 0;
            }

            p {
                text-wrap: balance;
            }

        }

        .drawing {
            height: 230px;
        }

        /* Desktop: three logical rows and two columns */
        @media (min-width: 768px) {
            main {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto auto auto;
            }

            .logo {
                grid-column: 1;
                grid-row: 1;
            }

            .title {
                grid-column: 2;
                grid-row: 1;
            }

            .drawing {
                grid-column: 1 / span 2;
                grid-row: 2;
                height: 430px;
                margin-top: -134px;
            }

            .spacer {
                grid-column: 1;
                grid-row: 3;
            }

            .form {
                grid-column: 2;
                grid-row: 3;
            }
        }

        /* Optional styling */
        .logo-img,
        .drawing-img {
            max-width: 100%;
            height: auto;
        }

        form,
        textarea {
            font-family: inherit;
            color: inherit;
        }

        input,
        button,
        textarea {
            display: block;
            width: 100%;
            margin-bottom: 8px;
            padding: 8px;
            box-sizing: border-box;
            color: inherit;
            background-color: inherit;
        }

        input[type="checkbox"],
        input[type="radio"] {
            display: inline;
            width: auto;
            margin-right: 8px;
        }

        label {
            display: inline;
            margin-bottom: 8px;
            font-size: 0.8em;
        }