/* Global Styles & Colors */
  :root {
    --color-header-background: #1b1f25;
    --color-header-text: white;
    --color-header-hightlight: #303743;
    --color-background: #1b1f25;
    --color-footer-background: #1b1f25;
    --color-footer-text: white;
    
    /* palette 1
    #303743
    #CBB26A
    #ffffff
    #454f61
    #1b1f25
    #d8c690
    */


  }


  html {
    height: 100%;
  }

  body {
    margin: 0;
    padding: 0;
    height:100%;
    width:100%;
    background-color: var(--color-background);
    overflow-y: hidden; /* Prevent scrollbar appearing on page transition */


  }

  .width-wide {
    max-width: 768px;
    width:100%;
  }
  .width-mid {
    max-width: 640px;
    width:100%;

  }

  .flexbox-row {
    display:flex;
    flex-direction:row; 
  }

  .flexbox-col {
    display:flex;
    flex-direction:column;         
  }

  .fb-start { justify-content:flex-start; }
  .fb-center { justify-content:center; }
  .fb-between { justify-content:space-between; }
  .fb-right {   justify-content:right; }
  .fb-x-stretch { align-items:stretch; }
  .fb-x-center { align-items:center; }
  .fb-nowrap { flex-wrap: nowrap;}
  .flex-no{ flex:0 0 0px; }
  .flex-1 { flex:1 1 0rem; }
  .flex-2 { flex:2 2 0rem; }
  .flex-3 { flex:3 3 0rem; }

  .height-full { height:100%; }
  .width-full { width:100%; } 
  .center-text { text-align: center; }
  


/* specific */
  #root{}

  /* level 1 */
  #header{
    /*flex-basis: 2.5rem;*/
    background-color:var(--color-header-background);
    color:var(--color-header-text);
  }

  #headerContent{ }

  .header-title {
    padding:0;
    margin:0rem 2rem 0.2rem 0.5rem;
    font-size:3rem;
    font-family:arial;
    font-weight: 500;
    

  }

  
  .header-title-highlight {
    color:var(--color-header-hightlight);
    font-weight: 600;

  }

  #header svg{

  }


  #content{

  
   }


  #footer{
    flex-basis: 2rem;
    background-color:var( --color-footer-background);
    color:var(--color-footer-text);
  }





#appslist{

  flex-wrap: wrap;

  

}


  .app {
    display:flex;
    flex-direction:column;      
    align-items:center; 
    margin:1.4rem;
    
    color:white;
    font-family:tahoma, arial;
    font-size:0.8rem;

    cursor:pointer;
  }

  .app:hover {
    text-decoration: underline;
  }
 

.app-icon-container {
  position: relative;
  overflow: hidden;
  border-radius: 10%;
}
  
.app-title-container{
  margin:0.8rem 0;
}


  .app-icon {
    width:4rem;
    height:4rem;

    -webkit-background-size: contain;
      -moz-background-size: contain;
      -o-background-size: contain;
      background-size: contain;
    background-repeat: no-repeat;
   
  }
  
 
  .app-icon:before {
    content: '';
    position: absolute;
    top: 0;
    left: -200px;
    width:4rem;
    height:4rem;
    background: rgba(255, 255, 255, 0.3);
    transform: skewX(-40deg);
    transition: 0.3s;
    
  } 
  
  .app-icon:hover:before {
    left: 7.9rem;
    background: rgba(255, 255, 255, 0.2);
    
  }

#appinfo{
  margin:3rem;
  color:white;
  font-family:tahoma, arial;
  font-size:1rem;

}






@media (min-width:650px)  { 
  .app-icon {
    width:7rem;
    height:7rem;
  }
  .app-icon:before {
    width:7rem;
    height:7rem;
  }


}







  /*
  .hl1 { border: solid 2px lightcoral }
  .hl2 { border: solid 2px orange}
  .hl3 { border: solid 2px lightgreen}
  .hl4 { border: solid 2px lightblue}
*/