@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Russo One'), local('RussoOne-Regular'), url(../carteles/fonts/Z9XUDmZRWg6M1LvRYsHOy8mJrrg.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Russo One'), local('RussoOne-Regular'), url(../carteles/fonts/Z9XUDmZRWg6M1LvRYsHOwcmJrrg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Russo One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Russo One'), local('RussoOne-Regular'), url(../carteles/fonts/Z9XUDmZRWg6M1LvRYsHOz8mJ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  --color-mode: ;
  --default-screen-color: white;
  --default-background-color: #fafafa;
  --default-background2-color: #f0f0f0;
  --default-background-color-rgb: 250,250,250;
  --default-background-title-color: green;
  --default-title-color: #eee;
  --default-shadow-color: #222;
  --default-font-color: #444;
}

body[dark] {
  --color-mode: dark;
  --default-screen-color: #000;
  --default-background-color: #222;
  --default-background2-color: #303030;
  --default-background-color-rgb: 34,34,34;
  --default-background-title-color: #141;
  --default-title-color: #bbb;
  --default-shadow-color: #000;
  --default-font-color: #ccc;
}

body {
  --default-radius: 5px;
  --default-padding: 0.5em;
}

body {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  background-color: var( --default-screen-color );
  color: var(--default-font-color);
}

.box {
  border-radius: var(--default-radius);
  box-sizing: border-box;
  background-color: var(--default-background-color);
}

.box-shadow {
  box-shadow: 3px 3px 5px var( --default-shadow-color );
}

.box-margin-vertical {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.box-padding {
  padding: 0.5em;
}

body[dark] .box-shadow {
  box-shadow: 3px 3px 7px var( --default-shadow-color );
}

.box-border {
  border: 1px solid var( --default-shadow-color );
}

.box .box-title {
  border-bottom: 1px solid var( --default-shadow-color );
  color: var(--default-title-color);
  padding: var(--default-padding);
  font-size: 120%;
  font-weight: bold;
  font-style: italic;
  background-color: var(--default-background-title-color);
  border-top-left-radius: var(--default-radius);
  border-top-right-radius: var(--default-radius);
}

.box .box-body {
  color: var(--default-font-color);
  padding: var(--default-padding);
}

.box-margin {
  margin: 0.5em;
}

.modal-overlay {
  position:fixed;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: 100vh;
  filter: blur(4px);
  display: none;
}

.modal-filter-blur {
  filter: blur(4px);
}

.modal-filter-dark {
  background-color: rgba(0,0,0,0.80);
}

.modal-container {
  position:fixed;
  margin-left: auto;
  margin-right: auto;
  padding: 2vw;
  text-align: center;
  background-color: var( --default-background-color);
}

.modal-center-horizontal {
  left: 50%;
  transform: translateX(-50%);
}

.modal-center-vertical {
  top: 50%;
  transform: translateY(-50%);
}

.modal-center-horizontal-vertical {
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.nobreak {
  break-inside: avoid;
}

@media print {
  body {
    --default-screen-color: white;
    --default-background-color: white;
   --default-background2-color: #f0f0f0;
   --default-background-color-rgb: 255,255,255;
  }
  body[dark] {
    --default-screen-color: white;
    --default-background-color: white;
    --default-background2-color: #f0f0f0;
    --default-background-color-rgb: 255,255,255;
    --default-background-title-color: green;
    --default-title-color: #eee;
    --default-shadow-color: #222;
    --default-font-color: #444;
  }
}