/* full page */

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}

body, .latin {
  font-family: -apple-system, BlinkMacSystemFont, 
      "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", 
      "Fira Sans", "Droid Sans", "Helvetica Neue", 
      sans-serif;
  text-rendering: optimizeLegibility;
}

.linja-pona {
	font-size: 200%;
}

.container {
    display: grid;    
    grid-template-columns: auto;
    grid-template-rows: auto;
	grid-gap: 6px;
}

.selectable:hover {
	text-shadow: 0px 0px 2px #555555;
	cursor:pointer;
}

/* header */

header {
	grid-column: 1 / 2;
	grid-row: 1;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#header_right {
	display: flex;
	flex-wrap: wrap;
}

#sitelen_select {
	margin-right: 1rem;

	font-size: 1rem;
	
	padding-left: 4px;
	padding-right: 4px;
}

#icon_translate {
	height: 1em;
}

/* all definitions options */
#all_definitions_options {
	grid-column: 1 / 2;
	grid-row: 2;

	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* definition card */

#def_card {
	grid-column: 1 / 2;
	grid-row: 3;
	
	width: 90%;
	padding: 10px;
	margin: auto;

	border-radius: 20px;
	box-shadow:  -20px 20px 60px #d9d9d9, 
	             20px -20px 60px #ffffff;

    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: auto;
}

@media only screen and (min-width: 1000px) and (min-height: 850px) {
  #def_card {
  	height: 282px;
  }
  #word {
  	margin-top: 50px;
  }
}

#word {
	font-size: 200%;
	text-align: center;
	margin-right: 1rem;
}

#word_sitelensitelen {
	font-size: 200%;
}

.sitelen_sitelen {
	max-height: 1em;
	max-width: 1em;
}

#def_info_wrapper {
	display: grid;
	/* 2.5em so the 3 kanji Japanese parts of speech fit */
  	grid-template-columns: minmax(2.5em, 1fr) 9fr;
  	grid-template-rows: repeat(auto-fill, 1fr);
  	grid-gap: 0.8rem;
}

.card_left {
	font-size: 80%;
	color: grey;
	text-align: right;
}

.card_right {
	margin-left: 1rem;
}

.gap {
	grid-column: 1 / 3;
	margin-top: 1rem;
}

/* word list */

#wordlist_options {
	grid-column: 1 / 2;
	grid-row: 4;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#all_words {
	grid-column: 1 / 2;
	grid-row: 5;

	display: flex;
	flex-wrap: wrap;
}

.group {
	display: inline-block;
	margin-right: 0.2rem;
	margin-bottom: 0.5rem;
	vertical-align: top;

	border-radius: 5px;
	box-shadow:  -5px 5px 6px #d9d9d9, 
	             5px -5px 6px #ffffff;
}

.word {
	display: inline-block;
	text-align: center;
}

.faded_text {
	filter: opacity(5%);
}

/* all definitions */
#all_definitions {
	grid-column: 1 / 2;
	grid-row: 6;

	max-width: 1000px;
	margin: auto;
}

.def_group {
	display: inline-block;
	margin-right: 0.2rem;
	margin-bottom: 0.5rem;
	vertical-align: top;

	border-radius: 5px;
	box-shadow:  5px -5px 6px #d9d9d9, 
	             -5px 5px 6px #ffffff;
}

#all_def_wrapper {
	display: grid;    
    grid-template-columns: 2rem 4.3rem 4fr;
    grid-template-rows: auto;
}

.all_def_definition {
	display: grid;    
    grid-template-columns: minmax(3em, auto) 10fr;
    grid-template-rows: auto;
}

.center_text {
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
}

.all_def_sitelen_pona {
	margin-left: 5px;
}
.all_def_latin {
	margin-left: 5px;
}

.all_def_pos {
	font-size: 75%;
	font-style: italic;
	color: grey;
	margin-left: 5px;
	margin-right: 7px;
}

/* footer */

footer {
	grid-column: 1 / 2;
	grid-row: 6;
}