style.css

/* https://codepen.io/wilder_taype/embed/preview/Nbmwbb?height=450&theme-id=0&default-tab=result&user=wilder_taype&slug-hash=Nbmwbb&preview=true&pen-title=list%20style%20-%20Ol%20and%20ul%20style%20&name=cp_embed_9 */

body {
    padding: 0 2%;
}

.X {
    margin: auto;
    padding: 1% 2%;
    /* max-width: 1440px; */
    border-radius: 5px;
}

h1, h2, h3, h4, h5 {
    text-align: center;
    /* font-family: 'Baloo Tamma', cursive; */
}

h4 {
    margin: unset;
}

h5 {
    margin-top: 1%;
    margin-bottom: 1%;
}

/*SG = style grid*/

.SG {
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex;
    /* gap: 5%; */
    justify-content: center;
    flex-wrap: wrap;
}

.SG .box {
    width: 100%;
    /* height: 100vh; */
    padding: 1% 2%;
    min-height: 200px;
    /* max-height: 220px; */
    box-sizing: border-box;
}

.SG .sgLi {
    /* min-width: 24%; */
    min-width: 350px;
    margin: .35%;
    display: inline-flex;
    flex: 1;
}

li {
    font-size: 18px;
    line-height: 30px;
    text-align: justify;
    letter-spacing: 1px;
    font-family: 'Raleway', serif;
}

.locations-list {
    margin-bottom: .35%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 1% 2%;
    min-width: 300px;
    padding-right: 25px;
}

.location-entry {
    flex: 1;
    /* bullet point into flex container */
    margin-bottom: 2%;
    padding: 1% 2%;
    margin: 0.35% .35%;
    min-width: 200px;
}

.SG .locations-list {
    list-style: none;
}

/*Styles */

.df {
    list-style-type: disc;
}

.s1 {
    list-style-type: square;
}

.s2 {
    list-style-type: circle;
}

.s3 {
    list-style-type: decimal;
}

.s4 {
    list-style-type: decimal-leading-zero;
}

.s5 {
    list-style-type: lower-alpha;
}

.s6 {
    list-style-type: upper-alpha;
}

.s7 {
    list-style-type: lower-roman;
}

.s8 {
    list-style-type: upper-roman;
}

.s9 {
    list-style-type: lower-greek;
}

.s10 {
    list-style-type: georgian;
}

.s11 {
    list-style-type: hebrew;
}

.s12 {
    list-style-type: hiragana;
}

.s13 {
    list-style-type: hiragana-iroha;
}

.s14 {
    list-style-type: katakana;
}

.s15 {
    list-style-type: katakana-iroha;
}

.s16 {
    list-style-type: cjk-ideographic;
}

/* .s17 {
    list-style-image: url(//goo.gl/L3tqpe);
} */

.s18 {
    list-style: none;
}

.s18 li:before {
    content: '';
    width: 20px;
    height: 20px;
    margin-right: 15px;
    display: inline-block;
    /* background: url(//goo.gl/lcPSVD); */
    background-position: 50%;
}

.s19 {
    list-style: none;
}

.s19 li:before {
    content: '\f0a9';
    margin-right: 15px;
    font-family: FontAwesome;
}

/* responsive grid*/

@media (max-width: 970px) {
    .SG .sgLi {
        width: 180px;
    }
}

@media (max-width: 425px) {
    .SG .sgLi {
        width: 100%;
    }
}

@media (prefers-color-scheme: dark) {
    /* Dark theme styles go here */
    body {
        color: #c9180b;
        background: #140003;
    }
    .X {
        background: #320005;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .8);
    }
    .SG .box {
        background: #651010;
    }
    /* li {
        color: #7a8896;
    } */
    /* unvisited link */
    a:link {
        color: #c9180b;
    }
    /* visited link */
    a:visited {
        color: #ad0000;
    }
    /* mouse over link */
    a:hover {
        color: black;
    }
    /* selected link */
    a:active {
        color: #d02c2c;
    }
    .SG .sgLi {
        box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    }
    .SG .sgLi:hover {
        box-shadow: 0 5px 10px rgba(0, 0, 0, .8);
    }
    .SG .location-entry {
        background: #8b1108;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    }
    .SG .location-entry:hover {
        box-shadow: 0 5px 10px rgba(0, 0, 0, .8);
    }
    h5 {
        color: black;
    }
}

@media (prefers-color-scheme: light) {
    /* Light theme styles go here */
    body {
        color: #2e3e50;
        background: #d8dddd;
    }
    .X {
        background: #ecf0f1;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .3);
    }
    .SG .box {
        background: rgb(255, 241, 241);
    }
    li {
        color: #2c3e50;
    }
    .SG .sgLi {
        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    }
    .SG .sgLi:hover {
        box-shadow: 0 5px 10px rgba(0, 0, 0, .15);
    }
    .SG .location-entry {
        background: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
    }
    .SG .location-entry:hover {
        box-shadow: 0 5px 10px rgba(0, 0, 0, .15);
    }
}