@import url('https://fonts.googleapis.com/css2?family=Almendra+SC&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montaga&display=swap');


/* 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 */

h1 {
 font-family: "Almendra SC", serif; font-weight: bold;
        font-size: 3.5rem; text-align: center;
        color: tomato; margin-bottom: 10px;}

h2 {font-family: "Montaga", serif;  font-weight: bold; font-size: 1.9rem; color: lightcoral; margin-bottom: 15px; margin-top: 10px;}
h3 {font-family: "Montaga", serif;  font-weight: bold; font-size: 1.8rem; color: lightcoral;}

body {background-color: maroon;} 

p {font-family: "Montaga", serif; line-height: 1.8; margin-bottom: 25px; margin-top: 5px;}


ul { font-family: "Montaga", serif;
  background: #800020;
  padding: 20px;}


ul li { font-family: "Montaga", serif;
  background: #eee;
  color: black;
  margin: 5px;}


main {width:80%; margin:auto; padding:1rem;
        background: #eee;}
        label {display: block}
        .FormList label {display: inline;}
        .required {color:red; font-style: italic;
        font-size: .85em;}
        
.row {
  
  display: flex; flex-wrap: wrap; padding: 0 4px;}

.column { flex: 50%; padding: 0 4px;}

.column img { margin-top: 8px; vertical-align: middle;}

img { border: 1px solid #ddd; border-radius: 4px; padding: 5px; width: 300px; 
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3.3%;
  background-color: goldenrod;
  color: black;
  text-align: left;
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
}
.grid > div {
background: #A95C68;
padding: 1.5rem;
border-radius: 1rem;
line-height: 1.3;
}


 @media only screen and (max-width: 700px) {
        h1, h2, h3 {font-size:1.6rem;} }

    
@media screen and (max-width: 600px) {
    .column { width: 100%;} }