body{
    background-color: #bdaec5;
    margin: 0;
}

header {
    background-color: #bdaec5;
    text-align: center;
    padding-right: 100%;
    display: inline;
}

h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 56px;
    margin-top: 0.2em;
    padding-bottom: 0.2em;
    box-shadow: 0 5px 0 #785788;
}

h1 a {
    text-decoration: none;
    color: black;
}

h1 a:visited {
    text-decoration: none;
    color: black;
}

h1 a:hover {
    text-decoration: none;
    color: white;
    transition: .2s color;
}

.grid1 {
    display: grid;
    grid-template-columns: auto 20vw 20vw 20vw 20vw auto;
    grid-template-rows: 8vw 30vw;
    grid-gap: 20px;
    padding-top: 0;
    padding-bottom: 3em;
    color: #f1f1f1;
}

.grid1 > div {
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-size: 1.5vw;
}

.grid1 > div > img {
    width: 100%;
    height: 100%;
}

.gridText {
    grid-column: 2 / 6;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
}

.imageTextDiv {
    margin: 0;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    color: #f1f1f1;
}

.imageTextDiv a {
    text-decoration: none;
    color: #f1f1f1;
}

.imageTextDiv a:visited {
    text-decoration: none;
    color: #f1f1f1;
}

.imageTextDiv a:hover {
    text-decoration: none;
    color: #785788;
    transition: .2s color;
}

.grid1 > div > p {
    padding-left: 2vw;
    padding-right: 2vw;
}

.gridImage a img {
    width: 100%;
    height: 100%;
}

p a {
    text-decoration: none;
    color: black;
}

p a:visited {
    text-decoration: none;
    color: black;
}

p a:hover {
    text-decoration: none;
    color: white;
    transition: .2s color;
}

.footnote {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    font-size: 1em;
}

@media only screen and (orientation: portrait)
{
    h1 {
        font-family: 'Dancing Script', cursive;
        font-size: 8vw;
        margin-top: 0;
        padding-left: 0;
    }

    .grid1 {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 0 auto 0 0 auto auto auto auto 0;
        grid-gap: 10px;
        padding: 0em 5em 1em;
        color: #f1f1f1;
    }

    .grid1 > div {
        text-align: left;
        font-family: 'Raleway', sans-serif;
        font-size: 3.5vw;
    }

    .gridText {
        grid-column: 1 / 1;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.7);
    }

    .gridImage a img {
        padding-bottom: 0;
        width: 100%;
        height: 100%;
    }

    .imageTextDiv {
        font-size: 2em;
        padding: 0 10vw 15px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -200%);
    }

    .footnote {
        font-family: 'Raleway', sans-serif;
        text-align: center;
        font-size: 2em;
    }
}