/*****************************************************************************
   site
 *****************************************************************************/

body {
  font-family: "Stint Ultra Condensed", serif;
  /*letter-spacing: -1px;*/
  font-size: 3rem;
  min-block-size: 100vh;
  scroll-behavior: smooth;
}

.to-search {
  z-index: 100;
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: var(--invert);
  padding: 0.5rem 0 0 0.25rem;
  /*border-top-left-radius: 3rem;*/
  /*border-block-start: 3px solid var(--base);
  border-inline-start: 3px solid var(--base);*/
  /*box-shadow: 0 0 1rem 0 var(--base);*/
}

#emoji-search-status:empty {
  display: none;
}

pre {
  display: inline;
  font-family: inherit;
  unicode-bidi: normal;
  white-space: normal;
  margin: 0;
}

mark {
  background-color: red;
  color: var(--base);
  display: inline;
  border: 0;
  padding: 0;
  text-decoration: none;
}

::selection {
  background-color: var(--invert-alpha);
}

a {
  color: var(--base);
  text-decoration-color: transparent;
}

.container {
  display: grid;
  position: relative;
}

.theme-toggle {
  z-index: 1000;
  text-align: right;
  margin-block-start: 1.5rem;
  margin-inline-end: 1rem;
  position: absolute;
  right: 0;
}

.btn-toggle {
  padding: 0.5rem 0;
  background-color: var(--invert);
  box-shadow: -6px 6px 0 0 var(--base-alpha);
}

.container h1 {
  margin: 1rem 0;
  font-size: 3.4rem;
}

.container h1 a {
  color: var(--invert);
  text-decoration: none;
  margin: 0;
  /*text-shadow: var(--base) 2px 2px 0;*/
}

.container h1 em {
  font-style: normal;
  color: var(--invert-alpha);
  text-decoration-color: var(--invert-alpha);
}

/* modal (first-view) */

.modal.index {
  text-align: center;
}

.modal:not(.index) {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1010;
  background-color: var(--base);
  text-align: center;
  border-block-end: 6px solid #b665c5;
}

.modal .modal-header button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: transparent;
  border-width: 0;
  cursor: pointer;
  color: var(--base);
  display: inline-block;
  font-size: 4rem;
}

.modal .modal-title {
  font-size: 4rem;
  color: var(--base);
}

.modal > div {
  display: grid;
  min-block-size: 100dvh;
  place-content: center;
  /*position: absolute;*/
  inset: 0;
  background: radial-gradient(#ffb02e, #8d65c580);
}

.modal h1 {
  font-size: 4rem;
  /*padding-block-start: 2rem;*/
  /*line-height: 8rem;*/
  margin: 1rem 0 2rem;
  text-align: left;
  /*text-shadow: white 2px 2px 0;*/
}

.modal .language {
  /*position: absolute;
    top: 2rem;
    right: 2rem;*/
  /*background-color: var(--base-alpha);
    padding: 0rem 3rem;
    border-radius: 3rem;
    text-align: right;
    z-index: 10;*/
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto;
  /*block-size: 6rem;*/
  text-decoration: none !important;
  line-height: 4rem;
  /*padding-block: 6rem;*/
}

/*.modal .language-grid {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(4, 1fr);
}*/

.modal .language a {
  padding: 0.5rem;
  text-decoration: none;
  background-color: var(--invert);
  color: var(--base);
  box-shadow: 6px 6px 0 var(--invert-alpha);
  opacity: 0.5;
  margin-block-end: 1rem;
  pointer-events: all;
}

.modal .language p {
  margin: 1rem 0;
  /*line-height: 0;*/
  color: black;
  text-shadow: var(--invert-alpha) 2px 2px 0;
}

.modal .language a.active {
  grid-column: span 4;
  transition: 0.5s all;
  background-color: var(--invert);
  color: var(--base);
  box-shadow: 6px 6px 0 var(--base-alpha);
  opacity: 1;
  display: block;
  pointer-events: all;
}

.container h1 strong {
  font-size: 2rem;
  color: var(--invert-alpha);
  text-shadow: none;
  position: relative;
  top: -2rem;
}

.modal h1 div {
  text-align: center;
  background-color: var(--base-alpha);
  border-radius: 50%;
  block-size: 4.4ch;
  inline-size: 4.4ch;
  line-height: 4.4ch;
  padding: 0.2rem;
  margin: 2rem auto 0;
}

.modal h1 span {
  /*text-decoration: underline;*/
  /*text-decoration-color: #b665c5;*/
  /*background-color: var(--base-alpha);*/
  word-wrap: break-word;
  padding: 0.5rem 1rem;
  /*box-shadow: 6px 6px 0 #8d65c5;*/
}

.modal .language {
  text-decoration: underline;
  text-decoration-color: #b665c5;
  background-color: var(--base-alpha);
  word-wrap: break-word;
  padding: 0.5rem 1rem;
  box-shadow: 6px 6px 0 #8d65c5;
}

.modal .language a.lang.hu {
  cursor: pointer;
}

main p {
  color: var(--base);
  background-color: var(--invert);
  border-radius: 2rem;
  padding: 0 1.5rem;
  inline-size: auto;
  margin-inline: auto;
  display: inline-block;
}

.query {
  display: grid;
  grid-template-columns: auto minmax(16rem, 40rem) auto;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 5px 0 var(--base-alpha);
  text-align: center;
  padding: 1rem;
  background-color: var(--invert);
}

/*.container > :nth-child(2) {
  border-block-end: 6px solid #b665c5;
}*/

.container > :nth-child(4) {
  border-block-start: 6px solid #b665c5;
  box-shadow: none;
}

.query span {
  display: grid;
  color: var(--base);
  text-align: left;
  grid-template-columns: 50% 50%;
}

.query h2 {
  margin: 0;
  color: var(--base);
}

.query label {
  line-height: 4rem;
  text-align: center;
  color: var(--base);
}

.query input[type="text"] {
  border: 4px solid var(--base-alpha);
  background-color: var(--base);
  color: var(--invert);
  text-indent: 0.5rem;
  box-shadow: 0 0 1rem var(--invert-alpha);
  inline-size: 14ch;
  display: inline-block;
  cursor: not-allowed;
  text-align: center;
}

.query input[type="search"] {
  border: 4px solid var(--base-alpha);
  background-color: var(--base);
  color: var(--invert);
  box-shadow: 0 0 1rem var(--invert-alpha);
  inline-size: min(40rem, 100%);
  padding: 0.25rem 0.75rem;
}

.query input[type="text"]::placeholder,
.query input[type="search"]::placeholder {
  background-color: var(--base);
  color: var(--invert-alpha);
  padding: 0.5rem 0;
}

.query button {
  border: 4px solid var(--base-alpha);
  background-color: var(--base);
  color: var(--invert);
  padding: 0.25rem 1rem;
  cursor: pointer;
  /*inline-size: 98dvw;*/
}

.query output {
  grid-column: 1 / -1;
  color: var(--base);
  min-block-size: 1.4em;
}

.search-modal .modal-header button {
  position: absolute;
  top: 1rem;
  right: 3rem;
  background-color: transparent;
  border-width: 0;
}

.search-modal .modal-body > div > div {
  font-size: 6rem;
}

.search-modal .modal-body {
  display: grid;
  grid-template-columns: repeat(1, 200px);
}

/*[disabled] { cursor: not-allowed !important }*/

/* .pagecontent (main) */

.pagecontent {
  /*background: linear-gradient(360deg, #8d65c5 0%, var(--base) 100%);*/
  background-color: var(--base);
  padding: 0;
  line-height: 1.5;
}

.pagecontent .text {
  display: inline-block;
  inline-size: 100%;
  /*line-height: 6ch;*/
  color: var(--invert);
  margin-block: 0;
  margin-inline: auto;
  background: var(--base);
}

.pagecontent .text em {
  color: var(--invert);
  white-space: nowrap;
}

.pagecontent .text span {
  color: var(--invert);
  margin-block-end: 0.5rem;
  letter-spacing: 2px;
}

.pagecontent .text p {
  background-color: var(--base);
  margin: 1rem 0;
}

.pagecontent .text strong {
  color: var(--base);
  background-color: var(--invert);
  padding: 0.25rem;
  margin: 0;
  place-self: baseline;
  margin-inline: auto;
}

/*.pagecontent .parts {
    max-inline-size: 100vw;
}*/

/*.pagecontent .parts section > .accordion__content {
  letter-spacing: 1px;
    background-color: var(--invert);
    padding: 1rem;
}*/

.pagecontent .parts section h2 {
  color: var(--base);
  letter-spacing: 2px;
  background-color: var(--invert);
  margin: 0 1rem 1rem;
  max-inline-size: fit-content;
  padding: 0 1rem;
  /*border-radius: 2rem;*/
  font-size: 2rem;
}

.pagecontent .parts section .accordion__content h2:last-child {
  margin-block-end: 0;
}

.pagecontent .parts section .accordion__content h2:only-child {
  padding-block-end: 0;
}

/*.pagecontent .parts section:last-child h2:last-child {
    margin-block-end: 1rem;
}*/

.pagecontent .parts section h1 {
  color: var(--base);
  background-color: var(--base-transparent);
  padding: 0 1rem;
  border-radius: 3rem;
  margin: 1rem 0.5rem;
  max-inline-size: calc(100% - 1rem);
  font-size: 3rem;
}

.pagecontent .parts section hr {
  margin: 0 1rem;
  border-color: var(--base-alpha);
  color: var(--base);
  /*block-size: 1px;*/
  block-size: 4px;
  background-color: var(--base-alpha);
}

.pagecontent p {
  margin: 1rem 1rem 2rem;
  inline-size: auto;
  display: inline-block;
  text-align: left;
}

.pagecontent p strong {
  text-transform: uppercase;
  background-color: var(--invert-alpha);
  padding: 0 1rem;
  margin-inline-end: 1rem;
  /*letter-spacing: 1px;*/
}

.pagecontent .parts section > article > div > div > small {
  font-size: 1.8rem;
  text-shadow: none;
  color: var(--base);
  background-color: var(--invert);
  margin: 0 1rem;
  padding: 0 1rem;
  box-shadow: 4px 4px 0 var(--base);
}

.pagecontent .emojis,
.pagecontent .parts section > article > div {
  /*user-select: none;*/
  text-align: center;
  font-size: 5.5rem;
  /*font-size-adjust: inherit;*/
  /*line-height: 4ch;*/
  /*letter-spacing: 1px;*/
  text-shadow: var(--base) 2px 2px 0;
  place-content: center;
  /*padding: 1rem;*/
  display: grid;
  inline-size: calc(100vw - 5rem);
  grid-template-columns: repeat(7, calc((100vw / 7) - 1rem));
  list-style-type: none;
}

.pagecontent .parts section > article > div > div {
  display: flex;
  flex-direction: column;
}

.pagecontent .parts section > article > div > div,
.modal-body > div {
  display: flex;
  flex-direction: column;
  /*align-items: baseline;*/
  margin-block-end: 2rem;
  place-content: baseline;
  /*min-block-size: 17rem;*/
  position: relative;
}

.pagecontent .parts section > div > div {
  /*padding: 0 1rem 0 0;*/
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.pagecontent .parts section > article > div > div > strong {
  font-size: 1rem;
  text-shadow: none;
  margin-block-start: 1rem;
}

.pagecontent .parts section > article > div > div > strong > a {
  background-color: var(--invert);
  color: var(--base);
  padding: 3px;
  letter-spacing: 1px;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
  transition: 1s all;
  margin-inline-end: 0;
  margin-block-end: 2px;
  display: inline-block;
}

.pagecontent .parts section > article > div > div > strong > a:hover {
  background-color: var(--base);
  color: var(--invert);
}

.pagecontent .emojis {
  display: none; /* !!! */
}

.pagecontent .emojis li {
  font-size: 3rem;
}

.pagecontent .emojis > div,
.pagecontent .parts > div {
  display: grid;
  /*display: block;
    text-align: center;
    max-block-size: 100%;*/
  /*font-size: calc((100vw - 32rem) / 8);*/
  text-decoration: none;
  /*transition: all .5s;*/
  background-color: rgba(141, 101, 197, 0.65);
  padding: 0;
  /*border-radius: 1.5rem;*/
  margin: 1rem;
  /*box-shadow: inset -4px -4px 0 black;*/
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.pagecontent .emojis span,
.pagecontent .parts :not(.accordion__button span) span,
.modal-body > div span {
  word-break: break-word;
  padding: 1rem;
  float: right;
  margin: 1rem;
  /*display: grid;
  place-content: center;*/
  z-index: 100;
  background-color: var(--base);
  color: var(--invert);
  text-shadow: none;
  /*border-radius: 1rem;*/
  line-height: 2rem;
  /*min-height: 4rem;*/
  /*white-space: nowrap;*/
}

.pagecontent .emojis > div > div,
.pagecontent .parts section > article {
  display: grid;
  /*max-inline-size: calc(100vw - 5.2rem);*/
  /*place-content: space-around;*/
}

.pagecontent .emojis span,
.pagecontent .parts .accordion__content span {
  hyphens: auto;
  position: relative;
  margin: 0 1rem 0;
  text-align: center;
  display: block;
  font-size: 2rem;
  user-select: none;
  /*max-inline-size: 15vw;*/
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
}

/*.pagecontent .parts .accordion__content span > span {
  margin: 0;
}*/

.pagecontent .parts .accordion__content > div > div > div {
  position: relative;
  cursor: pointer;
}

.pagecontent .parts .accordion__content > div > div.emoji-search-match {
  background-color: var(--invert-alpha);
}

.pagecontent .parts .accordion__content > div > div.emoji-search-active-match {
  outline: 4px solid #8d65c5;
  border: 4px solid var(--invert);
  outline-offset: 0;
  box-shadow: 0 0 0.5rem var(--invert);
  z-index: 1;
  margin-block-start: -1rem;
  margin-block-end: 1rem;
}

.pagecontent .parts .accordion__content > div > div > div i {
  position: absolute;
  top: 2rem;
  font-style: normal;
  border: 1px solid black;
  margin: 0 1rem 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.75);
  color: black;
  font-size: 1.5rem;
  text-shadow: none;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
}

.pagecontent .emojis span::selection,
.pagecontent .parts .accordion__content span::selection {
  background-color: rgba(141, 101, 197, 0.65);
  color: var(--base);
}

.pagecontent .emojis span::after,
.pagecontent .parts .accordion__content span::after {
  content: " ";
  color: var(--base);
  position: absolute;
  bottom: -42px;
  left: calc((100% - 2rem) / 2);
  right: 0;
  block-size: 33px;
  width: 0;
  background-position: bottom center;
  display: inline-block;
  margin-inline-start: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-block-start: 0.3em solid;
  border-inline-start: 0.3em solid transparent;
  border-block-end: 0;
  border-inline-end: 0.3em solid transparent;
}

main > p {
  text-align: center;
  margin-inline: auto;
  display: inline-block;
}

.search-modal .modal-header button {
  color: var(--invert) !important;
  font-size: 5rem;
  cursor: pointer;
}

/* footer */

.pagefooter {
  border-block-start: 6px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(0deg, #3f0d5f 0%, #681b9a 100%);
  color: white;
  padding-block: 2rem 1rem;
  font-size: 2rem;
}

.pagefooter a {
  color: white;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

.pagefooter p {
  margin: 0 0 1rem 0;
  letter-spacing: 2px;
  text-align: right;
  padding-inline: 2rem;
}

@media (max-width: 1200px) {
  .pagecontent .emojis,
  .pagecontent .parts section > article > div {
    grid-template-columns: repeat(6, calc(100% / 6));
    margin-inline-start: 0.5rem;
  }
  /*
    .pagecontent .emojis > div,
    .pagecontent .parts section > div {
        font-size: calc((100vw - 16rem) / 7);
    }
    */
}

@media (max-width: 980px) {
  .pagecontent .emojis,
  .pagecontent .parts section > article > div {
    grid-template-columns: repeat(5, calc(100% / 5));
    margin-inline-start: 0.5rem;
  }
  /*
    .pagecontent .emojis > div,
    .pagecontent .parts section > div {
        font-size: calc((100vw - 16rem) / 6);
    }
    */
}

@media (min-width: 780px) {
  .pagecontent .emojis > div > div,
  .pagecontent .parts section > article {
    max-inline-size: calc(100vw - 5.2rem);
  }

  .query label[for="mobile"],
  .query input#mobile {
    display: none;
  }
}

@media (max-width: 780px) {
  .query {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
  }

  .query label[for="desktop"],
  .query input#desktop {
    display: none;
  }

  .query > * {
    margin-inline: 0;
    min-inline-size: calc(100% - 2rem);
    display: block;
    margin-block-end: 0.5rem;
    &:last-child {
      margin-block-end: 0;
    }
  }

  .query > br {
    display: none;
  }

  #query span {
    grid-template-columns: 100%;
  }
  #query span > label {
    text-align: center;
  }
  .pagecontent .emojis,
  .pagecontent .parts section > article > div {
    grid-template-columns: repeat(4, calc(100% / 4));
    margin-inline-start: 0.5rem;
  }
  .pagecontent .text,
  .pagecontent .parts .text {
    font-size: 2rem;
  }

  /*.pagecontent .emojis span,
    .pagecontent .parts section > article > div  {
        font-size: 1.6rem;
    }*/
  /*
    .pagecontent .emojis > div,
    .pagecontent .parts section > div {
        font-size: calc((100vw - 16rem) / 5);
    }
    */
}

@media (max-width: 580px) {
  .modal h1 {
    font-size: 4rem;
    line-height: 7rem;
  }

  .pagecontent .emojis,
  .pagecontent .parts section > article > div {
    grid-template-columns: repeat(2, calc(100% / 2));
    margin-inline-start: 0.5rem;
    font-size: 5.5rem;
  }
  /*
    .pagecontent .emojis > div,
    .pagecontent .parts section > div {
        font-size: calc((100vw - 14rem) / 3);
    }
    */
}

@media (max-width: 392px) {
  .pagecontent .emojis,
  .pagecontent .parts section > article > div {
    grid-template-columns: repeat(2, calc(50vw - 2rem));
  }
  /*
    .pagecontent .emojis > div,
    .pagecontent .parts section > div {
        font-size: calc((100vw - 12rem) / 2);
    }
    */
}

@media (max-width: 305px) {
  .pagecontent .emojis,
  .pagecontent .parts section > article > div {
    grid-template-columns: repeat(1, calc(100vw - 4rem));
    font-size: 5.5rem;
  }
}

/*****************************************************************************
   accordion
 *****************************************************************************/

body {
  background-color: var(--base);
}

.keyword-search {
  padding: 0 1rem;
}

.keyword-search__form {
  display: flex;
  flex-flow: row wrap;
}

.keyword-search__text {
  display: block;
  width: calc(100% - 100px);
  color: #333;
  font-size: 16px;
  line-height: 50px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 2rem 0px 0px 2rem;
  border-color: rgba(141, 101, 197, 1);
  padding: 0 15px;
  box-sizing: border-box;
  background-color: white;
  font-size: 2rem;
}

.keyword-search__button {
  display: block;
  width: 100px;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  border-color: rgba(141, 101, 197, 0.45);
  background-color: rgba(141, 101, 197, 1);
  box-shadow: 0 0 2px rgba(141, 101, 197, 0.45);
  border-radius: 0px 2rem 2rem 0px;
  padding: 0 15px;
  box-sizing: border-box;
  cursor: pointer;
}

.accordion {
  width: 100%;
  margin: 0 auto;
}

.accordion__button {
  position: relative;
  padding: 1rem 0 1rem 1rem;
  /*display: grid;
  grid-template-columns: 1fr auto;*/
  width: 100%;
  height: auto;
  text-align: left;
  /*border-radius: 1.5rem;*/
  /*box-shadow: 0 0 2px rgba(141, 101, 197, 0.45);*/
  /*background-color: rgba(255, 255, 255, 0.25);*/
  box-sizing: border-box;
  cursor: pointer;
  font-size: 2.3rem;
}

.accordion__button span {
  background-color: white;
  margin-block-start: 1rem;
  box-shadow: 0 0 1rem rgba(141, 101, 197, 0.45);
  text-decoration: none;
  line-height: 1rem !important;
}

.accordion__button-text {
  color: #333;
  font-size: 18px;
  line-height: 1.4;
  padding: 1rem;
  margin: 0;
}

.accordion__content {
  display: none;
  border-color: #202f55;
  border-style: solid;
  border-width: 0;
  /*order-radius: 2rem;*/
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 2px rgba(141, 101, 197, 0.45);
  padding: 1rem 0;
  margin: 1rem;
  box-sizing: border-box;
}

.accordion__text {
  color: #333;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* issues */

.pagefooter sup {
  white-space: nowrap;
}