/* Header for the rows*/
.boxheader {
    float: left;
    display: block;
    width: 100%;
    margin-bottom: 2px;
 }

 .boxheader > h1, h2, h3 {
    padding-bottom: 0.5rem;
    margin: 2rem 0rem 1rem 0rem;
    border-bottom: 2px dashed var(--accent);
 }

 /* Clear floats after rows */
 .boxheader:after {
    content: "";
    display: block;
    clear: both;
  }

/* div for each year */
.row {
    margin: 4px ;
    border: var(--border-color) 2px solid;
}
  
/* Add padding BETWEEN each column (if you want) */
.row,
.row > .characters {
    padding: 4px;
}
  
/* Clear floats after rows */
.row:after {
    content: "";
    display: inline;
    clear: both;
}

/* Create multiple columns that float next to each other */
.characters {
    float: left;
    margin: 3px;
    width: 10.75rem;
    height: 10.75rem;
    display: none; /* Hide columns by default */
    border: 2px solid var(--border-color);
    font-size: small; 
}

/* Content for the artwork thumbnail */
.content {
    display: grid;
    background-color: var(--background-container);
    box-sizing: border-box;
    overflow: hidden;

    .desc {
        height: 2.7rem;
        padding: 0rem 0.2rem;
        margin: 0rem;
        border-bottom: 1px solid var(--border-color);
        overflow: hidden;
    }

    a {
        text-decoration: none;
        vertical-align: middle;
        text-align: center;
    }
    a:hover {
        text-decoration: underline;
    }

    img {
        height: 8rem;
        width: 100%;
        display: block;
        position: relative;
        object-fit: cover;
        border-radius: 0rem;
    }
}

/* Reduce artwork thumbnail title font size on mobile */
@media only screen and (max-width: 720px) {
    .content .desc {
      font-size: small;
    }
  }

.spoilers {
    a {
        font-weight: 600;
    }
}

/* The "show" class is added to the filtered elements */
.show {
    display: grid;
}
  
/* Style the buttons */
.btn {
    border: 2px solid #301436;
    padding: 10px 12px;
    background-color: #51245e;
    color:#fdf7d3;
    cursor: pointer;
}
  
/* Active button */
.btn.active {
    background-color: #c98c1d;
    color: rgb(0, 0, 0);
    font: rgb(252, 139, 139) bold italic 14pt;
    border: 2px solid #eeccaf;
}

/* Add a grey background color on mouse-over */
.btn:not([aria-disabled="true"]):hover{
    background-color: #995890;
    border-color: #e90f6ab6;
    border: 2px solid rgb(252, 238, 211);
}

/* Add a grey background color on mouse-over */
.btn.active:not([aria-disabled="true"]):hover{
    background-color: #ee9e69;
    border-color: #e90f6ab6;
    border: 2px solid rgb(252, 238, 211);
    font: rgb(7, 0, 0);
}

.smallpadding {
    padding: 0.5rem 0rem;
    margin: 0rem;
    font-size: small;
}

.buttonHeader {
    margin-bottom: 0.5rem;
}