/* source: print\procent2-print.htm style block 1 */
body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            text-align: center;
            margin-bottom: 10px;
        }
        h2 {
            text-align: center;
            margin-bottom: 40px;
        }
        .container {
            display: flex;
            flex-direction: column;
        }
        .opgave {
            border: 1px solid black;
            padding: 15px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            box-sizing: border-box;
        }
        .diagram {
            width: 80px;
            height: 80px;
            position: relative;
            border-radius: 50%;
            background-color: #ddd;
            border: 1px solid #000;
        }
        .diagram canvas {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        .question {
            font-size: 24px;
            text-align: left;
            margin-right: 20px;
        }
        .calculation {
            font-size: 20px;
            color: green;
            text-align: left;
            margin-right: 20px;
        }
        .print-button {
            margin-top: 20px;
        }

        @media print {
            body * {
                visibility: hidden;
            }
            #opgaver, #opgaver *, h1 {
                visibility: visible;
            }
            h1 {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                margin: 0;
            }
            #opgaver {
                position: absolute;
                top: 50px;
                left: 0;
                width: 100%;
            }
            .diagram canvas {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }