body {
    /*background-image: url('texture.jpg');
      font-family: 'Dancing Script', cursive;*/
    color: #444444;
    font-size: large;
}
div.header h1 {
    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
    /*font-family: 'Great Vibes', cursive;*/
    color: #444488;
    font-size: 60px;
}

h2 {
    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
    /*font-family: 'Great Vibes', cursive;*/
    color: #444488;
}

div.content {
    max-width: 40em;
    padding-left: calc(50% - 20em);
}

div.nav {
    display: block;
    font-size: 45%;
}

div.nav ul  {
    list-style-type: none;
}

div.nav ul li {
    display: inline;
    margin: 20px;
}

div.nav ul li a {
    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
    /*font-family: 'Great Vibes', cursive;*/
    color: #444488;
    text-decoration:none;
}

div.header {
    width:100%;
    text-align:center;

    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
    /*font-family: 'Great Vibes', cursive;*/
    color: #444488;
    font-size: 40px;

    background-image: url('Brigantine_clip_art.svg');
    background-size: auto 100%;
    background-repeat: no-repeat;
}

#prev, #next {
    border-radius: 10px;
    background-color: #444488;
    color: white;
    width: 100px;
    text-align: center;
    padding: 5px;
}

#prev {
    float: left;
}

#next {
    float: right;
}

img {
    width: 100%;
}

#gallery-img {
    image-orientation: from-image;
    width: 100%;
    height: auto;
}

#gallery-controls {
    width:100%;
    height: 50px;
}

@media (max-width: 830px) {
    /* should we do something about the nav bar? */
    div.header h1 {
        font-size: inherit;
    }
}

@media (max-width: 640px) {
    .header {
        margin: 0px;
    }
    #date {
        font-size: 75%;
    }
}

@media (max-width: 560px) {
    div.header {
        font-size: 30px;
    }
}

@media (max-width: 440px) {
    div.header {
        font-size: 22px;
    }
}

input, textarea {
    border: 5px solid white;
    box-shadow:         inset 0 0 8px  rgba(0,0,0,0.1),    0 0 16px rgba(0,0,0,0.1);
    padding: 10px;
    background: rgba(255,255,255,0.5);
    margin: 0 0 10px 0;
}

input[type=submit] {
    border-radius: 10px;
    background-color: #444488;
    color: white;
    width: 100px;
    text-align: center;
    padding: 5px;
}
form {
    max-width: 600px;
}

label {
    width: 200px;
    display: block;
    float: left;
    padding: 10px;
    text-align: right;
    /*font-family: 'Great Vibes', cursive;*/
    color: #333366;
}