:root
{
    --color-dark: #2d2f31;
}
.button_dropdown
{
    font-size: 24pt;
    background-color: #d9d9d9;
    border: rgba(0,0,0,0.2) 2pt groove;

}
.button_dropdown:hover
{
    background-color: whitesmoke;
    border: var(--color-dark) 2.3pt groove;
}


.dropdown_group
{
    width : 90%;
    background: #d9d9d9;
    margin : 10px auto;
}

.dropdown_group > label > span
{
    display: flex;
    padding : 30px;
    background : var(--color-dark);
    color : white;
    font-size : 1.2em;
    font-variant : small-caps;
    cursor : pointer;
}
.dropdown_group > label > span > span
{
    display: flex;
    width: 100%;
}
.dropdown_group > label > span::after
{
    margin-left: 10px;
    float: right;
    right: 10%;
    content: "+";
}

.slide
{
    display: flex;
    justify-content: space-between;
    clear:both;
    width:auto;
    height:0px;
    overflow: hidden;
    transition: height .4s ease;
    margin: 0;
    gap: 10px;
}
.slide > div
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}


#touch
{
    position: absolute; opacity: 0; height: 0px;
}

#touch:checked + .slide
{
    padding: 10px;
    height: 500px;
}