@charset "UTF-8";
/* CSS Document */


.ABC {
    background-color: grey;
    height: 6vh;
    width: 6vh;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.2rem;
    font-family: 'Brandon Grotesque Bold';
    color: white;
}

p.columns {
    color: white;
    width: 95%;
    padding-left: 10px;
    /*
    padding-right: 10px;
    padding-left: 10px;
*/
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    font-style: normal;
    /*
    margin-left: auto;
    margin-right: auto;
*/
    text-rendering: optimizeLegibility;
    word-wrap: break-word;


}

.container2 {
    height: 50vh;
    max-width: 100%;
    width: 700px;
    margin-left: auto;
    margin-right: auto;


}

.flex-left,
.flex-center,
.flex-right {
    flex: 0%;
    border: none;
    background-color: black;
    height: auto;
    margin: 0px 0px 0px 0px;
    cursor: pointer;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-left: none;
    border-right: none;

}

.flex-item-left,
.flex-item-center,
.flex-item-right {
    flex: 0%;
    border: none;
    background-color: black;
    height: auto;
    margin: 10px 0px 0px 10px;
    cursor: pointer;
}

.flex-item-center {
    margin-left: 20px;
    margin-right: 20px;
}

a.columns {
    color: paleturquoise;
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
    padding-left: 10px;
    text-decoration: underline;
}

a.columns:hover {
    color: white;
    font-weight: 400;
    font-style: italic;
    padding-left: 10px;
    text-decoration: underline;
    background-color: darkgreen;

}


/* Responsive layout - makes a one column layout (100%) instead of a two-column layout (50%) */
@media (max-width: 900px) {

    /*
    .flex-item-right,
    .flex-item-left {
        flex: 100%;
        column-count: 1;
    }
*/

    .flex-item-left,
    .flex-item-center,
    .flex-item-right {
        flex: 100%;
        /*        border: 5px solid white;*/
        background-color: black;
        padding-bottom: 10px;
        margin-top: 0px;
        height: 100%;

    }


    .flex-container {
        /*        height: 100vw;*/

    }
}