body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    width: 390px;
    margin: 0 auto;
    background: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%);
    align-content: center;
    text-align: center;
    min-height: 100vh;
    text-shadow: 2px 2px 5px grey;
    line-height: 30px;
}

h2 {
    border: 2px;
    padding: 20px;
    color: black;
    border-radius: 65%;
    border-style: dashed;
    background: linear-gradient(-90deg, #f8ff00 0%, #3ad59f 100%);
}

.center {
    display: flow-root;
}

.center img {
    float: right;
    width: 55%;
    height: auto;
}

.center p {
    clear: left;
}

img {
    border: 20px;
    color: bisque;
    border-style: inset;
}

table,
td,
th {
    border: 1px solid;
    padding: 10px;
}

table {
    background-color: white;
    border-collapse: collapse;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

th:first-child {
    position: relative;
}

th:first-child::after {
    content: "I needed to use the first-child selector for something because the rubric told me to, so enjoy this tooltip that only shows up when you hover the first table header child.";
    position: absolute;
    left: 0;
    bottom: 100%;
    width: min(320px, calc(100vw - 24px));
    box-sizing: border-box;
    padding: 4px 8px;
    color: white;
    background-color: #333;
    border-radius: 4px;
    white-space: normal;
    line-height: 1.3;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    font-size: small;
}

th:first-child:hover::after {
    visibility: visible;
    opacity: 1;
}