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


/*   ----- Imports  -----  */
  /* Add fonts from the app's server 
    @font-face {                
      font-family: 'FontName';
      src: url('FontName.woff2') format('woff2');
    } 
    ...or hosted services like Google Fonts 
    @import url(//fonts.googleapis.com/css?family=Font+Name);
  */
  @import url('https://fonts.googleapis.com/css2?family=Lunasima&display=swap');
  /*font for body*/
  @import url('https://fonts.googleapis.com/css2?family=Lumanosimo&family=Lunasima&display=swap');
  /*font for headings*/
  
  /* @import 'node_modules/modern-normalize/modern-normalize.css'; */
        /* npm install modern-normalize
          Resets elements for browser consistency.  
          https://www.npmjs.com/package/modern-normalize
        */         
  
  /* Component-specific stylesheets, if any. 
    @import "component1.css";   
  */

/*   ----- Variables  -----  */
:root {
    --dark-blue: rgb(67,82,82);
    --leaf-green: rgb(130,186,114); 
    --cream: rgb(254,252, 183); 
    --cream-T: rgba(254,252, 183, 0.85); 
    --mauve: rgb(162,134,110); 
    --orange: rgb(253, 183, 105);
    --orange-T: rgba(253, 183, 105, 0.6); 
    --yellow:rgb(232,132,132); 

    /*--custom-embellishment-name:; */
  }
  
  /*  ----- Viewport ----- elements inherited by all remaining elements ----- */
  body {       /* Can alternatively define in html {} or :root {} */
   /* background-color:;
    background-image: ;
    color:;
    font-family:; /* Define with at least one font name and its related generic family name.*/
    /*margin:;
    padding:;*/
    background: url(images/vermont-sunset.jpg) ;
    background-size: cover;
    background-attachment: fixed;
    background-position: top left;
    background-repeat: no-repeat;
    font-family: Lunasima; 
    margin: 0 auto;  
    max-width: 1200px;
    padding: 0 1%; 
    color:var(--dark-blue); 
    background-color: var(--cream);

  }
  
  /*  ----- Page layout blocks -----  */
  header {background-color: var(--orange-T);
          text-align: center;
          padding-top: 5%;
          padding-bottom: 5%;
          border:10px solid; 
          border-color: var(--orange);
          line-height: 32px;
          
        }
  header img{
    justify-content: center;
  }
         
  main {color: var(--mauve); 
        background-color: var(--cream-T);   
        padding: 1% 3%;  
        
        }
  section {}
    article {
              border-bottom: 3px dashed; 
              border-color: var(--yellow)
            }
      #topic1 {}
      #topic2 {}
  div {}
  aside {}
  footer {
          background-color: var(--orange-T);
          text-align: center;
          padding-top: 5%;
          padding-bottom: 5%;
          border:10px solid; 
          border-color: var(--orange); 
          color:var(--dark-blue); 
          font-weight: bold;
  }
  
  /* ----- Anchors ----- Text links */
  a {}
  a:link {}
  a:hover {}
  a:active {}
  a:visited {}
  
  /*  ----- Navigation ----- Override text links for navigation only.  */
  nav { 
        text-align: center;
        margin-top: 10px;
        display:flex;
        flex-direction:row; 
        justify-content: center;
       }
  nav a {
          border-radius: 20%;
          background-color: var(--leaf-green);
          padding: 10px; 
          color: var(--dark-blue);
          margin:20px; 
          width: 200px;
          text-decoration: none;
          
        }

  nav a:hover { 
                background-color: var(--dark-blue);
                color: var(--cream)
              }
  nav a:visited{
                   
                }
  .local{
          text-align: center;
          margin-top: 10px;  
          display:flex; 
          flex-wrap: wrap;
          justify-content: center;
        }
  .local a{
            color:var(--mauve); 
            background-color:transparent;
            border: 3px solid; 
            border-color: var(--yellow);
            border-radius: 100px;
            text-decoration: none;
            margin: 20px; 

          }
  .local a:hover{
                  background-color: var(--leaf-green);
                  color:var(--cream); 
                  border-color:transparent ;
                } 
  .local a:visited{
                    
                  }
  
  /*  -----  Typography  ----- */
  p {}
  br {}
  ol, ul, dl {}
  li {}
  dt {}
  dd {}
  
  h1, h2, h3, h4, h5, h6 {font-family:Lumanosimo; color:var(--orange)} 
  h1 {color:var(--dark-blue);}
  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 {}
  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 {}
    output {}
    meter {}
    progress {}
    select {}
      optgroup {}
      option {}
    textarea {}
  
  /* ----- 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; 
    justify-content: center;
    border: 2px solid; 
    border-color: var(--dark-blue);
  }
  .gallery figure {
    width: 300px;
    margin:2%;
    padding:1%;
  }
  
  .gallery figcaption {
    display:block; 
    padding: 1%;
    color: var(--dark-blue)
  }
  
  .gallery img  {
      width:100%;
      margin:0.5%; 
      padding: 0.5%;
  }
  
  .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 {}