@font-face{
  font-family:NotoSans;
  src: url(font/NotoSans-Regular.ttf)
}

:root{
  --target-font-size:min(10vw, 5rem);
  --target-size:min(23vw, 10rem);

  --solved-font-size:min(8vw, 2rem);
  --solved-size:max(10vw, 4rem);

  --input-size:max(10vh, 4rem);
  --input-font-size:min(6vw, 2rem);

  --keyboard-size:min(35vh, 20rem);
  --key-size:min(8vw, 3rem);
  --key-font-size:min(6vw, 3rem);
}

*{
  color:var(--foreground) !important;
  border-color:var(--foreground) !important;
  background-color:var(--background) !important;

  border-collapse: collapse !important;
  border-width:1px !important;
/*  border-radius:0.5rem;*/
/*  margin:0.1em;*/

  box-sizing:border-box;
  font-family:monospace;
  font-size:1.25rem;
  overscroll-behavior: none !important;

}
ul{
  padding-left:1em;
}
.no-select {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.no-select:focus {
  outline: none !important;
}

/*
  elm-hot creates an additional div wrapper around the app to make HMR possible.
  This could break styling in development mode if you are using Elm UI.

  More context in the issue:
    https://github.com/halfzebra/create-elm-app/issues/320

[data-elm-hot="true"] {
  height: inherit;
}

*/

html,body{
  margin: 0;
  padding:0;
  overflow:hidden;
  height:100vh !important;
/*  max-height:100vh;*/
/*  touch-action: none;*/
/*  min-height:-webkit-fill-available;*/
/*  scroll-padding-bottom: env(safe-area-inset-bottom);*/
  overscroll-behavior: none !important;

}

body {
/*  font-family: 'Source Sans Pro', 'Trebuchet MS', 'Lucida Grande', 'Bitstream Vera Sans', 'Helvetica Neue', sans-serif;*/
  background-color:var(--background-color);
}



span, button{
  cursor:pointer;

}

input,
textarea,
button,
select,
a {
    -webkit-tap-highlight-color: var(--accent);
}

#main{
  position: fixed;
  height:100%;
  width:100%;
  display:grid;
  grid-template-rows: calc(100% - var(--input-size) - var(--keyboard-size)) var(--input-size) var(--keyboard-size);
  grid-template-columns: calc(100% - var(--solved-size)) var(--solved-size);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas: 
  "targets solved"
  "input menu"
  "keyboard keyboard"
  ;
  overscroll-behavior:none !important;
  touch-action:none;
}

#main.no-keyboard{
  grid-template-rows: calc(100% - var(--input-size)) var(--input-size) 0px !important;
}

*{
/*  font-family:NotoSans;*/
}


/* KANA TARGETS */

#targets{
  display: flex;
  flex-flow: row wrap;
  overflow-x: hidden;
  overflow-y: scroll;
  grid-area: targets; 
  align-content: flex-start;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

}

#targets::-webkit-scrollbar{
  display:none;
}



.target:first-child{
  border-width: 0.42rem !important;
  border-color:var(--accent)!important;
  opacity:1.0;
}

.target{
  border:1px solid transparent;
  opacity:0.8;

  display:inline-flex;

  min-width : var(--target-size);
  max-width : var(--target-size);
  width : var(--target-size);

  min-height : var(--target-size);
  max-height : var(--target-size);
  height : var(--target-size);

  font-size:var(--target-font-size);
  position: relative;
  text-align:center;
  align-items: center;
  justify-content: center;
/*  font-family:PottaOne;*/

}

.romaji-target{
  font-family:sans !important;
}

.horizontal-table{
  display :flex;
  justify-content:center;
}
.mode-selector{
  font-size : min(calc(100vw / 15), 3rem);
  padding:0.3em;
  flex-grow:1;
}



/* SOLVED KANA */

#solved-grid{
  box-sizing :border-box;
  grid-area: solved; 
  display: flex;
  flex-flow:column nowrap;
  overflow-x : hidden;
  overflow-y : scroll;
  
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

  height:auto;
  touch-action:none;
  overscroll-behavior:none !important;
}

#solved-grid::-webkit-scrollbar{
  display: none;
}

.solved{
  display:inline-flex;
  flex-flow:column;
  text-align:center;
  align-items: center;
  justify-content: center;
  border:1px solid transparent;
/*  margin-bottom:0.5rem;*/
  width:100%;
  height:var(--solved-size);
  min-height:var(--solved-size);
  overflow: hidden;
  white-space: pre;
  position: relative;
}
.solved-time{
  font-size:0.6rem;
}
.solved-symbol{
  font-size:var(--solved-font-size);

}
.solved-mora{

}

.combined-solved{
  font-size : calc(var(--solved-font-size) / 1.5);
}

.combined-target{
  font-size : calc(var(--target-font-size) / 1.5);
}


/*INPUT*/

#input{

  display:inline-flex;
  text-align:center;
  align-items: center;
  justify-content: center;
  text-align:center;
/*  height:auto;*/
  min-height : var(--input-size) !important;
/*  text-transform: uppercase;*/
  text-transform: lowercase;
  font-size:var(--input-font-size);
  grid-area: input; 
  outline: none;
  border:1px solid transparent;
  overscroll-behavior: none !important;
  touch-action:none;
}

/*KEYBOARD*/

#keyboard{
  display:none;
  border:1px solid #eee;
  grid-area: keyboard; 
  touch-action:none;
/*  overscroll-behavior:none;*/

}

.show{
  display:block !important;
}

.hide{
  display:none !important;
}


.key-row{
  display: flex;
  flex-flow:row nowrap;
  position:relative;
  width:100%;
  height:calc(100% / 3);
  justify-content:center; 
}

.horizontal-table{
  display: flex;
  flex-flow:row nowrap;
}

.kana-key-row{
  height:calc(100% / 4);
}


.key-button, .kana-button{
  border-style: solid;
  font-size:var(--key-font-size);
  display:inline-flex;
  flex-grow: 0;
  width:calc(100% / 10);
  text-align:center;
  align-items: center;
  justify-content: center;
  text-transform:uppercase;
  font-family:sans;
  cursor:pointer;
  margin:0.1em;
  border-radius:1rem;
  user-select: none;
  outline:none;
  background-color :var(--background)!important;
  border-width:0.1rem !important;
/*  color:var(--accent) !important;*/
  border-color:var(--foreground) !important;
  opacity:0.7;
}

.kana-button{
  padding-bottom : 0.15em !important;
}


button:active, .key-button:active{
  background-color:var(--accent) !important;
}


/*MENU*/
#menu{
/*  grid-area:targets;*/
  grid-area:1 / 1 / 3 / 2;
  border:1px solid var(--foreground);
  overflow-y:scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  z-index: 10;
/*  touch-action: pan-y;*/
  overscroll-behavior: none;

}

#menu::-webkit-scrollbar{
  display:none;
}
#side-menu{
  grid-area:solved;
  z-index: 1;
  display:flex;
  flex-flow:column-reverse; nowrap;
  touch-action:none;

}
#menu-bar{
  z-index: 1;
  grid-area:input;
  border:1px solid var(--foreground);
/*  display:flex;*/
  flex-flow:row nowrap;
  display:none;

/*  opacity:0.0;*/

}

.side-button{
  width:100%;
  height:var(--solved-size);
  font-size:var(--solved-font-size);
  border:1px solid var(--foreground);
  overflow:hidden;
  padding:0;
  font-family:NotoSans;
}

#vibrate-button{
  font-size:calc(var(--solved-font-size) * 1.5);
}

.menu-tab{
  color:var(--accent)!important;
}

.inactive{
  opacity:0.5 !important;
  color:var(--foreground)!important;
}
.side-button{
  font-family : NotoSans !important;
  padding:0.5rem;
}
#start{
  grid-area: menu; 
  font-size:var(--input-font-size);
  display:inline-flex;
  align-items: center;
  justify-content: center;
/*  border-radius:0;*/
  border:1px solid transparent;
  overflow:hidden;
  touch-action:none;

}

#font-menu{
  overflow-y:scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#font-menu::-webkit-scrollbar{
  display:none;
}


#result-menu{
  padding:1rem;
  overflow-y:scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.result-row{
/*  padding:2rem;*/
  font-size:1em;
  text-align: center;
}

.result-hint{
/*  padding:2rem;*/
  font-size:0.6em;
  text-align: center;
  padding:2em;
  max-width:30em;
  margin-left:max(calc(100vw - var(--input-size) - 30em - 20em), 1em);
}
.result-title{
  text-align: center;
  white-space:pre-wrap;
  margin:1em;
}
#result-menu::-webkit-scrollbar{
  display:none;
}


#result-body{
/*  padding:1em;*/
}

.font-name{
/*  font-size:0.75rem;*/
}
.font-example, .font-name{
  padding-left :0.5rem;
  padding-right :0.5rem;
  background: transparent !important;
}

#font-title{
/*  position:relative;*/
  display:none;
  width:100%;
  align-items: center;
  justify-content: center;
  text-align:center;
}

#font-list{
  display:flex;
  flex-flow:column wrap;
/*  width:50%;*/
/*  height:100vh;*/
}
/*
@media screen and (max-width: 400px) {
  .flex { height: auto; }
}
*/

.font-selector{
/*  width:100%;*/
  border:1px solid;
  padding:0.8rem;
  display:flex;
  flex-flow:row wrap;
  flex-grow:1;
  opacity: 0.42;
/*  color:var(--midground)!important;*/
  justify-content:space-between;
  text-decoration:line-through;

}
.font-selector:hover{
  border-color: var(--accent) !important;
}

#sets_menu{
  display:flex;
  flex-flow: column nowrap;
}

.kana-table-container{
  min-width : min(20rem, 100%);
  width : calc(max(50%));
/*  width : calc(50% - var(--solved-size));*/
  display: inline-flex;
/*  border : 1px solid var(--accent);*/
  flex-flow : column nowrap;
}
.kana-header{
  padding:1rem;
  text-transform:lowercase;
  font-size : min(calc(100vw / 15), 3rem);
  white-space:pre-wrap;
  align-items: center;
  justify-content: center;
  text-align:center;
}
.kana-row-container{
  min-height:2.2rem;
  display:flex;
/*  justify-content:space-evenly;*/
/*  border : 1px solid var(--accent);*/
}
.kana-row-head{
  display: inline;
  /*opacity:0.4;
  background-color : var(--foreground) !important;
  color : var(--background) !important;*/
  min-width:3rem;
  padding:0.5rem;
  flex-grow:0;
  border : 1px solid var(--accent);
}
.kana-column-head{
  display: inline;
  min-width:2rem;
  padding:0.5rem;
  flex-grow:1;
  border : 1px solid var(--accent);
/*  border : 1px solid var(--accent);*/
/*  border:none;*/
}
.kana-row{
  width : auto;
  display:inline-flex;
  flex-flow:row nowrap;
  justify-content:space-evenly;
  flex-grow:1;


}
.kana-symbol{
  display:inline-flex;
  flex-grow : 1;
/*  border : 1px solid var(--accent);*/
  white-space:pre-wrap;
  align-items: center;
  justify-content: center;
  text-align:center;
  border:none;
}

.set-name{
/*  text-transform:uppercase;*/
  position:relative;
  padding:1rem;
/*  letter-spacing: 1em;*/
  box-sizing:border-box;
  width:100%;
  border:1px solid var(--foreground);
  text-transform:lowercase;
  font-size : min(calc(100vw / 25), 3rem);
  white-space:pre-wrap;
  align-items: center;
  justify-content: center;
  text-align:center;
}


.row-list{
  box-sizing:border-box;
  display:inline-flex;
  width:50%;
  flex-flow:column wrap; 
}
.row-selector{
  display:block;
  opacity: 0.42;
/*  filter:brightness(0.5);*/
  text-decoration: line-through;
  border: 1px solid var(--foreground);
/*  font-size:1.25rem;*/
  font-size:calc(100vw / 20);
  text-transform:lowercase;
}
.unchecked{
  text-decoration: line-through;
  opacity: 0.42;
}
.unchecked-no-strike{
  opacity: 0.42;
}
.checked{
  filter:none;
  text-decoration: none;
  opacity: 1.0;
  color:var(--foreground)!important;
/*  background-color:var(--accent) !important;*/
/*  color:var(--background)!important;*/
}






#help-menu{
  box-sizing:border-box;
  padding:min(3rem, 5vw);
  font-size:1em;
}
#help-body{
  font-size:0.75rem;
  white-space: pre-wrap;
/*  padding:1rem;*/
  max-width:32rem;
}

p, li {
  font-size:0.75rem;
}
strong{
  font-size:1.0rem;
  font-weight: 400;
  padding-left:0.5rem;
  padding-right:0.5rem;
  border:1px solid var(--foreground);
  color:var(--accent) !important;
}
a{
  font-size:0.75rem;
  color:var(--accent)!important;
}