html
{
--sitewidth: 768px;
--main-font: 1.00em 'Cinzel', serif;
--logo-font: 1.00em 'Shadows Into Light Two', serif;
--font2: 1.00em 'Arial', sans-serif;
--font3: 1.00em 'Times New Roman', Cambria, serif;

--header-footer-color: rgb(0,190,254);
--footer-height: 15px;

--img-width: 230px;//246px;
--img-width-index: 150px;
--img-width2: 492px;
--img-width3: 768px;


}

#header{ /* the # is the indicator for an id. An id can appear exactly once on a page e.g. <div id="footer">*/
background: var(--header-footer-color);
height: var(--header-height);
padding: 5px;
}
#headertext1{
font: var(--main-font);
font-size: 160%;
text-transform: uppercase;
text-align: center;
line-height:30px;
}
#headertext2{
font: var(--main-font);
font-size: 60%;
text-transform: uppercase;
text-align: center;
}

#footer
{ background: var(--header-footer-color);
height: var(--footer-height);
padding: 5px ;
}
#footertext2{
font: var(--main-font);
font-size: 60%;
text-transform: uppercase;
text-align: center;
}



#main{
margin-left: auto;
margin-right: auto;
}
#maintext1{
font: var(--font3);
font-size: 80%;
text-transform: none;
text-align: center;
line-height:15px;
}
.maintext2{
font: var(--main-font);
font-size: 80%;
text-transform: none;
text-align: left;
line-height:12px;
}

.maintext3{
font: var(--font3);
font-size: 80%;
text-transform: none;
text-align: left;
line-height:15px;
}

h1{
font-size: 320%;
text-transform: uppercase;
}

h3,h4,h5,h6{
text-transform: none;

}
h2{
font-size: 160%;
}

h3{
font-size: 135%;
}

h4{
font-size:120%;
}

h5{
font-size:100%;
}

h6{ font-size:95%;
}





.container {
display: flex;
/*flex-direction: row; */ /*column puts each red box in column*/
flex-flow:row wrap;
align-content:flex-start;
background: white;
}

.insidecontainer {
background: white;
margin:12px;
display: flex; /*inline-block causes the text size to shrink*/
flex-direction: column;/*row causes the text to be right of the image i.e. in row*/
}

.toppart {
width: 220px;//230px;//var(--imgwidth);
background: white;
}

.bottompart {
width: 220px;//230px;//var(--imgwidth);
background: white;
padding: 0px 2px 15px 2px;
color: black;
text-align: center;
overflow-wrap: anywhere;

}

.toppartindex {
width: var(--img-width-index);
background: white;
}

.bottompartindex {
width: var(--img-width-index);
background: white;
padding:0px 2px 15px 2px;
color:black;
text-align:center;
}

.bottompart2 {
width: 220px;//230px;//var(--imgwidth);
background: white;
padding:0px 2px 15px 2px;
color:black;
text-align:center;
}
.container div {
font-size: 10; /*with fixed font size, the resizing does NOT change text size*/
text-transform: none;
flex: 1;
}
img {
border-radius: 1%;
padding: 2px;
max-width: 220px;//230px;
max-height: auto;
}