/*  The * below is used as a universal selector, so it creates default settings for your site */
/*INITIAL SETUP*/
@font-face {
    font-family: "Whyte Regular";
    font-weight: 300;
    src: url(fonts/ABCWhyteSemi-Mono-Regular-Trial.otf) format("opentype")
}

@font-face {
    font-family: "Whyte Italic";
    font-weight: 300;
    src: url(fonts/ABCWhyteSemi-Mono-RegularItalic-Trial.otf) format("opentype")
}

* {
    font-size: var(--font-size-12pt);
    line-height: var(--line-height-14pt);
    font-family: "Whyte Regular";
    margin-left: 10px;
    color: rgba(151, 151, 255);
    margin-right: 10px;
}

html, body {
  max-width: 100%;
  overflow-x: visible;

}
            #wrapper {
                position:center;
                width: 800px;
                margin:auto;
                height:100%;
            }
           
            #typefield {
                position: center;
                width:770px;
                padding:10px;
                margin: 0 auto;
                font-size:26px;
                border-radius:20px;
                border: 1px solid black;
                height: 80px;
                text-align: center;
            
            }
            #inputarea {
                position: center;
                text-wrap: wrap;
                display: inline-block;
                flex-wrap: nowrap;
            }
            #keyboard {
                position:relative;
                width:800px;
                margin:auto;
                height:373px;
                bottom:0;
                padding:0;
            }
            #presample {
                font-weight:bold;
                padding:20px 15px 5px 5px;
                vertical-align:middle;
            }
            #footer {
                margin-top:10px;
                padding-top:0 !important;
                line-height:24px;
                font-size:16px;
                
            }
            #footer h3 { font-size:24px; margin:0; margin-bottom:10px;}
            h1 {
                font-size:35px;
                padding-top:15px;
        
            }
            ul {
                display:inline;
                list-style-type:none;
            }
            li {
                font-weight:normal;
                display:inline;
                padding:10px 15px 10px 15px;
                background-color:#98c8f7;
                border-radius:10px;
            }
            li:hover {
                cursor:pointer;
                text-decoration:underline;
                background-color:#c0dbf6;
            }
            div {
                padding:10px 0 10px 0;
            }
            #customizearea {
                position:relative;
                height:100px;
            }
            #customize div{
                font-size:20px;
                line-height:30px;
            }
            #customize select{
                position:absolute;
                font-size:25px;
                left:300px;
                width:200px;
            }
            #fingertip{
                margin-top:-10px;
            }
            #layout {
                margin-top:10px;
            }
            #apply {
                position:absolute;
                right:5px;
                top:5px;
                padding:20px;
                cursor:pointer;
            }
            .button {
                font-family: Arial;
                color: #ffffff;
                font-size: 35px;
                padding: 10px;
                text-decoration: none;
                -webkit-border-radius: 28px;
                -moz-border-radius: 28px;
                -webkit-box-shadow: 0px 1px 3px #666666;
                -moz-box-shadow: 0px 1px 3px #666666;
                text-shadow: 1px 1px 3px #666666;
                border: solid #d9941c 2px;
                background: -webkit-gradient(linear, 0 0, 0 100%, from(#fabc3f), to(#fa6f05));
                background: -moz-linear-gradient(top, #fabc3f, #fa6f05);
                -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#fabc3f, endColorStr=#fa6f05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#fabc3f, endColorStr=#fa6f05);
            }
            .button:hover {
                    background: #fab505;
             }


#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap: 10px;
  justify-content: center;
  padding: 20px;
  margin: 0 auto;
  text-align: center;
  margin-left: -10px;
}

.grid-item {
  width: 200px;
  height: 200px;
  background-color: white; /* square background */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.grid-item img {
  max-width: 50%;   /* scale down to fit nicely */
  max-height: 50%;
  object-fit: contain; /* maintain aspect ratio */
}

.hide-toggle {
    cursor: pointer;
    margin-left: 20px;
}

.hide-section {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    transition: 0.4s ease;
    max-width: 700px;
    
}
.sticky {
  position: fixed;
  bottom: 30px;
  right: 10px;

  border: 1px solid rgba(151, 151, 255, 0.8);
  border-radius: 15px;;
  background: white;

  padding: 5px 4px;      
  line-height: 1;         

  z-index: 9999;
  font-style: italic;
  cursor: pointer;
}

.sticky svg {
  vertical-align: -2px;
  margin: 0px 0px 0px 3px;
}