/* set unordered list properties for horizontal accordion effect */
ul {
    list-style: none;
    margin: 0 auto;
    padding-inline-start: 0;

    /* any labels in list with list item children will be set with the following */
    label > li {
        float: left;
        width: 6%;
        height: 500px;
        transition: width 0.5s; /* have the width transition to the above stated width size in 0.5s */
    }

    /* any label in list that has list item children with div children will not display the elements inside (body of accordion item) */
    label > li > div {
        display: none;
    }

    /* any label in list that has list item children with h2 children will display the h2 element vertically facing the right (header of accordion item) */
    label > li > h2 {
        display: block;
        writing-mode: vertical-rl;
        transform: scale(-1);
        text-align: center;
    }

    /* set the background to have a translucent layer of black over it so that elements stand out overtop of it  */
    label:nth-child(1) > li:before {
        background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.8));
        content: "";
        width: 6%;
        height: 500px;
        position: absolute;
        transition: width 0.5s;
    }

    /* set the background to have a translucent layer of black over it so that elements stand out overtop of it */
    label:nth-child(2) > li:before {
        background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.8));
        content: "";
        width: 6%;
        height: 500px;
        position: absolute;
        transition: width 0.5s;
    }

    /* set the background to have a translucent layer of black over it so that elements stand out overtop of it  */
    label:nth-child(3) > li:before {
        background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.8));
        content: "";
        width: 6%;
        height: 500px;
        position: absolute;
        transition: width 0.5s;
    }

    /* set the background to have a translucent layer of black over it so that elements stand out overtop of it  */
    label:nth-child(4) > li:before {
        background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.8));
        content: "";
        width: 6%;
        height: 500px;
        position: absolute;
        transition: width 0.5s;
    }

    /* set the background to have a translucent layer of black over it so that elements stand out overtop of it  */
    label:nth-child(5) > li:before {
        background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.8));
        content: "";
        width: 6%;
        height: 500px;
        position: absolute;
        transition: width 0.5s;
    }

    /* set the background to have a translucent layer of black over it so that elements stand out overtop of it  */
    label:nth-child(6) > li:before {
        background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.8));
        content: "";
        width: 6%;
        height: 500px;
        position: absolute;
        transition: width 0.5s;
    }

    /* set the background to have a translucent layer of black over it so that elements stand out overtop of it  */
    label:nth-child(7) > li:before {
        background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.8));
        content: "";
        width: 6%;
        height: 500px;
        position: absolute;
        transition: width 0.5s;
    }

    /* set the background to have a translucent layer of black over it so that elements stand out overtop of it  */
    label:nth-child(8) > li:before {
        background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.8));
        content: "";
        width: 6%;
        height: 500px;
        position: absolute;
        transition: width 0.5s;
    }

    /* set the background to have a translucent layer of black over it so that elements stand out overtop of it  */
    label:nth-child(9) > li:before {
        background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.8));
        content: "";
        width: 6%;
        height: 500px;
        position: absolute;
        transition: width 0.5s;
    }

    /* set the background to have a translucent layer of black over it so that elements stand out overtop of it  */
    label:nth-child(10) > li:before {
        background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.8));
        content: "";
        width: 6%;
        height: 500px;
        position: absolute;
        transition: width 0.5s;
    }
}

/* get element with #id and if it is a checkmark input that is checked, get any sibling that is an unordered list and it's first label child to adjsut it's settings*/
#firstGame:checked ~ ul > label:nth-child(1) > li {
    width: 46%; /* widen the element to show body of accordion item */
    transition: width 0.5s; /* widen with transition of 0.5s */

    /* any div children of label will now display (body of accordion item) */
    > div {
        display: block;
    }
    /* header item will no longer display */
    > h2 {
        display: none;
    }
}
/* set background of list iteem to be gradient overlay */
#firstGame:checked ~ ul > label:nth-child(1) > li:before {
    background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.5));
    content: "";
    width: 46%;
    height: 500px;
    position: absolute;
}

/* get element with #id and if it is a checkmark input that is checked, get any sibling that is an unordered list and it's first label child to adjsut it's settings*/
#secondGame:checked ~ ul > label:nth-child(2) > li {
    width: 46%; /* widen the element to show body of accordion item */
    transition: width 0.5s; /* widen with transition of 0.5s */

    /* any div children of label will now display (body of accordion item) */
    > div {
        display: block;
    }
    /* header item will no longer display */
    > h2 {
        display: none;
    }
}
#secondGame:checked ~ ul > label:nth-child(2) > li:before {
    background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.5));
    content: "";
    width: 46%;
    height: 500px;
    position: absolute;
}

/* get element with #id and if it is a checkmark input that is checked, get any sibling that is an unordered list and it's first label child to adjsut it's settings*/
#thirdGame:checked ~ ul > label:nth-child(3) > li {
    width: 46%; /* widen the element to show body of accordion item */
    transition: width 0.5s; /* widen with transition of 0.5s */

    /* any div children of label will now display (body of accordion item) */
    > div {
        display: block;
    }
    /* header item will no longer display */
    > h2 {
        display: none;
    }
}
#thirdGame:checked ~ ul > label:nth-child(3) > li:before {
    background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.5));
    content: "";
    width: 46%;
    height: 500px;
    position: absolute;
}

/* get element with #id and if it is a checkmark input that is checked, get any sibling that is an unordered list and it's first label child to adjsut it's settings*/
#fourthGame:checked ~ ul > label:nth-child(4) > li {
    width: 46%; /* widen the element to show body of accordion item */
    transition: width 0.5s; /* widen with transition of 0.5s */

    /* any div children of label will now display (body of accordion item) */
    > div {
        display: block;
    }
    /* header item will no longer display */
    > h2 {
        display: none;
    }
}
#fourthGame:checked ~ ul > label:nth-child(4) > li:before {
    background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.5));
    content: "";
    width: 46%;
    height: 500px;
    position: absolute;
}

/* get element with #id and if it is a checkmark input that is checked, get any sibling that is an unordered list and it's first label child to adjsut it's settings*/
#fifthGame:checked ~ ul > label:nth-child(5) > li {
    width: 46%; /* widen the element to show body of accordion item */
    transition: width 0.5s; /* widen with transition of 0.5s */

    /* any div children of label will now display (body of accordion item) */
    > div {
        display: block;
    }
    /* header item will no longer display */
    > h2 {
        display: none;
    }
}
#fifthGame:checked ~ ul > label:nth-child(5) > li:before {
    background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.5));
    content: "";
    width: 46%;
    height: 500px;
    position: absolute;
}

/* get element with #id and if it is a checkmark input that is checked, get any sibling that is an unordered list and it's first label child to adjsut it's settings*/
#sixthGame:checked ~ ul > label:nth-child(6) > li {
    width: 46%; /* widen the element to show body of accordion item */
    transition: width 0.5s; /* widen with transition of 0.5s */

    /* any div children of label will now display (body of accordion item) */
    > div {
        display: block;
    }
    /* header item will no longer display */
    > h2 {
        display: none;
    }
}
#sixthGame:checked ~ ul > label:nth-child(6) > li:before {
    background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.5));
    content: "";
    width: 46%;
    height: 500px;
    position: absolute;
}

/* get element with #id and if it is a checkmark input that is checked, get any sibling that is an unordered list and it's first label child to adjsut it's settings*/
#seventhGame:checked ~ ul > label:nth-child(7) > li {
    width: 46%; /* widen the element to show body of accordion item */
    transition: width 0.5s; /* widen with transition of 0.5s */

    /* any div children of label will now display (body of accordion item) */
    > div {
        display: block;
    }
    /* header item will no longer display */
    > h2 {
        display: none;
    }
}
#seventhGame:checked ~ ul > label:nth-child(7) > li:before {
    background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.5));
    content: "";
    width: 46%;
    height: 500px;
    position: absolute;
}

/* get element with #id and if it is a checkmark input that is checked, get any sibling that is an unordered list and it's first label child to adjsut it's settings*/
#eightGame:checked ~ ul > label:nth-child(8) > li {
    width: 46%; /* widen the element to show body of accordion item */
    transition: width 0.5s; /* widen with transition of 0.5s */

    /* any div children of label will now display (body of accordion item) */
    > div {
        display: block;
    }
    /* header item will no longer display */
    > h2 {
        display: none;
    }
}
#eightGame:checked ~ ul > label:nth-child(8) > li:before {
    background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.5));
    content: "";
    width: 46%;
    height: 500px;
    position: absolute;
}

/* get element with #id and if it is a checkmark input that is checked, get any sibling that is an unordered list and it's first label child to adjsut it's settings*/
#ninthGame:checked ~ ul > label:nth-child(9) > li {
    width: 46%; /* widen the element to show body of accordion item */
    transition: width 0.5s; /* widen with transition of 0.5s */

    /* any div children of label will now display (body of accordion item) */
    > div {
        display: block;
    }
    /* header item will no longer display */
    > h2 {
        display: none;
    }
}
#ninthGame:checked ~ ul > label:nth-child(9) > li:before {
    background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.5));
    content: "";
    width: 46%;
    height: 500px;
    position: absolute;
}

/* get element with #id and if it is a checkmark input that is checked, get any sibling that is an unordered list and it's first label child to adjsut it's settings*/
#tenthGame:checked ~ ul > label:nth-child(10) > li {
    width: 46%; /* widen the element to show body of accordion item */
    transition: width 0.5s; /* widen with transition of 0.5s */

    /* any div children of label will now display (body of accordion item) */
    > div {
        display: block;
    }
    /* header item will no longer display */
    > h2 {
        display: none;
    }
}
#tenthGame:checked ~ ul > label:nth-child(10) > li:before {
    background-image: linear-gradient(rgba(0,0,0,0.8), 50%, rgba(0,0,0,0.5));
    content: "";
    width: 46%;
    height: 500px;
    position: absolute;
}