/* example style */

html {
    text-align: center;
    background-color: #EEEEEE;
    padding: 50px;
}

body {
    padding: 50px;
    margin: auto;
    max-width: 60vw;
    text-align: left;
    background-color: #FFFFFF;
}

.Navigation {
    margin: 0;
    padding: 0;
}

.Navigation li {
    list-style: none;
    display: inline-block;
}

.Navigation li:after {
    content: "|";
}

.Navigation li:last-child:after {
    content: "";
}

.Breadcrumb {
    margin: 0;
    padding: 0;
}

.Breadcrumb li {
    list-style: none;
    display: inline-block;
}

.Breadcrumb li:after {
    content: "/";
}

.TwoColumns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 10px;
}

.Accordion {
    list-style: none;
    padding: 0;
    margin: 0;
}

.Accordion > li {
    margin: 10px;
    padding: 10px;
    background-color: lightblue;
}

.Grid_50-50 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
}

.Grid_25-25-25-25 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
}

.Grid_33-33-33 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;
}