*{  box-sizing: border-box; font-size: 30px; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; font-style: italic; }
body{background-image: url("../HG2.jpg"); background-repeat: no-repeat; background-attachment: fixed; color: darkblue;} 

.flex-container1 {  display: flex;  flex-direction: row;   background-color: transparent; justify-content: flex-end; align-items: center; padding-top: 10px; padding-right: 100px;}
.flex-container1>div { text-align: center; font-size: 0.8em; padding-right: 25px; }

.flex-container2 {  display: flex;  flex-direction: row;   background-color: transparent; justify-content: flex-start; align-items: center; padding-top: 5px; padding-left: 150px;}
.flex-container2>div { text-align: center; font-size: 1.75em; font-weight: bold;}

.flex-container3 {  display: flex;  flex-direction: row;   background-color: transparent; justify-content: center; align-items: center; padding-top: 115px;}
.flex-container3>div { text-align: center; font-size: 1.25em; }

.container {
  display: flex;
  justify-content:  center;
  margin-top: 25px;
}

.container img {
  width: 200px;
  height: auto;
  padding-right: 35px;
  padding-left: 10px;
 
}

.container a{
  
  font-size: 24px;
  text-align: center;
  text-decoration: none;
  color: darkgreen;
}

/* visited link */
a:visited {
  color: darkgreen;
}

/* mouse over link */
a:hover {
  color: red;
}

/* selected link */
a:active {
  color: royalblue;
}

 
.example {
  padding: 20px;
  color: white;
}

/* Small devices (portrait tablets and large phones, 100px and up) */
@media only screen and (min-width: 100px) {
   .flex-container1 div{display: none;}
   .flex-container2 div{display: none;}
  .flex-container3 div{display: none;}
  .container img {display: none;} 
  .container  a{display: none;} 
  .example {display: block; color: darkblue}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 1040px) {
  .flex-container1{padding-right: 15px; font-size: 0.7em;}
  .flex-container1 div{display: block;}

  .flex-container2 {padding-left: 50px; font-size: 0.5em;}
  .flex-container2 div{display: block;}

  .flex-container3 {padding-top: 50px;}
  .flex-container3 div{display: block;}
  .container img {display: block;} 
  .container  a{display: block} 
  .example { display: none;}
  
} 









/* Extra large devices (large laptops and desktops, 1200px and up)*/
@media only screen and (min-width: 1200px) {
   .flex-container1 div{display: block;}
   .flex-container2 div{display: block;}
  .flex-container3 div{display: block;}
  .container img {display: block;} 
  .container  a{display: block} 
  .example { display: none;}
}