/*overall page setup*/

body {
    background-color: #043441;
    max-width:1150px;
    margin:auto;
    text-align: left;
    font-family:"courier", "Consolas", "MS PGothic", sans-serif;
    color: #ece8c8;
    line-height:1.1;
    height:100%;
}

* {
    box-sizing: border-box;
}

.main {
    display: flex;
    flex-direction:column;
    min-height:100vh;
    padding:1em 2em 0em 2em;
}

.content {
    flex:1;
}

.footer {
    flex-shrink:0;
    margin: auto;
    margin-top:20px;

}

.inline {
    margin-bottom:15px;
}

@font-face {
    font-family: courier;
    src: url('courier-prime-regular.ttf');

}

@font-face {
    font-family: courier;
    src: url('courier-prime-bold.ttf');
    font-weight: 900;
}

/* ANYTHING RELATED TO TEXT IS BELOW HERE */

h1 {
    font-size: 42px;
    color:#ffffed;
    margin-bottom:2px;
/*    overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show
            line-clamp: 1;
    -webkit-box-orient: vertical;*/
}

p {
    font-size: 20px;
    margin: 0px 0px 30px 0px;
}

h2 {
    font-size: 28px;
    margin-bottom:0px;
    margin-top:0px;
    color:#ffffed;
}

h3 {
    font-size:22px;
    margin:2px 0px 2px 0px;
}

b {
    color:#ffffed;
}

.image_flex_box
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1%;
    margin-bottom: 25px;
}

.art_image
{
    max-height:300px;
    border: 3px solid #ffffed;
    margin:15px;
    border-radius: 2%;
}


/*  one off tags or classes */
.center {
    text-align: center;
}

.img-center {
    display: flex;
    justify-content: center;
}

a:link {
    color: #e1536d;
    text-decoration: underline;
}

a:visited {
    color: #e1536d;
    text-decoration: none;
}


a.yellow {
    color: #ebba71;
}

a.green {
    color: #8ec379;
}

a.blue {
    color: #71beb6;
}

a.purple {
    color: #aa92cb;
}

.red {
    color: #e1536d;
}

.yellow {
    color: #ebba71;
}

.green {
    color: #8ec379;
}

.blue {
    color: #71beb6;
}

.purple {
    color: #aa92cb;
}

.caption
{
    text-align: center;
    /* without the two margins below, the text ends up not being perfectly centered. matches the margin that art_image is set to above */
    margin-left:15px;
    margin-right:15px;
    color: #ece8c8;
    max-width:300px;
}