html, body {
    width: 100%;
    /*overflow: hidden;*/
    margin: 0;
    padding: 0;
}
body {
    font-family: sans-serif;
    overflow: scroll;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    padding: 1ex 0 0 2ex;
}

#subscription {
    font-style: italic;
    font-size: smaller;
}

#main {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-evenly;
    width: 100%;
    margin: 0;
    padding: 0;
}

#container {
    border: solid 1px #0000cc;
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container-item {
    width: 100%;
}

#item {
    border: solid 1px #dd4444;
    width: 45%;
}

.attribute-demo-code {
    background-color: #df6a3b;
    color: #f2ef49;
    font-weight: bold;
}


/* style for demo elements */

.container-demo {
    background-color: #ebd4ef;
    gap: 5px;
    padding: 5px;
    border-radius: 5px;
    max-width: 450px;
    margin-bottom: 10ex;
}

.item-demo {
    background-color: #c1bdbd;
}

/* {flex-direction: row} */
#flex-direction-row-parent {
    display: flex;
    flex-direction: row;

}

.flex-direction-row-child {

}

/* {flex-direction: column} */
#flex-direction-column-parent {
    display: flex;
    flex-direction: column;
}

.flex-direction-column-child {

}

/* {flex-direction: row-revert} */
#flex-direction-row-revert-parent {
    display: flex;
    flex-direction: row-reverse;
}

#flex-direction-column-reverse-parent {
    display: flex;
    flex-direction: column-reverse;
}


/*{flex-wrap: nowrap}*/
#flex-wrap-no-wrap-parent {
    display: flex;
    flex-wrap: nowrap;
}

.flex-wrap-no-wrap-child {

}

/*{flex-wrap: wrap:}*/
#flex-wrap-wrap-parent {
    display: flex;
    flex-wrap: wrap;
}

/*{flex-wrap: wrap-reverse:}*/
#flex-wrap-wrap-reverse-parent{
    display: flex;
    flex-wrap: wrap-reverse;
}

/*{flex-flow: column wrap;}*/
#flex-flow-column-wrap-parent {
    display: flex;
    flex-flow: column wrap;
}

/*{justify-content: flex-start}*/
#justify-content-flex-start-parent {
    display: flex;
    justify-content: flex-start;
}

/*{justify-content: flex-end}*/
#justify-content-flex-end-parent {
    display: flex;
    justify-content: flex-end;
}

/*{justify-content: center}*/
#justify-content-center-parent {
    display: flex;
    justify-content: center;
}

/*{justify-content: space-between}*/
#justify-content-space-between-parent {
    display: flex;
    justify-content: space-between;
}

/*{justify-content: space-around}*/
#justify-content-space-around-parent {
    display: flex;
    justify-content: space-around;
}

/*{justify-content: space-evenly}*/
#justify-content-space-evenly-parent {
    display: flex;
    justify-content: space-evenly;
}