@font-face {
    font-family: "Breughel";
    font-style: normal; 
    src:
      url("/fonts/breughel-roman.woff2") format("woff2");
  }

  @font-face {
    font-family: "Breughel";
    font-style: italic; 
    src:
      url("/fonts/breughel-italic.woff2") format("woff2");
  }

body {
    padding: 0; 
    margin: 10px; 
    color: rgb(211, 216, 218); 
    background: #000f2d; 
    font-family: 'Breughel', 'Georgia', serif; 
    line-height: 1.4; 
    font-size: 16px; 
}



a {
    color: inherit; 
    text-decoration: none; 
}

a:hover {
    color: rgb(195, 0, 0); 
}

ul {
    padding: 0; 
}

ul li {
    list-style: none; 
}

#dsp-wordmark {
    max-width: 150px; 
}

#dsp-logo {
    max-width: 25px; 
}

@media (min-width: 600px) {
    .container {
        margin: 20px 30px; 
    }
}


/* Navigation -------------------------------- */ 
nav {
    font-size: 12px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

nav ul {
    padding: 0; 
    display: flex; 
    flex-direction: row; 
    gap: 30px 
}

nav ul li {
    list-style: none; 
    color: rgb(195, 0, 0); 
}

nav ul li a {
    color: rgb(211, 216, 218); 
}

nav ul li a:hover {
    color: rgb(195, 0, 0); 
}



/* ----------------------------------------- */ 

.book-container {
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    gap: 20px; 
}

h1 {
    font-size: inherit; 
    font-weight: normal; 
    font-size: 20px; 
    margin: 0; 
}

.book-container .book-image {
    max-width: 250px; 
}

picture img {
    max-width: 100%; 
}

.book-description {
    max-width: 500px; 
}

.byline {
    margin-top: 0; 
    font-size: 14px; 
}

.button-container {
    margin-top: 15px; 
    margin-bottom: 10px; 
}

.buy-button {
    padding: 8px 15px; 
    border: 1px solid rgb(65, 84, 108); 
}

/* ----------------------------------------- */ 
.about {
    max-width: 500px; 
}


.book-details, 
.colophon {
    margin-top: 14px; 
    font-size: 14px; 
}

.book-details p, 
.colophon p {
    padding: 0; 
    margin: 0; 
}

.hidden {
    display: none; 
}


.colophon {
    margin-bottom: 14px; 
}

.email-list {
    font-size: 14px; 
}

input {
    font-family: inherit; 
    color: inherit; 
    background: inherit; 
    border: 0; 
    font-size: inherit; 
}

input[type="email"] {
    padding: 8px; 
    /* background-color: rgb(0, 32, 111);  */
    border-bottom: 1px solid rgb(65, 84, 108); 
}

input[type="submit"] {
    padding: 8px 15px; 
    border: 1px solid rgb(65, 84, 108); 
}



.portal {
    margin-top: 80px; 
    max-width: 500px; 
}

#portal-image {
    max-width: 200px; 
}

#portal-image-caption {
    font-size: 12px; 
}

footer {
    margin-top: 100px; 
    max-width: 500px; 
}