.content {
    font-family: arial;
    padding: 8px;
    text-align: justify;
}

.content table {
    width: 80%;
    margin: auto;
    text-align: center;
    border-collapse: collapse;
}

@media (max-width:768px) {
    .grading {
        width: 100%;
    }
}

.content table th,
.content table td {
    border: 1px solid black;
    padding: 4px;
}

.samples {
    display: grid;
    column-gap: 10em;
    grid-template-columns: auto auto;
}

@media (max-width:768px) {
    .samples {
        column-gap: 2em;
    }
}

.sample-input,
.sample-output {
    font-family: monospace;
    white-space: pre-line;
    border: 1px solid black;
    padding: 4px;
}

.sample-input {
    grid-column: 1;
}

.samples .copy {
    margin-top: -8px;
    margin-bottom: 8px;
    text-align: right;
}

.sample-output {
    grid-column: 2;
}

.sample-comment {
    grid-column: 1 / span 2;
    padding: 0;
    margin-bottom: 16px;
}

.mp-header {
    display: grid;
    align-items: end;
    /* margin-top: 48px; */
}

.mp-header div:nth-child(3n+1):after {
    content: '';
    border-bottom: 1px solid black;
    position: absolute;
    display: block;
    width: 100%;
}

.mp-header h1 {
    grid-column: 1;
}

.mp-header .logo {
    grid-column: 2;
    text-align: right;
}

.mp-header .logo img {
    height: 8em;
    padding: 4px;
}

.mp-header .memory {
    margin-top: 6px;
    grid-column: 2;
    text-align: right;
}

.mp-footer {
    padding-top: 16px;
    display: block;
}

.author {
    display: block;
    float: right;
}