body {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        div {
            margin: 0;
        }

        .container div {
            border-width: 1px;
            border-color: black;
            border-style: solid;
            padding: 5px;
        }

        .header, .footer {
            background-color: gray;
            text-align: center;
            color: white;
        }

        .footer {
            color: black;
        }

        .underheader1, .underheader2 {
            grid-area: underheader1;
            background-color: rgb(179, 179, 179);
            color: black;
        }
        .top1, .top2, .top3, .bottom1, .bottom2 {
            background-color: #f4f4f4;
            color: black;
        }

        
        .header {
            grid-area: header;
        }

        .top1 {
            grid-area: top1;
        }

        .top2 {
            grid-area: top2;
        }

        .top3 {
            grid-area: top3;
        }

        .bottom1 {
            grid-area: bottom1;
        }

        .bottom2 {
            grid-area: bottom2;
        }

        .footer {
            grid-area: footer;
        }

        .underheader2 {
            grid-area: underheader2;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-areas:
                'header header header header header '
                'underheader1 underheader1 underheader1 underheader2 underheader2'
                'top1 top2 top3 bottom1 bottom2'
                'footer footer footer footer footer';
            background-color: #2196F3;
            width: 800px;
        }

        .name {
            font-size: xx-large;
            font-weight: bold;
        }

        .date {
            font-size: medium;
        }