body {
    background: radial-gradient(circle, red, black);
}

header {
    background-color: black;
    color: red;
    line-height: 50px;
    text-align: center;
    margin: 0;
    padding: 0;
    border-radius: 10px;
}
.header {
    grid-area: header;
}
.p {
    grid-area: p;
}
.p2 {
    grid-area: p2;
}
.p3 {
    grid-area: p3;
}
.p4 {
    grid-area: p4;
}
.p5 {
    grid-area: p5;
}
.p6 {
    grid-area: p6;
}
.p7 {
    grid-area: p7;
}
.p8 {
    grid-area: p8;
}
.p9 {
    grid-area: p9;
}
.p10 {
    grid-area: p10;
}
.image {
    grid-area: image;
}
.header2 {
    grid-area: header2;
}
.image2 {
    grid-area: image2;
}
.header3 {
    grid-area: header3;
}
.image3 {
    grid-area: image3;
}
.header4 {
    grid-area: header4;
}
.header5 {
    grid-area: header5;
}
.header6 {
    grid-area: header6;
}
.image4 {
    grid-area: image4;
}
.image5 {
    grid-area: image5;
}
.image6 {
    grid-area: image6;
}
.table {
    grid-area: table;
}
article {
    background: linear-gradient(rgb(177, 1, 177), rgba(255, 255, 255, 0.778));
    color: black;
    clear: both;
    margin: auto;
    width: auto;
    border-radius: 10px;
    padding: 10px;
    font-family: 'Times New Roman', Times, serif;
    display: grid;
    align-items: center;
    justify-content: center;
}

footer {
    background-color: violet;
    color: rgb(0, 0, 0);
    clear: both;
    position: relative;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    bottom: 18px;
}

a {
    text-decoration: none;
    color: rgb(0, 0, 0);
    display: inline-block;
    line-height: 30px;
    text-align: center;
    background-color: navy;
    border-radius: 10px;
    width: 90px;
    position: relative;
    border: 2px solid black;
    padding: 5px;
    font-family: 'Times New Roman', Times, serif;
    bottom: 10px;
}
nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}
aside {
    margin: auto;
    width: 100%;
    position: sticky;
    top: 20px;
    visibility: visible;
    z-index: 5;
}

a:hover,
button:hover {
    background: radial-gradient(ellipse, goldenrod, black);
}

figure img {
    border: 2px solid black;
    border-radius: 10px;
    margin: 10px;
    clear: both;
    width: 100%;
    display: flex;
    height: auto;
    position: relative;
}
a:visited {
    background-color: red !important;
}

.link-active {
    background: linear-gradient(red, black);
}

h1 {
    text-align: center;
}

table,
th,
td {
    border: 2px solid black;
    border-collapse: collapse;
    margin: auto;
    padding: 10px;
    text-align: center;
}

table {
    margin-bottom: 15px;
}

.smaller-img {
    width: 50%;
    height: 0%;
}

.img {
    width: 200px;
    height: 125px;
}

div {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

ul,
ol {
    line-height: 1.5;
}

figure figcaption {
    visibility: hidden;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    border-bottom-left-radius: 8.5px;
    border-bottom-right-radius: 8.5px;
    text-align: center;
    overflow: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    color: white;
    padding: 5px;
    height: 40px;
    bottom: 10px;
    left: 10px;
    width: calc(100% - 7px);
}

figure:hover figcaption {
    visibility: visible !important;
}

figure {
    position: relative;
    margin: 0 20px 0 0;
    display: inline-block;
}
button {
    display: block;
    position: sticky;
    left: 20px;
    top: 20px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    font-size: 20px;
    border: 2px solid black;
    border-radius: 5px;
    background-color: red;
    z-index: 1;
    clear: both;
    visibility: hidden;
}

p {
    text-align: justify;
    margin-top: 0px;
}