/* 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("Paper.jpg");
    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;
}

.about {
    grid-area: about;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.acommodations and atractions {
    grid-area: AAA;
}

.title {
    grid-area: title;
}

.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;
}

.space {
    height: 20px;
    color: #ffffff;
}

.frog {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-areas:
        'title title title title title title title title'
        'space space space space space space space space'
        'about about about about about about about about'
        '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;
}

h3 {
    font-size: 150%;
    text-align: center;
}

img {
    max-width: 40%;
    height: auto;
    align-self: center;
}