<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">
        
        table {
            border-collapse: collapse;
            width: 90%;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        button {
            margin: 10px;
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            font-weight: bold;
        }
        #averageGrade {
            display: none;
            text-align: center;
            margin-top: 20px;
        }
        #gradeCalculation {
            display: none;
            text-align: center;
            margin-top: 10px;
        }
        .grade-container {
            margin-top: 20px;
            text-align: center;
        }
        .grade {
            font-size: 24px;
            font-weight: bold;
        }
        #buttonContainer {
            text-align: center;
            margin-top: 20px;
        }
        #calculateButton {
            background-color: green;
            color: white;
        }
        #clearButton {
            background-color: red;
            color: white;
        }
        #addRowButton {
            background-color: blue;
            color: white;
        } 
#averageGrade, #gradeCalculation, .grade-container {
    border: 1px solid #ddd;
    padding: 10px;
    margin-top: 10px;
    text-align: center;
}

@media only screen and (max-width: 868px) {
    table {
        width: 100%; /* Adjust as needed */
    }
}
@media only screen and (max-width: 868px) {
    td input {
        width: 110%; /* Adjust as needed */
    }
}
@media (max-width: 500px) {
    th, td {
        font-size: 10px;
    }
}
@media (max-width: 900px) {
    th, td {
        font-size: 12px;
    }
    
    input[type="text"], input[type="number"] {
        font-size: 12px;
    }
}
</pre></body></html>