/*  ===== MOBILE styles (reside at the top and are inherited by all devices) ===== */
/*  ===== See tablet, desktop, and print @media queries at the bottom. */


/*   ----- Imports  -----  */
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&family=Raleway:ital,wght@0,300;1,900&display=swap');
  /* @import 'node_modules/modern-normalize/modern-normalize.css';  npm install modern-normalize  Resets elements for browser consistency.  https://www.npmjs.com/package/modern-normalize */         
  /* @import "component1.css";   Component-specific stylesheets, if any.   */
  /* @import url(//fonts.googleapis.com/css?family=Font+Name); Add fonts from a hosted services like Google Fonts.   */


/*   ----- Variables  -----  */
:root {
    --custom-dark-blue: #7E84F2 ;
    --custom-icon-blue: #A2D4F2 ;
    --custom-pale-blue: #80A7BF ;
    --custom-navy-blue: #5E7B8C ;
    --custom-brown: rgb(83, 0, 0);
    --custom-embellishment-name:;
  }
  
  /*  ----- Viewport ----- elements inherited by all remaining elements ----- */
  body {       /* Can alternatively define in html {}. */
    background-color:;
    background-image: url("Images/light-background.jpg") ;
    border-radius: 5px 5px 0 0;
    color:;
    font-family: 'Raleway', sans-serif; 
    font-size:1.2em;
    line-height:1.15;
    margin: 0, auto;
    max-width:100%;
    padding:2%;
  }

  /*  ----- Page layout blocks -----  */
  header {
    font-family: 'Playfair', sans-serif; 
    font-size: auto;
    background-color: lightgoldenrodyellow ;
    border-radius: 5px 5px 0 0;
    color:var(--custom-brown) ;
    height:100px;
    margin: 0 auto;
    padding: auto;
  }
  footer{
    background-color: var(--custom-navy-blue);
    color:var(--custom-brown)   ;
    margin:0 auto;
    padding:2%;
  }
  main {
    background-color: var(--custom-navy-blue);
    border-radius: 5px 5px 0 0;
    color:var(--custom-brown) ;
    margin:0 auto;
    padding:2%;
  }
  section {
    background-color: var(--custom-pale-blue);
    border-radius: 5px 5px 0 0;
    margin:0 auto;
    padding:2%;
  }
  article {
    border-top:3px dotted var(--custom-brown) ;
    margin:25px auto;
    padding:2%;
  }
    #topic1 {}
    #topic2 {}
  div {}
  aside {}
  footer {}
  
  /* ----- Anchors ----- Text links */
  a {}
  a:link {}
  a:hover {}
  a:active {}
  a:visited {}
  
  /*  ----- Navigation ----- Override text links for navigation only.  */
  nav { 
    background-color: var(--custom-navy-blue);
    text-align: center;
    margin: 0px auto -25px;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}
  
  nav a {
    background-color: var(--custom-brown) ;
    border-radius: 5px 5px 0 0;
    color: var(--custom-icon-blue);
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1;
    margin-right: 3px;
    padding: 3px 20px 5px 20px;
    text-decoration: none;
    vertical-align: middle;
  }

  nav a:hover {
    background-color: var(--custom-icon-blue);
    color:var(--custom-brown);
  }

  .local {
    background-color: var(--custom-pale-blue);
    text-align: center;
    margin: 0px auto -25px;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;  
}

  .local a {
    background-color: var(--custom-brown);
    border-radius: 5px 5px 0 0;
    color: var(--custom-icon-blue);
    font-size: 0.8em;
    font-weight: bold;
    line-height: 1;
    margin-right: 3px;
    padding: 3px 20px 5px 20px;
    text-decoration: none;
    vertical-align: middle;
  }
  .local  a:hover{
    background-color: var(--custom-icon-blue);
    color:var(--custom-brown);
  }
  
  /*  -----  Typography  ----- */
  p {}
  br {}
  ol, ul, dl {}
  li {}
  dt {}
  dd {}
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair', sans-serif; 
  } 
  h1 {
    text-align: center;
}
  h2 {
    text-align: center;

  }
  h3 {}
  h4 {}
  h5 {}
  h6 {}
  
  abbr {}
  acronym {}
  address {}
  blockquote {}
    q {}
    cite {}
  em {}
  hr {}
  mark {}
  s {}
  span {}
  strong {}
  sub {}
  sup {}
  time {}
  
  /*  ----- Coding or instructional typography ----- */
  pre {}
  code {}
  kbd {}
  samp {}
  var {}
  del {} 
  ins {}
  
  /*  ----- Table ----- */
  table {}
  caption {}
  thead {}
  tbody {}
  tfoot {}
  tr {}
    tr:nth-child(even) {}
  th {}
  td {}
    td:nth-child(1) {}
  colgroup {}
  data {}
  datalist {}
  
  
  /*  ----- Form ----- */
  form {}
  fieldset {}
    legend {}
  label {}
  button {}
  input {}
  select {}
    optgroup {}
    option {}
  textarea {}
  output {}
  meter {}
  progress {}
  
  
  /* ----- Media ----- */
    figure {

  }
    figcaption {

    }

    figure img {

    }
  svg {}
  picture {}
    source {}
  iframe {}
  video {}
  audio {}
  embed {}
  object {}
  
  /*  ----- Classes for alignment, positioning, widths, grids, embellishments, and animation -----  */
  .gallery {
    display:flex;
    flex-flow: row wrap;
  }

  .gallery figure{
    display:flex;
    flex-flow: row wrap;
    width: 320px;
    margin:.75%;
    padding:0;
    border:3px solid var(--custom-navy-blue);
  }

  .gallery img{
    width: 100%;
  }
  
  .gallery figcaption{
    display:block;
    padding:3px;
  }



  .floatright {}
  .floatleft {}
  .center-middle {}
  
  .ten {}
  .twenty {}
  .thirty {}
  .forty {}
  .fifty {}
  .sixty {}
  .seventy {}
  .eighty {}
  
  .radius {}
  .circle {}
  .boxshadow {}
  .tshadow {} 
  .gradient {}
  .shape {}
  
  @keyframes App-logo {}
  
  /*   ===== TABLET  media query overrides mobile styles ===== */
  @media all and (min-width: 600px) {}
  
  /*   ===== DESKTOP  media query overrides mobile and tablet styles ===== */
  @media all and (min-width: 1080px) {}
  
  /*   ===== PRINT  media query overrides previous styles =====  */
  @media print {}