html { height: 100%; margin: 0px; padding: 0px;}
body { height: 100%; margin: 0px; padding: 0px;    font-family:Georgia,Utopia,Charter,serif;}


/* @font-face {
  font-family: 'BAbydos';
  src: url('../fonts/_AbydosB.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
} */

@font-face {
  font-family: 'Abydos';
  src: url('../fonts/AbydosB.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

#UnicodeCanvas {
  font-family: 'Abydos', sans-serif; /* Use 'Abydos' as the preferred font */
}

#UnicodeCanvas0 {
  font-family: 'Abydos', sans-serif; /* Use 'Abydos' as the preferred font */
}

#UnicodeCanvas1 {
  font-family: 'Abydos', sans-serif; /* Use 'Abydos' as the preferred font */
}

#UnicodeCanvas3 {
  font-family: 'Abydos', sans-serif; /* Use 'Abydos' as the preferred font */
}

#UnicodeCanvas4 {
  font-family: 'Abydos', sans-serif; /* Use 'Abydos' as the preferred font */
}

#SearchString 
{
  font-family: 'BAbydos', sans-serif; /* Use 'Abydos' as the preferred font */
}


.wrapper {

  display: grid;
  width: 100%;
  height:100%;
  /* margin: 0 auto; */
  overflow:hidden;
  /*grid-template-rows: 12fr 2fr 2fr; */
  /* grid-template-columns: 40px 50px auto 50px 40px; */
  grid-template-rows:  auto 1fr auto;  
  padding: 0px;
  margin: 0px;
  background-color:whitesmoke;
  
}
  
     
.header {
    font-size: x-large;
    background: whitesmoke;
    color: #f1f1f1;
}
  
  .content {          
    /* max-width:100vw;  */
    /*max-height:70vh;*/ 
    height: 100%;
    overflow: auto;   
    margin: 0px; 
    display:flex; 
    margin: auto;
    /*flex-direction: row;  */
    /*justify-content: safe center; */
    align-items: center; 
    background:whitesmoke;
    visibility: hidden;;
  }

  .contentA {          
    /* max-width:100vw;  */
    /*max-height:70vh;*/ 
    overflow: auto;   
    margin: 0px; 
    display:block;    
    background:whitesmoke;
    text-align: center;    
    visibility: hidden;  
    min-height: 100%;
    background-color:whitesmoke;
  
  }

  
  
  .foo { 
    max-width:35em; 
    margin-left: auto;
    margin-right: auto;   
    text-align: left;
  }

   @media (max-width: 35em) { 

    .foo { 
      margin-left: auto;
      margin-right: auto;   
      text-align: left;
    }
  

   }



  button {margin: 20px;
    padding: 0;
border: none;
background: none;
  }

  p {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased !important;
    -moz-font-smoothing: antialiased !important;
    text-rendering: optimizelegibility !important;
    letter-spacing: .03em;
    line-height: 2.0em;
  }

  a {
    
     margin-left: 0.5em;
     margin-right: 0.5em;
  }


  .navi {  
    color: black;    
    margin-left: 0.5em;
    margin-right: 0.5em;
  }


  .logo {  
    color: black;    
    margin-left: 0.5em;
    margin-right: 0.5em;  
    vertical-align: middle;
  }

 a.navi:hover {
   color: hotpink;
 }
 a.navi:not([href]) {
   cursor: pointer;
 }



  .border 
{ 
  border-color: #C1E0FF; 
  border-width:0px; 
  border-style:solid; 
}

.thumbnail
{ 
  min-width: 4em;
  max-width: 4em;
  margin: 0.5em;
  max-width:4em;
  max-height:4em;
}

hr {
  clear: both;
  }

  .loader {
    border: 16px solid wheat; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;    
    animation: spin 10s linear infinite; 
    
  }

  .message {
    animation: show 1s linear; 
  }
  
  @keyframes show {
    0% { opacity: 0;}
    100% { opacity: 1;}  
  }


   @keyframes spin {
    
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
  } 

  #SmallCanvas 
  { 
    width: 128px;
    height: 128px
  }

  #UnicodeCanvas 
  {
    width: 128px; 
    height: 128px;
    color: black;
  }

  #hieroglyph 
  {
    font-family:Courier New; 
    font-size:250%; 
    width: 3ch; 
    height: 2ch; 
    margin-left: 20px; 
    color: black; 
  }

  #Copyright {
    font-size: x-small; 
    background-color:whitesmoke; 
    margin: 0px;; 
    /*opacity: 1;*/
  }

  #hintText {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #888;
    font-size: 16
    pointer-events: none; /* Позволяет игнорировать взаимодействие с текстом подсказки */
  }

  
  /* Smartphone Portrait and Landscape */
  @media screen and (max-width : 480px){
   
      #SmallCanvas 
      { 
        width: 96px;
        height: 96px
      }

      #delimiter 
      {
        width: 16px; 
        height: 96px;    
      }

    
      #UnicodeCanvas 
      {
        width: 48px; 
        height: 96px;    
      }

      #UnicodeCanvas0 
      {
        width: 48px; 
        height: 96px;    
      }

      #UnicodeCanvas1 
      {
        width: 48px; 
        height: 96px;    
      }

      #UnicodeCanvas2
      {
        width: 48px; 
        height: 96px;    
      }

      #UnicodeCanvas3 
      {
        width: 48px; 
        height: 96px;    
      }

      #UnicodeCanvas4 
      {
        width: 48px; 
        height: 96px;    
      }

        #hieroglyph 
        {
          font-family:Courier New; 
          font-size:100%; 
          margin-left: 0px; 
          
        }   

      
        /*
        #Copyright {
          visibility: hidden;
          height: 0px;
          background-color: red;
        }
        */


       /* wide scro;;bar */
::-webkit-scrollbar {
    width: 24px;
    height: 24px;
}

/* track*/
::-webkit-scrollbar-track {
    background: transparent; /* Или: rgba(0, 0, 0, 0.05) */
}

/* scrollbar */
::-webkit-scrollbar-thumb {
    background-color: rgba(65, 97, 125, 0.6);
    border-radius: 100px;
    margin: 6px; /* отступ внутри 24px области */
    border: 8px solid transparent; /* пространство вокруг */
    background-clip: content-box;
    transition: background-color 0.3s;
}

/* Hover */
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(65, 97, 125, 0.9);
}

/* Inactive */
::-webkit-scrollbar-thumb:window-inactive {
    background-color: rgba(65, 97, 125, 0.3);
}

        

 }