@import url('https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&family=Averia+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Mansalva&display=swap');
<style>
/* reset */ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* new stuff below */
    .flex-container {display:flex; flex-flow:row wrap; justify-content:space-around; align-items:}
    .flex-item {background:#a6c48a; padding:2.5px; width:190px; height:110px; margin-top:10px; line-height:100px; color:#fff; font-family:"Mansalva", serif; font-weight:normal; font-size:1.5em; text-align:center; border-radius: 25px;} 
    body {background-color:#fbf7e9;}
    a {color:#2c363f; font-size:1.25em;}
    h1 {font-family:"Averia Libre", sans-serif; font-size:2.75em; color:#2c363f; margin:1em; border-bottom:6px dotted #a6c48a; text-align: left;}
    .background {border:#dd9787; margin:1em; border-radius:25px; padding:1em; float:right;}
    h2, h3 {font-family:"Averia Libre", sans-serif; margin:1em; color:#678d58;}
    h3 {font-size:1.5em; text-indent:inherit;}
    h2 {font-size:2em;}
    p {font-family:"Amaranth", sans-serif; color:#2c363f; padding:2.5px; margin:2em; font-size:1.2em;line-height: 1.8; text-align: center;}
    ul {display:inline-block; margin:1em;} 
    li {margin:1em; font-family:"Averia Libre", sans-serif;font-size:1em; color:#678d58;}
    .button {background:#2c363f; padding:5px; width:120px; height:100px; margin-top:10px; color:#a6c48a; font-family:"Amaranth", sans-serif; font-weight:normal; font-size:1em; text-align:center; border-radius: 25px;}
    img {margin:.5em; border:5px solid #678d58; padding:.2em; float:right; max-width:100%;
    height: auto;}
    video {display: block; margin-left: auto;margin-right: auto; width: 50%; height:auto; padding-bottom:.5em;}
    label {display:block; padding:.25em; font-size:1.25em;}
    .FormList label {display:inline; padding:.5em; font-size:1.25em;}
    .flex-container > div {width: 100%; margin: 10px;line-height: 75px; display:flex; flex-flow:row wrap; justify-content:space-evenly;}
    div.desc {padding: 15px;text-align: center; font-family:"Mansalva", serif; color:#2c363f; display:inline-block;}
    div.gallery {margin: 5px; float: left; width: 180px; padding:.2em;}
    div.gallery img {width: 100%; height: auto;}
    div.desc {padding: 15px; text-align: center;}
    * {box-sizing: border-box;}
    .responsive {padding: 0 6px;float: left; width: 25%;}
    @media only screen and (max-width: 700px) {.responsive {width: 50%; margin: 6px 0; align-content: center}}
    @media only screen and (max-width: 500px) {.responsive {width: 100%;} .flex-item {display:block; font-size:1.25em; border-radius: 50px}}
    @media screen and (max-width:1000px){div {font-size:1em;} h1 {font-size:2.5em;}}
    @media screen and (max-width:600px){div {font-size:.5em;} img {display:none;}} 
    .clearfix:after {content: ""; display: table; clear: both;}
    div.photo {float:left; width:20%; height:auto; margin-left:1em;} 
    h4 {font-family:"Mansalva",serif; color: #2c363f; font-size:2.5em; text-align:center;}

</style>