@-ms-viewport{
  width: device-width;
}

* {
    box-sizing: border-box;
}


#dog-portraits {
    max-width: 65ex;
    min-width: 320px;
    display: block;
    margin: auto;
    padding: 0 0.5em 0.5em;
}


#dog-portraits h1 {
    font-weight: normal;
    text-align: center;
}

#dog-portraits h2 {
    font-size: 1.1em;
    font-weight: normal;
    text-align: center;
}

#dog-portraits figure {
    padding: 0.75em;
    margin: 1.5em auto;
    background: #f5f5ff;
    border: solid 1px #e9e9ff;
    display: block;
}

#dog-portraits figure img {
    border: solid 1px #e9e9ff;
}

#dog-portraits figure.lucy {
    width: 60%;
}

#dog-portraits figcaption {
    padding: 0.8em 0 0.4em;
}

footer {
    margin: 0 auto;
    padding-bottom: 0.3em;
}

footer a {
    display: block;
    text-align: center;
}

.disclaimer {
    font-size: 9pt;
    font-weight: bold;
    text-align: center;
    padding: 0.3em 0 0;
    margin: 0;
    font-family: sans-serif;
}

#site-nav a {
    font-size: 8pt;
    color: #da4e04;
    font-weight: bold;
    text-decoration: none;
    padding: 0.6em;
    display: inline-block;
}

#site-nav a.active {
    text-decoration: underline;
}

#site-nav:hover a.active {
    text-decoration: none;
}

#site-nav:hover a:hover {
    text-decoration: underline;
}


#site-nav {
    font-family: sans-serif;
    font-size: 0.9em;
    transform: scale(1.1, 1);
    letter-spacing: 1.1;
    width: 90%;
    margin: auto;
    text-align: center;
}

@media only screen and (max-width: 480px) {
    #dog-portraits h1 {
        font-size: 10vw;
    }
    #dog-portraits heading p {
        width: 60%;
        min-width: 10ex;
    }
    #dot-portraits p {
        text-align: center;
    }
    #dog-portraits figure.lucy {
        width: auto;
    }
    .hidden-mobile {
        display: none;
    }
}

@media only screen and (min-width: 481px) {
    .hidden-desktop {
        display: none;
    }
}