:root {
  --bg-color1: #7FBD32;/* green*/
  --bg-color2: #E7F7D4;/*light green*/
  --bg-color3: #448D76;/*light blue*/
  --font-color1: #091834;/*black*/
   --font-color2: #1258DC;/*blue*/
  --font-color3: WHITE;
--fonts: "Roboto", Geneva, sans-serif
}

@font-face {
  font-family: myFirstFont;
  src: url(Roboto-Regular.ttf);
 }
@font-face {
  font-family: myFirstFont;
  src: url(Roboto-Bold.ttf);
  font-weight: bold;
}
@font-face {
  font-family: myFirstFont;
  src: url(Roboto-Italic.ttf);
  font-style: italic;
}



h1 {color: green;
color: var(--font-color1);
text-align: left;
font-family: var(--fonts);
line-height: 110%;
font-size: 20px;
}

h2 {color: var(--font-color1);
background-color: var( --bg-color1);
text-decoration: none;
text-align: center;
font-family: var(--fonts);
font-weight: bold;
line-height: 110%;
font-size: 23px;
}

div.artsp {
width: 620px;
height: auto;
padding: 5px 5px;
border: 1px solid var(--bg-color2);
margin: 3px 3px;
text-align: center;
line-height: 120%;
background-color: var( --bg-color2);
color: var(--font-color1);
font-family: var(--fonts);
font-size: 23px;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 0px black;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 9px;
}



span.sp {
  display: inline-block;
  width: 200px;
  height: 100px;
  padding: 5px;
 border: 5px solid var(--bg-color2);
  background-color: mint cream ; 
border-radius: 9px;
text-align: center;
font-family: var(--fonts);
font-size: 13px;
font-weight: bold;
color: black;
text-shadow: #fff 0px 0px 1px,   #fff 0px 0px 1px,   #fff 0px 0px 1px,
             #fff 0px 0px 1px,   #fff 0px 0px 1px,   #fff 0px 0px 1px;
text-decoration: none;
 vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

span.sp2 {
  display: inline-block;
  width: 200px;
  height: 50px;
  padding: 5px;
 border: 5px solid var(--bg-color2);
  background-color: var(--bg-color2); 
border-radius: 9px;
text-align: center;
font-family: var(--fonts);
font-size: 13px;
font-weight: normal;
color: black;

text-decoration: none;
 vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

div.polaroid {
  display: block;
margin-left: auto;
margin-right: auto;
max-width: 80%;
height: auto;
padding: 0px 0px;
border-style: none;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 5px;
border-radius: 0px;
}

div.container {
  text-align: center;
margin-top: -10px;
margin-botom: 10px;
font-size: 12px;
line-height: 110%;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 92%;
height: auto;
  padding: 0px 0px;
}

a.main2:link, a.main2:visited {
color: Black;
color: var(--font-color1);
font-family: var(--fonts);
font-size: 18px;
text-align: justify;
text-decoration: none;
font-weight: bold;
text-shadow: 0px 0px black;
}
a.main2:hover, a.main2:active {
color: white;
font-family: var(--fonts);
background-color: rgb(70, 70, 70);
text-shadow: 1px 1px Gray;
}