@font-face { font-family: LiberationSerif; src: local('Liberation Serif, Regular') ,url('LiberationSerif-Regular.ttf'); }
@font-face {font-family: Bookerly; src: local('Bookerly') ,url('Bookerly.ttf'); }
@font-face {font-family: PT_Serif; src: local('PT Serif'), url('PTSerif-Regular.ttf'); }
@font-face {font-family: IBM_Plex_Sans; src: local('IBM Plex Sans'), url('IBMPlexSans-Regular.ttf'); }
@font-face {font-family: Calibri; src: local('Calibri'), url('calibri.ttf'); }
@font-face {font-family: Bukyvede; src: local('Bukyvede') ,url('BukyVede-Regular.ttf'); }
@font-face {font-family: Monomakh; src: local('Monomakh') ,url('MonomakhUnicode.ttf'); }

html {
  overflow-y: scroll; /* makes sure vertical scrollbar is always present to prevent horizontal movement*/
}

a {
    text-decoration: none;
    color: #cbd9f4a6;
}
  
#main_box {
    display: flex;
    justify-content: flex-start;
    flex-flow: column nowrap;
    margin-left: 7.3%;
    margin-right: 7.3%;
    margin-bottom: 60px;
    border: 1px solid black;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
  
#main_words_box {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    background-color: #172136;
    padding: 10px;
    height: fit-content;
    min-height: 100px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    
}

#toplinks-flexbox {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  font-family: "IBM_PLEX_SANS";
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom: 1px solid black;
}
#texts_link {
  border-top-left-radius: 5px;
}
.toplink-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 21px;
  width: fit-content;
  max-width: 97%;
  padding: 6px;
  user-select: none;
  min-width: 100px;
  text-align: center;
  border-right: 1px solid black;
  cursor: pointer;
}
.toplink-buttons.current {
  color: #cbd9f4;
}
.toplink-buttons:hover {
  color: #cbd9f4d3;
}
.toplink-buttons.current:hover {
  color: #cbd9f4;
}
.toplinks-ahref  {
  display: flex;
}

#topbar_placefiller {
  /* width: -webkit-fill-available; */
  width: 100%;
}
#theme_switcher {
  width: 30px;
  opacity: 85%;
  font-size: 21px;
  padding: 6px; /* setting this to 6px looks more square but it increases the height of the topbar so that the Texts and Words buttons no longer fill it (I should fix those instead so they always fill the bar but I think their height is hardcoded in order to vertically-centre the text, which again is bad) */
  text-align: center;
  user-select: none;
  border-top-right-radius: 5px;
  border-left: 1px solid black;
  cursor: pointer;
}
#theme_switcher:hover{
  opacity: 100%;
}


/*------------------------------OCS SERVER STUFF----------------------------------------------------*/

#grids-container {
  display: flex;
  flex-flow: row wrap;
  column-gap : 10px;
}

.infl-grid {
  display: grid;
  grid-auto-flow: column;
  font-size: 23px;
  font-family: Bukyvede;
  border-right: 1px solid;
  border-top: 1px solid;
  border-radius: 6px;
  color:#cbd9f4;
  background-color: #071022;

  margin-top: 10px;
}

.verb-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(9, 1fr);
}
.noun-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(7, 1fr);
}
.grid-child {
  padding: 4px;
  /* padding-right: 2px; */
  text-align: center;
  border-left: 1px solid;
  border-bottom: 1px solid;
  display: flex
;
  justify-content: center;
  flex-flow: column nowrap;
  align-items: center;
}
.grid-child:first-child {
  border-top-left-radius: 6px;
}
.grid-child:last-child {
  border-bottom-right-radius: 6px;
}


.infl_variants {
}
.deviance {
  opacity: 0.8;
  font-size: 15px;
}
.variant {
  opacity: 1;
  font-size: 23px;
}

#lcs_lemma_searchbox {
  display: block;
  background-color: #040a16;
  color: #cbd9f4;
  padding: 5px;
  border: 2px solid black;
  border-radius: 5px;
  resize: none;
  width: 175px;
  height: 27px;
  font-size: 17px;
  font-family: IBM_Plex_Sans;
  outline: none;
}
#search_candidates_box {
  display: none;
  flex-flow: column nowrap;
  justify-content: start;
  align-items: stretch;
  height: fit-content;

  background-color: #071022;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 1;
  opacity: 0.95;
  position: absolute;
  top: 100%;
}
.search_candidate {
  width: 175px;
  padding: 5px;
  height: 20px;
  font-size: 17px;
  font-family: Bukyvede;
  color: #cbd9f4;
  border-bottom: 1px solid black;
  cursor: pointer;
}
.search_candidate:last-child {
  width: 175px;
  padding: 5px;
  height: 20px;
  font-size: 17px;
  font-family: Bukyvede;
  color: #cbd9f4;
  border-bottom: none;
}
.search_candidate:hover {
  background-color: black;
}
.search_candidate.keyboard_selected{
  background-color: black;
}
#search_container {
  position: relative;
}