html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-family: sans-serif;
    line-height: 1.10;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

b,
strong {
    font-weight: inherit;
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

:root {
    --color-primary: #222;
    --color-secondary: #8f834f;
    --color-bg: #fff;
    --color-bg-secondary: #f7f7f7;
    --color-text: #222;
    --color-border: rgb(0 0 0/6%);
    --font-family-base: InterVariable, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --font-family-heading: var(--font-family-base);
    --z-header: 10;

}

html {
    font-family: var(--font-family-base);
    font-size: 62.5%
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.8rem;
    line-height: 1.618;
    margin: auto;
    min-height: 100vh;
}

.letter-head
{
    margin: auto;
    width: 90%;
    max-width: 800px;   
}
.text-card {
    margin: auto;
    width: 90%;
    max-width: 800px; 
}
.grid-card {
    margin: auto;
    width: 90%;
    max-width: 1100px; 
}
.bottom-spacer {
      margin-bottom: 70px;  
}

.spacer {
    margin-bottom: 30px;  
}


.block {
    margin: auto;
    height: 28px;
    width: 100%;
    background-image: linear-gradient(to right, black, #746c48);
    display: flex;
    align-items: center;
    padding-left: 12px;
}

.block-link {
    color: #D4AF37;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.block-link:hover {
    color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    word-wrap: break-word;
    font-family: var(--font-family-heading);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    margin-top: 3rem;
    overflow-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-word
}

h1 {
    font-size: 2.35em
}

h2 {
    font-size: 2em
}

h3 {
    font-size: 1.75em
}

h4 {
    font-size: 1.5em
}

h5 {
    font-size: 1.25em
}

h6 {
    font-size: 1em
}

p {
    margin-bottom: 2.5rem;
    margin-top: 0
}

small,
sub,
sup {
    font-size: 75%
}

hr {
    border-color: var(--color-border)
}

a {
    text-decoration: none;
}

a:hover {
    color: var(--color-secondary)
}
a {
    color: var(--color-primary);
    text-decoration: underline
}

ul {
    margin-bottom: 2.5rem;
    margin-top: 0;
    padding-left: 1.4em
}

li {
    margin-bottom: .4em
}

pre,
video {
    margin-bottom: 2.5rem;
    margin-top: 0
}

pre {
    display: block;
    overflow-x: auto;
    padding: 1em
}

code,
pre {
    background-color: var(--color-bg-secondary)
}

code {
    font-size: .9em;
    padding: 0 .5em;
    white-space: pre-wrap
}

pre>code {
    background-color: transparent;
    padding: 0;
    white-space: pre
}

iframe {
    width: 100%; 
    height: 320px;
    border: 2px solid #333; 
    border-radius: 10px;
    margin: 0;
    margin-top: 8px;
    margin-bottom: 15px;
    overflow-x: scroll;
  }

  .divider {
    margin: 8px;
    border: none;
    height: 5px;
    max-width: 1200px;
    width: 95%;
    background-image: linear-gradient(to right,transparent, #746c48, black, #746c48, transparent);
  }

  .button-link {
    display: inline-block;
    padding: 5px 25px;
    margin: 0px;
    margin-bottom: 18px;
    background-color: #D4AF37;
    color: black;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.button-link:hover {
    color: #D4AF37;
    background-color: rgb(0 0 0/80%);
}

.logo-outer {
    width: 8em;
    height: 8em;
    background-color: black;
    padding: 0.85em;
}
.logo-inner {
    word-break: break-word;
    text-align: center;
    font-size: 1.35em;
    letter-spacing: .25em;
    line-height: 1.25em;
    font-weight: 450;
    padding: 1em 0.25em;
    color:  #746c48;
    margin: 0;
    border: 3px solid #746c48;
}

.photo-circle {
    border-radius: 25%
}

.image-row {
    display: flex;          
    justify-content: center; 
    align-items: center;    
    flex-wrap: wrap;  
    margin-top: 26px;       
  }

  table td, table th {
    padding-left: 10px; 
    padding-right: 10px; 
  }

  td.top-align {
    vertical-align: top;
  }

  td.bottom-align {
    vertical-align: bottom;
  }

  .banner {
    display: flex;
    justify-content: center; 
    align-items: center;
    height: 218px; 
  }

  .centered-button {
    display: flex;
    justify-content: center; 
    align-items: center;
  }

  .responsive-table {
      table-layout: fixed;
      width: 100%;
  }

  .responsive-table td {
      overflow: hidden;
  }

  @media screen and (max-width: 800px) {
    .mobile-resize {
        width: 100%;
        height: auto;
      }

      .banner {
        display: flex;
        justify-content: center; 
        align-items: center;
        height: 130px; 
      }
  }

@media screen and (max-width: 700px) {

    .responsive-table, .responsive-table thead, .responsive-table tbody, .responsive-table th, .responsive-table td, .responsive-table tr {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
      }
      
      .responsive-table thead {
        display: none; 
      }
      
      .responsive-table td {
        margin-bottom: 10px;
        padding: 5px;
        border-bottom: 1px solid #ddd;
      }

}

@media screen and (max-width: 600px) {

    .text-card,
    .letter-head{
        margin: 5%;
        width: 92%;
    }
    iframe{
        height: 435px; 
    }

}

@media screen and (max-width: 380px) {

    iframe{
        height: 321px; 
    }

}

/*
@media screen and (max-width: 380px) {

    iframe{
        height: 272px; 
    }

}*/