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


/*   ----- Imports  -----  */
  /* @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.   */
  @import url('https://fonts.googleapis.com/css2?family=Lumanosimo&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');


/*   ----- Variables  -----  */
:root {
    --alphaSky:rgba(195, 217, 236, 0.9);
    --sky:#C3D9EC;
    --skyGrey:#5c7992;
    --lime:rgb(113, 139, 8);
    --alphaLime:rgba(113, 139, 8, 0.3);
    --blush:#F2AB9B;
    --murkyBrown:#965E04;
    --dirtyRed:#4D1816;
    --custom-embellishment-name:;
  }
  
  /*  ----- Viewport ----- elements inherited by all remaining elements ----- */
  body {       /* Can alternatively define in html {}. */
    background-color:;
    background-image: url(images/temple.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: top left;
    color: var(--dirtyRed);
    font-family: 'Lumanosimo', cursive; /* Define with at least one font name and its related generic family name.*/

    margin: 0 auto;
    padding: 0;
    max-width: 1000px;
    line-height: 1.5;

    text-decoration-color: ;
  }
  
  /*  ----- Page layout blocks -----  */
  header {
    color: var(--blush);
    text-align: center;
    background-color: var(--lime);
    padding: 1.5%;
    border-left: 5px solid var(--alphaSky);
    border-right: 5px solid var(--alphaSky);
  }
  header img{
    width: 32px;
    padding: 0;
    box-shadow: 1.5px 1.5px 1.5px 1.5px var(--sky);
  }
  main {
    background-color: var(--alphaSky);
    padding: 2% 6%;
    border-bottom: 2px solid var(--skyGrey);
  }
  section {}
  article {
    border-top: 3px solid var(--lime);
  }
    #topic1 {}
    #topic2 {}
  div {}
  aside {}
  footer {
    color: var(--blush);
    text-align: center;
    background-color: var(--lime);
    padding: 1%;
    border-left: 5px solid var(--alphaSky);
    border-right: 5px solid var(--alphaSky);
  }
  
  /* ----- Anchors ----- Text links */
  a {}
  a:link {}
  a:hover {}
  a:active {}
  a:visited {}
  
  /*  ----- Navigation ----- Override text links for navigation only.  */
  nav {
    text-align: center;
    text-decoration: none;
  }
  
  .local {
    text-decoration: none;
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
  }
  .local a {
    background-color: var(--blush);
    border-radius: 0;
    margin-right: 6px;
    border-right: 2px solid var(--dirtyRed);
  }
  .local a:hover {
    background-color: var(--sky);
    color: var(--dirtyRed);
    box-shadow: 3px 3px 3px 3px var(--dirtyRed);
  }
  nav a {
    text-decoration: none;
    color: var(--sky);
    background-color: var(--murkyBrown);
    border-bottom: 2px solid var(--dirtyRed);
    border-radius: 8px;
    font-weight: bold;
    margin-right: 3px;
    padding: 5px 20px 5px 20px;
  }
  nav a:hover {
    text-decoration: none;
    background-color: var(--skyGrey);
  }
  
  /*  -----  Typography  ----- */
  #find, #visit1 {
    color: var(--lime);
    font-weight: bold;
  }
  p {}
  br {}
  ol, ul, dl {}
  li {}
  dt {}
  dd {}
  
  h1, h2, h3, h4, h5, h6 {font-family: 'Acme', sans-serif;} 
  h1 {}
  h2 {}
  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 {
    border-collapse: collapse;
    width: 100%;
  }

  caption {
    padding: 2% 0 2% 0;
    border-top: solid var(--murkyBrown);
    border-bottom: solid var(--murkyBrown);
  }

  #producttable {
  }

  thead {}
  tbody {}
  tfoot {}
  tr {
    border-bottom: solid 2px var(--skyGrey);
  }
    tr:nth-child(even) {}
  th {
    background-color: var(--alphaLime);
  }
  td {
    background-color: var(--sky);
  }
    td:nth-child(1) {}
  colgroup {}
  data {}
  datalist {}
  
  
  /*  ----- Form ----- */
  button, input, textarea, select {
    font-family: inherit;
  }
  input, textarea {
    font-size: 105%;
  }

  form {
    display: flex;
  }
  fieldset {
    border: 3px solid var(--murkyBrown);
    margin-top: 4%;
    margin-bottom: 4%;
    padding: 1%;
  }
    legend {
      border: 5px double var(--murkyBrown);
      color: var(--murkyBrown);
      font-weight: bolder;
    }
  label {
    margin-top: 2.5%;
    display: block;
    color: var(--lime);
    font-size: 95%;
    font-weight: bold;
  }
  button {
    border: ridge;
    padding: 3%;
    font-size: 110%;
    font-weight: bold;
    background-color: var(--blush);
  }
  button:hover {
    background-color: var(--sky);
    color: var(--dirtyRed);
    box-shadow: 3px 3px 3px 3px var(--dirtyRed);
  }

  #quantity {
    margin: 5% 0% 5% 0%;
    width: 120px;
    height: 30px;
  }

  #fullname, #emailaddress {
    padding: 0.7% 3% 0.7% 3%;
    width: 80%;
  }
  input {  
  }
  select {
    font-size: 120%;
    border: 3px solid var(--murkyBrown);
    padding: 1.5% 0.5% 1.5% 0.5%;
    color: var(--skyGrey);
    font-weight: bolder;
  }
    optgroup {}
    option {}
  textarea {
    padding: 0.7% 3% 0.7% 3%;
    width: 80%;
    height: 250px;
  }

  *:required {
    border: 3px solid red;
  }

  *::placeholder {
    color: var(--dirtyRed);
    font-size: 90%;
  }

  label.required::after {
    content: " *";
    color: red;
  }

  :focus {
    background-color: var(--alphaLime);
  }

  output {}
  meter {}
  progress {}
  
  
  /* ----- Media ----- */
  .gallery {
    display: flex;
    flex-flow: row wrap;
  }
  .gallery figure {
    border: 1px solid var(--skyGrey);
    border-right: 2px solid var(--skyGrey);
    border-bottom: 2px solid var(--skyGrey);
    box-shadow: 0 5px 5px 0 var(--skyGrey);
    width: 40%;
  }
  .gallery figcaption {
    display: flex;
    justify-content: center;
    align-items: center;
    
  }
  figure {}
    figcaption {}
    figure img {}
  svg {}
  picture {}
    source {}
  iframe {}
  video {}
  audio {}
  embed {}
  object {}
  
  /*  ----- Classes for alignment, positioning, widths, grids, embellishments, and animation -----  */
  .gallery {}
  
  .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 {}