body
{
background-color: silver;
font-family: Verdana;
}

H1
{
text-align: center;
color: black;
font-weight: normal;
font-size: 120%;
background-image: url(bannerback.jpg)
}

.logo
{
float: left;
vertical-align: middle;
}

.mosaic
{
column-count: 3;
}

.tile
{
width: 90%;
border: 4px solid white;
border-radius: 10px;
text-align: center;
vertical-align: bottom;
background-repeat: no-repeat;
background-size: 100%;
color: white;
margin-top: 0;
padding: 90% 0 0 0;
background-color: grey;
}

@media only screen and (min-width: 701px) {
  .popmenu { display: block; position: static} 
  .dropbutton {display: none; }
  .dropcontent {display: block; position: static}
  .tile {font-size: 150%}
}

@media only screen and (max-width: 700px) {
  .popmenu { display: blcok; position: relative} 
  .dropbutton {display: block; position: absolute}
  .dropcontent {display: none; position: absolute;
    border: 4px solid white;
    }
}

.popmenu
{
color: black;
float: left;
margin-right: 20px
}

.popmenu:hover .dropcontent
{
display: block;
}

.dropbutton
{
top: -35px;
left: 50px;
}

.dropcontent
{
min-width: 150px;
background: rgba(200,200,200,0.85);
top: -16;
left: 20px;
z-index: 1;
border-radius: 10px;
}

.popmenu a
{
color: black;
text-decoration: none;
line-height: 70%;
}

.mosaic a
{
text-decoration: none;
color: white;
}