/* ====================================== */
/* ====== 1. Instruction Container ====== */
/* ====================================== */
#instruction_container {
    margin: 0 auto;
    margin-top: 2rem;
    width: 70%;
}

.instruction {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--customGray);
}

.instruction h1 {
    font-weight: 300;
    cursor: pointer;
}

.instruction h2 {
    position: absolute;
    right: 2.5%;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Horizontal line */
.instruction h2::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: black;
    transition: background-color 0.2s ease;
}

/* Vertical line */
.instruction h2::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 2px;
    background-color: black;
    transition: opacity 0.35s ease;
    opacity: 1;
}

/* "+" becomes "-" */
.instruction h2.active::after {
    opacity: 0; /* fade out vertical line */
}

/* The "learn more" text is initially hidden. Only shown when content is collapsed */
.learn_more{
    margin-top: 1rem;
    transition: opacity 0.35s ease, max-height 0.35s ease;

}

.hidden {
    display: none;
}

.strikeThrough {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: black;
    color: var(--customGray);
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}