/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
body {
  line-height: 1;
  font-family: "sofia-pro", sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: rgb(0, 6, 41);
  z-index: 1000;
  position: sticky;
  top: 0;
  margin-top: -31px;
}

.topnav #myLinks {
  display: none;
  float: center;
}

.topnav a {
  float: left;
  color: white;
  padding: 20px 20px;
  text-decoration: none;
  font-size: 25px;
  text-align: center;
}

.topnav a.icon {
  float: right;
}

.topnav a:hover {
  background-color: #88d1e2;
  color: rgb(24, 36, 47);
}

.active {
  background-color: #6c62b9;
  color: rgb(255, 255, 255);
}

.logo {
  height: 60px;
  width: auto;
}

.homeimage {
  height: 300px;
  width: 400px;
  background-image: url("CambridgeHouseImage.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 200px;
  font-size: 350%;
  font-weight: bold;
  margin-bottom: 10px;
  color: rgb(255, 255, 255);
  text-shadow: 4px 4px 6px #000000;
  align-self: center;
  text-align: center;
  margin-top: -6px;
}

.maindish {
  grid-area: maindish;
}

.filler {
  grid-area: filler;
}

.Copyright {
  grid-area: Copyright;
}

.title {
  grid-area: title;
}

.intro {
  grid-area: intro;
}

.button {
  grid-area: button;
  height: 40px;
  color: rgb(0, 0, 0);
  transition-duration: 0.4s;
  border-radius: 10px;
  margin-top: 10px;
}

.footer {
  grid-area: footer;
  width: 100%;
  height: auto;
  background-color: rgb(10, 0, 43);
  color: white;
  text-align: center;
  padding-bottom: 20px;
  color: rgb(225, 225, 234);
  padding-top: 20px;
  display: grid;
  grid-template-areas:
    'filler Copyright maindish';
  text-align: center;
  margin-top: 10px;
}

.blank1 {
  grid-area: blank1;
  color: white;
}

.blank2 {
  grid-area: blank2;
  color: white;
}

.blank {
  grid-area: blank;
  color: white;
}

.map {
  grid-area: map;
}

.space1 {
  grid-area: space1;
  color: white;
}

.space2 {
  grid-area: space2;
  color: white;
}

.frog {
  width: 100%;
  height: auto;
  display: grid;
  grid-template-areas:
    'title title title title title title title title'
    'space1 space1 space1 intro intro space2 space2 space2'
    'blank blank blank blank blank blank blank blank'
    'map map map map map map map map'
    'blank1 blank1 blank1 button button blank2 blank2 blank2'
    'footer footer footer footer footer footer  footer footer';
  text-align: center;
}

button:hover {
  background-color: #04AA6D;
  /* Green */
  color: white;
  border-radius: 100px;

}

h2 {
  font-size: 200%;
  text-align: center;
}

button {
  background-color: #88d1e2;
  color: rgb(24, 36, 47);
}

.links:hover {
  color: #88d1e2;
}