main {
    display: flex;
    flex-direction: column;
    justify-self: center;
    align-items: center;
    column-gap: 2rem;

    margin-top: 2rem;
    width: 80%;
    gap: 2rem;
}

.banner-container {
    width: 100%;
    background-color: var(--background);
    border-radius: 12px;
    border: var(--border);
}

.slideshow-banner {
    border-radius: 12px;
    width: 100%;
    height: 20.6vw;
    background-size: contain;
    background-repeat: no-repeat;
    animation: slideImages 21s infinite; /* 7 seconds per image for 3 images */

}

@keyframes slideImages {
  0%, 30% { background-image: url('../troubleshooting/placeholders/banner-placeholder.jpg'); }
  33%, 63% { background-image: url('../troubleshooting/placeholders/banner-placeholder-2.jpg'); }
  66%, 100% { background-image: url('../troubleshooting/placeholders/banner-placeholder-3.jpg'); }
}

.content {
    align-self: flex-start;

    width: 100%;
    background-color: var(--background);
    border-radius: 12px;
    border: var(--border);
 }

table {
    justify-self: center;
    border: 2px solid grey;
    border-collapse: collapse;
}

tr:nth-child(even) {
    background-color: rgb(35, 35, 35);
}

tr:nth-child(odd) {
    background-color: rgb(50, 50, 50);
}

th {
    color: white;
    background-color: rgb(0, 0, 0);
    font-weight: bolder;
    padding: 0.5em;
    border: 2px solid grey;
}

td {
    padding: 0.5em;
    text-align: center;
    border: 2px solid grey;
}

span {
    position: relative;
    top: calc((clamp(1rem, 2vw + 0.25rem, 2rem)/4)*-1);
    font-size: calc(clamp(1rem, 2vw + 0.25rem, 2rem)/2);
}

#text {
    text-align: left;
}