@font-face {
  font-family: 'Monomakh Unicode';
  src: url(/fonts/Monomakh-Regular.woff2) format("woff2");
}
@font-face {
  font-family: 'Ponomar Unicode';
  src: url(/fonts/Ponomar-Regular.woff2) format("woff2");
}

/* General Body Styles */
body {
  background-color: whitesmoke;
  font-family: 'Segoe UI', 'Lucida Sans Unicode', Tahoma, Verdana, 'Noto Sans', 'Noto Emoji', sans-serif;
  margin: 0;
}

.simple-body {
  height: 100vh;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* Links */
a {
  text-decoration: none;
  color: black;
  border-bottom: 1px dotted black;
}
a:hover {
  color: blue;
}

/* Main Layout Components */
.main-wrapper {
  width: 100%;
  max-width: 70rem;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.logo-box, .home-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-box a, .home-box a, .home-box-simple a {
  border-bottom: none;
}
.logo-box div, .home-box div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo-box img, .home-box img {
  max-width: 100%;
  height: auto;
  width: auto;
}

.dict-content-box {
  width: calc(75vw - 20px);
  max-width: 50rem;
  min-width: 20rem;
  border-left: 1px solid #99b4d1;
  background-color: #f0f7ff;
  display: flex;
  flex-direction: column;
  /*flex-grow: 1;*/
  padding: 6px;
  overflow-y: auto;
}

.main-content-box {
  width: 100%;
  max-width: 50rem;
  height: min-content;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
  margin-top: 3pt;
  padding: 6pt;
  border-radius: 6px;
  border: 1px solid #99b4d1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  background-color: #f0f7ff;
  flex-grow: 1;
}

.content-panel {
  width: calc(75vw - 20px);
  max-width: 50em;
  min-width: 20em;
  border-left: 1px solid #99b4d1;
  background-color: #f0f7ff;
  display: flex;
  flex-direction: column;
  padding: 6px;
  overflow-y: auto;
}

/* Sections */
section {
  font-size: 1.1rem;
  background-color: #FFFEF2;
  width: calc(100% - 1.3rem);
  margin: auto;
  margin-top: 0.1rem;
  margin-bottom: 0.35rem;
  padding: 0.5rem;
  border: 1px solid #99B4D1;
  border-radius: 0.5rem;
}

section h1 {
  font-size: 1.1rem;
  font-weight: bold;
  background-color: #B1D3FE;
  width: fit-content;
  margin: 0;
  margin-bottom: 0.3rem;
  padding: 0.1rem 2rem;
  border: 1px solid #99B4D1;
  border-radius: 0.4rem;
}

section img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: auto;
  cursor: pointer;
}

section p {
  margin: 0.3rem;
}

section li {
  margin: 0.5rem;
}

/* Specialized Classes */
.cs0, .cs {
  font-family: 'Monomakh Unicode', 'Ponomar Unicode', sans-serif;
  font-size: 110%;
  line-height: 1.7rem;
}

.cs {
  color: firebrick;
}

.dict {
  color: green;
  font-style: italic;
}

/* Template-specific styles */
.window {
  width: calc(100vw - 40px);
  max-width: 75rem;
  height: calc(100vh - 17px);
  background-color: #f0f0f0;
  border-radius: 6px;
  border: 1px solid #99b4d1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: row;
}

.main-content {
  display: flex;
  flex-direction: row;
  /*flex-grow: 1;*/
}

.main-content-simple {
  /*height: calc(100vh - 17px);*/
  display: flex;
  flex-direction: row;
}

.sidebar, .sidebar-simple {
  display: flex;
  flex-direction: column;
  padding: 5px;
}
.sidebar {
  background-color: #CFDDF0;
  width: calc(25vw - 20px);
  min-width: 8rem;
  max-width: 25rem;
}

.sidebar-simple {
  background-color: #f0f7ff;
  width: calc(15vw - 20px);
  min-width: 8rem;
  max-width: 25rem;
  height: min-content;
  border-radius: 6px;
  border: 1px solid #99b4d1;
  box-shadow: 0 2px 2px rgba(0,0,0,0.15);
  margin-top: 4px;
  margin-right: 6px;
}

.home-box {
  background-color: white;
  border-radius: 6px;
  border: 1px solid #99b4d1;
  padding: 3px 5px;
  padding-bottom: 0px;
  margin-bottom: -1px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* three columns with 1:2:1 proportions */
  gap: 0.3rem; /* spacing between grid items */
  align-items: center; /* vertically center items */
}

.home-box-simple {
  background-color: white;
  border-radius: 6px;
  border: 1px solid #99b4d1;
  padding: 3px 5px;
  /*padding-bottom: 0px;*/
  /*margin-bottom: -1px;*/
  margin-bottom: 4px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* three columns with 1:2:1 proportions */
  gap: 0.3rem; /* spacing between grid items */
  align-items: center; /* vertically center items */
}

.side-header {
  font-size: 0.8rem;
  background-color: #f0f0f0;
  margin-top: 5px;
  padding: 3px 5px;
  border: 1px solid #99b4d1;
  border-bottom: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.sidebar input {
  font-size: 1rem;
  width: calc(100% - 9px);
  padding: 3px;
  border: 2px solid green;
}

.source-side {
  background-color: white;
  border-radius: 6px;
  border: 1px solid #99B4D1;
  box-shadow: 0 2px 2px rgba(0,0,0,0.15);
  padding: 3px 5px;
}

.results-box, .history-box, .azbuki-box {
  border: 1px solid #99b4d1;
  background-color: #ffffff;
  padding: 4px;
  overflow: auto;
}

.results-box ul, .history-box ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.results-box li, .history-box li {
  font-size: 0.9rem;
  margin: 2px;
}

.results-box {
  height: calc(23vh - 10px);
}

.history-box {
  height: calc(30vh - 10px);
}

.azbuki-box {
  height: auto;
  min-height: 60px;
  flex-shrink: 0;
}

.invisible-element {
  visibility: hidden;
}