/*  ===== 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.   */



@font-face {
    font-family: "Playpen Sans";
    src: url(/fonts/Playpen_Sans/PlaypenSans-VariableFont_wght.ttf);
}

@font-face {
    font-family: "kanit";
    src: url(/fonts/Kanit/Kanit-Medium.ttf);
}

/*   ----- Variables  -----  */
:root {
    --water-gray:#7E807D;
    --cloud-white:#E6E6F2;
    --tree-dark-green:#1F251C;
    --tree-light-green: rgba(88,91,47,.7);
    --rocks:#6D5A3F;
  }
  
  /*  ----- Viewport ----- elements inherited by all remaining elements ----- */
  body {       /* Can alternatively define in html {}. */
    background-color: ;
    background-image: url(/images/falls-background.jpg);
    background-size: cover;
    color: var(--cloud-white);
    font-family: "Playpen Sans", sans-serif ; /* Define with at least one font name and its related generic family name.*/
    margin:0;
    padding:0;
    max-width:100%;
  }
  
  /*  ----- Page layout blocks -----  */
  header {
    background-color: var(--tree-light-green);
    font-family:"kanit";
    color: var(--tree-dark-green);
  }
  header img{
    height: 70px;
    width: 70px;
    margin: 10px;
    padding-top: 10px;
    padding-left: 10px;
  }
  main {
    background-color: var(--tree-light-green);
    margin: 40px;
  }
  section {}
  article {}
    #topic1 {}
    #topic2 {}
  div {}
  aside {}
  footer {
    background-color: var(--rocks);
    margin: 40px;
  }
  
  /* ----- Anchors ----- Text links */
  a {}
  a:link {}
  a:hover {}
  a:active {}
  a:visited {}
  
  /*  ----- Navigation ----- Override text links for navigation only.  */
  nav {
    background-color: var(--tree-dark-green);
    text-decoration: none;
    text-align: center;
  }
  nav a button{
    height: 50px;
    width: 100px;
    background-color: var(--tree-light-green);
  }
  nav a:hover {
    background-color: var(--rocks);
  }
  .local {
    background-color: var(--water-gray);
    height: 40px;
    width: 80px;
    color: var(--tree-dark-green);
    text-decoration: none;
    display: flex;
  }

  
  /*  -----  Typography  ----- */
  p {}
  br {}
  ol, ul, dl {}
  li {}
  dt {}
  dd {}
  
  h1, h2, h3, h4, h5, h6 {font-family: "kanit";} 
  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 {}
  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;
    justify-content: center;
  }
  .gallery figure{
    border-style: solid;
    color: var(--tree-dark-green);
  }
  
  .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 {}