/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *





*/

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: fade 0.1s ease both;
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Cyrilic support: https://github.com/Tural/AntonFont/blob/master/fonts/Anton.otf */
@font-face {
  font-family: 'Anton';
  src: url(/assets/Anton-dcce2f6268691156680a85a8ec1d7eea14d38cfa0ac2390331e22a63a1a352f9.otf) format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Pattaya';
  src: url(/assets/Pattaya-Regular-7e7f446287d44e80455aea23043a014ad133722152c14310e47205342961c9f4.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(/assets/NunitoSans-VariableFont_YTLC,opsz,wdth,wght-dc39e2e5d157b193fcfde51953b2b9d540c10f7917ea7f716287b51ea6ec49db.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(/assets/NunitoSans-Italic-VariableFont_YTLC,opsz,wdth,wght-211fea140e1becdfc1dee5c10d41e6cc645dad1c96821b30b0e2391414ff230e.ttf) format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'VictorMono';
  src: url(/assets/VictorMono-VariableFont_wght-e3adcb9b9b83d8e9554e0357780d825c74ab1b4d8c3301f4441114e5204575e3.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
.pagination-container {  
  padding: 15px 0 0px 0;
  overflow: hidden;
}

.page_button_content {
  border-top: 1px solid var(--color-primary-content-dimmed);
  color: var(--color-primary-content-dimmed);
  display: flex;
  width: 100%;
}

.page_button_content {
  padding: 10px 0;
}

.page_button_content li a, .page_button_content li span { 
  padding: 10px 20px;
}

.page_button_content li a { 
  &:hover {
    border-top: 3px solid var(--color-primary-content-dimmed);
  }
}

.selected-page {
  border-top: 3px solid var(--color-primary-content);
  color: var(--color-primary-content);
}

.gap {
  flex: 1;
  align-items: center;
  text-align: center;
}
.quote {
border-left: 5px solid var(--color-primary-content-dimmed);
  font-size: smaller;
  font-style: italic;
  padding: 2px;
  padding-left: 10px;
  margin: 5px 0;
  color: var(--color-primary-content-dimmed);
}

.auto_html a{
  color: var(--color-link);
  overflow-wrap: break-all;
}

.auto_html a:hover {
  color: var(--color-link-hover);
  overflow-wrap: break-all;
}

.auto_html p {
  margin-bottom: 0.7em;
}
/* styles.css */
.theme-light {
  --color-accent: #5a7c80;
  --color-action: #e01a1a;
  --color-danger: #f56262;
  --color-notice: #32df85;
  --color-input-background: #ffffff;
  --color-input-content: #22222c;
  --color-link-hover: #328eff;
  --color-link: #4332c7;
  --color-primary-alt-1: rgba(255, 255, 255, 0.6);
  --color-primary-alt-2: rgba(255, 255, 255, 0.4);
  --color-primary-alt-3: rgba(255, 255, 255, 0.2);
  --color-primary-content-dimmed: #3b525d;
  --color-primary-content: #1b1b1b;
  --color-primary: #e1e8e6;
  --color-secondary-content-dimmed: rgba(255, 255, 255, 0.4);
  --color-secondary-content: #eee;
  --color-secondary: #5a7c80;
  --color-significant-1: rgb(252, 108, 108);
  --color-significant-2: rgb(0, 93, 94);
}

.theme-dark {
  --color-accent: #5a7c80;
  --color-action: rgb(182, 0, 0);
  --color-danger: #e01a1a;
  --color-notice: #1ca45e;
  --color-input-background: #ffffff;
  --color-input-content: #22222c;
  --color-link-hover: #ffffff;
  --color-link: #efd78a;
  --color-primary-alt-1: rgba(0, 0, 0, 0.2);
  --color-primary-alt-2: rgba(255, 255, 255, 0.05);
  --color-primary-alt-3: rgba(255, 255, 255, 0.02);
  --color-primary-content-dimmed: #788182;
  --color-primary-content: #efefef;
  --color-primary: #22222c;
  --color-secondary-content-dimmed: rgba(0, 0, 0, 0.4);
  --color-secondary-content: #eee;
  --color-secondary: #5a7c80;
  --color-significant-1: rgb(248, 139, 139);
  --color-significant-2: rgb(142, 206, 193);
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid #253341;
  -webkit-text-fill-color: white;
  -webkit-box-shadow: 0 0 0px 1000px #253341 inset;
  box-shadow: 0 0 0px 1000px #253341 inset;
  transition: background-color 5000s ease-in-out 0s;
}