/*  web safe font 
=======================
=======================*/
/*  TO DO list: style */
.cssFonts {
    list-style-position: inside;
    line-height: 1.5;
    letter-spacing: -0.022em;
}

/*  TODO list: style */
.about-safeFont {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    list-style: none;
    text-indent: 0;
    margin: 48px 0;
}

/* Place the first grid item at column-line 1, and let it span 2 columns. */
.about-safeFont li:not([class^="example"]) {
    padding: 1rem;
    grid-column: 1 / span 2;
    background-color: hsl(51, 100%, 95%); /* RYB colors */
    border-radius: 30px;
}

/* Second grid item. */
[class^="example"] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    padding: 1rem;
    overflow: hidden;
    text-align: center;
    letter-spacing: -0.022em;
    color: hsl(48, 100%, 98%); /* RYB colors */
    background-color: var(--BrownOlive);
    background-image: linear-gradient(var(--WhiteSmoke) 65%, var(--BrownOlive) 61%);
    background-origin: border-box;
    -webkit-background-origin: border-box;
    border-radius: 5px;
}

/* grid items for class^="example */
.item-left{
    text-align: left;
    color: hsl(348, 57%, 10%);
    background-color: whitesmoke;
    grid-column: 1 / span 3;
}

.item-right{
    /*align-self: flex-end;*/
    text-align: right;
    color: hsl(212, 84%, 45%); /* RYB colors */
    background-color: var(--WhiteSmoke);
    grid-column: 1 / span 3;
}

.item-bottom {
    align-self: flex-end;
    text-align: center;
    color: var(--WhiteSmoke);
    background-color: hsl(348, 57%, 10%);
    grid-column: 1 / span 3;
}

/* safe fonts */
.example-arial {
    font: 400 40px/1.2 Arial, Helvetica, sans-serif;
}

.example-verdana {
    font: 400 40px/1.2 Verdana, Geneva, sans-serif;
}

.example-tahoma {
    font: 400 40px/1.2 Tahoma, "Trebuchet MS", sans-serif;
}

.example-trebuchet {
    font: 400 40px/1.2 "Trebuchet MS", Tahoma, sans-serif;
}

.example-times {
    font: 400 40px/1.2 "Times New Roman", Times, serif;
}

.example-georgia {
    font: 400 40px/1.2 Georgia, serif;
}

.example-garamond {
    font: 400 40px/1.2 Garamond,serif;
}

.example-courier {
    font: 400 40px/1.2 "Courier New", monospace;
}

.example-brushScript {
    font: 400 40px "Brush Script MT", cursive;
}

/* for web safe-fonts*/
@media (min-width: 883px) and (max-width: 960px) {
    .item-left {
        text-align: right;
    }

    .item-right {
        text-align: left;
        font-size: 35px;
    }

    .item-bottom {
        font-size: 35px;
    }
}

@media (min-width: 815px) and (max-width: 882px) {
    .about-safeFont {
        grid-template-columns: 1fr 1fr;
    }

    .about-safeFont li:not([class^="example"]){
        grid-column: 1; /* one column */ 
    }

    .item-left {
        text-align: right;
        font-size: 70px;
    }

    .item-right {
        text-align: left;
        font-size: 35px;
        padding: 10px 0 0 0;
    }

    .item-bottom {
        font-size: 50px;
    }
}

@media (min-width: 361px) and (max-width: 814px) {
    .about-safeFont {
        display: flex;
        display: -webkit-flex;
        flex-flow: column-reverse nowrap;
    }

    .about-safeFont li:not([class^="example"]){        
        grid-column: 1; /* one column */ 
        background-color: hsl(53, 29%, 95%); /* RYB colors */;
    }

    [class^="example"]{
        grid-row: 1;
    }

    .item-left {
        text-align: right;
        font-size: 70px;
    }

    .item-right {
        text-align: left;
        font-size: 35px;
        padding: 10px 0 0 0;
    }

    .item-bottom {
        font-size: 50px;
    }
}

@media (min-width: 300px) and (max-width: 370px) {
    /* web-safe-fonts */
    .about-safeFont {
        display: flex;
        display: -webkit-flex;
        flex-flow: column-reverse nowrap;
    }

    .about-safeFont li:not([class^="example"]){        
        grid-column: 1; /* one column */ 
        box-shadow: none;
        border-radius: 0;
        background-color: hsl(51, 29%, 95%); /* RYB colors */
    }

    [class^="example"]{
        grid-row: 1;
        box-shadow: none;
        padding: 0;
    }

    .item-left {
        text-align: center;
        font-size: 60px;
        padding: 10px 0 0 0;
    }

    .item-right {
        text-align: left;
        font-size: 35px;
        padding: 10px 0 0 10px;
    }

    .item-bottom {
        font-size: 50px;
        padding: 0 0 10px 0;
    }
}