/*  ===== 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 '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";   
  */



   
  @import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@100&family=Orbitron&family=Roboto+Mono&family=Tilt+Prism&display=swap');

/*   ----- Variables  -----  */
:root {
    --accent: rgb(239, 208, 184);
    --dark: rgb(33, 55, 82);
    --medium: rgb(102, 184, 252);
    --light: rgba(195, 221, 255, 0.904);
    --yellow: rgb(151, 191, 65);
  }
  
  /*  ----- Viewport ----- elements inherited by all remaining elements ----- */
  body {       /* Can alternatively define in html {} or :root {} */
    background-attachment: fixed;
    background-image: url(projects/media/background-sky.jpg);
    background-position:bottom;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Roboto Mono', monospace;
    font-size: small;
    color:var(--dark);
    margin:2% 5%;
    padding:5px 0;
    max-width:100%;
    overflow-y:auto;
  }
  header{
    display:flex;
    justify-content: space-between;
    max-height:150px;
     flex-grow: 1;

  }

  /*  ----- nav-page layout blocks -----  */
  .header-name {
    font-family: 'Tilt Prism', cursive;
    font-size:85px;
    letter-spacing: 10px;
    color:var(--dark);
 
  }
  main {
    background-color: var(--light);
    width:100%;
    padding: 20px 20px;
    display:block;
     min-height: 100vh;  
    
  }
  section {}
    .concept article { 
      border:2px solid var(--dark);
      padding:2%;
      margin:2% 2% 0 27%;
      padding:2%;
    }
      #topic1 {}
      #topic2 {}
  div {}
  aside {}
  footer {
    color:var(--light);
    background-color:var(--dark);

    border:2px solid var(--light);
    padding:15px;
   text-align:end;

  }
  
  
  /* ----- Anchors ----- Text links */
  a {}
  a:link {
    text-decoration: none;
  }
  a:hover { }
  a:active {}
  a:visited {
    text-decoration: none;
  }
  #current{
    text-decoration: underline;
  }
  /*  ----- Navigation ----- Override text links for navigation only.  */
  nav {
  margin-top:120px;
    font-family: 'Orbitron', sans-serif;
    font-size: 150%;
    
  }
  nav a {
    font-weight: bold;
    margin:10px;
  }
  nav a:active{
    background:var(--light);
  }
  nav a:hover {
    opacity:0.5;
  }

  
  /*  -----  Typography  ----- */
  p {}
  br {}
  ol, ul, dl {}
  li {}
  dt {}
  dd {}
  
  h1, h2, h3, h4, h5, h6 {
    
  } 
  h1 {
  }
  h2 {
    font-family: 'Orbitron', sans-serif;
    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 {}
    output {}
    meter {}
    progress {}
    select {}
      optgroup {}
      option {}
    textarea {}
  
  /* ----- Media ----- */
  figure {
    background-color:var(--medium);
    border-radius:20px;
    max-width:300px;
    padding:20px;
  }
    figcaption {
      display:block;
      font-style: italic;
      color:var(--accent);
     
    }
    figure img {
      
      max-width:100%;
      
    }
  svg {}
  picture {}
    source {}
  iframe {}
  video {}
  audio {}
  embed {}
  object {}
  
  /*  ----- Classes for alignment, positioning, widths, grids, embellishments, and animation -----  */
  
  .gallery { 
      display: grid;
      grid-template-columns: 1fr 1fr; /* Two equal columns */
      gap: 20px; /* Space between columns */
      padding: 20px;
  }


.feature-card{
 justify-content: center;
}
.feature-card a{
  font-weight: bold;
  font-size:120%;
}
.feature-card .overview{
  padding:10px;
}

.github{
  background-color: var(--yellow);
display:contents;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
  margin: auto;
}


  .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 {}
  

.feature-card img, .feature-card video{
  object-fit: contain;
  width:50%;
  height: 50%;
  margin-left: 25%;
}