/* editor-fonts.css */
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Bad+Script&family=Caveat:wght@400..700&family=Comfortaa:wght@300..700&family=Comforter+Brush&family=Great+Vibes&family=Inter&family=Kablammo&family=Lobster&family=Marck+Script&family=Pacifico&family=Pattaya&family=Reggae+One&family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Rubik+Wet+Paint&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&family=Train+One&family=Triodion&family=Yanone+Kaffeesatz:wght@200..700&display=swap');

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400; /* Regular weight */
    font-style: normal;
    font-display: swap; /* Ensures text is visible while the font loads */
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500; /* Medium weight */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700; /* Bold weight */
    font-style: normal;
    font-display: swap;
}
/* Italic Regular weight */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic; /* Crucial for defining the italic style */
    font-display: swap;
}

/* Italic Medium weight (if you have the file) */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Italic Bold weight (if you have the file) */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

  body.main {
    background-image: url(/images/photo_2025-04-06_12-16-26.jpg);
  }
  h1.pmHeader {
  	font-family:Triodion;
  	font-size:2.4em;
  	font-weight:100;
    margin-bottom:0;
    color:#004;
    background-color: #ffffff00;
  }
  .welcomeMsg {
    display: flex;
    flex-direction: column;
    max-width:1000px;
  }

  .welcomeMsg p {
    margin:2px 0;
    padding:5px 4px;
    max-width:1050px;  
  }
  .welcomeMsg p img {
    padding:2px;
  }

  button {
    margin:6px 15px 4px 15px;
  }
  div.pmHeader h1 img {
    margin-left: 220px;  
  }

.reaction {
    font-family: 'JetBrains Mono';
}

/* --- css chemical arrow with reacton condition on top BEGIN--- */
.condition {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 92%;
    /* margin-top: 22px;
    margin-bottom: 22px; */
    position: relative;
    white-space: nowrap;
    vertical-align: middle;
    bottom: 0.27em;
}
.condition>span {
    min-width: 10px;
    white-space: nowrap;
    position: relative;
    bottom: 0.5em;
    padding: 0 10px 0 6px;
    font-size: 85%;
}
.condition.short span {
    padding: 0 11px;
}

.condition.processed-js {
    position: relative;
    display: inline-block; 
    vertical-align: middle;
}

.dynamic-arrow {
    position: absolute;
    left: 0;
    bottom: -0.2em;
    pointer-events: none;
    color: black;
    overflow: visible;
}

@media print {
    .dynamic-arrow {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.condition.revertable::before {
     content: '⟵';
    display: block;
    position: absolute;
    left: 0;
    width: 15px;
    top: max(1.14em, 10px);
    height: 13px;
    transform-origin: left;
    transform: scaleX(var(--arrow-scale, 1));
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    pointer-events: none;
}

.condition.revertable.short::before {
    background: url('data:image/svg+xml;utf8,<svg width="25" height="9" xmlns="http://www.w3.org/2000/svg"><line x1="8" y1="4.5" x2="25" y2="4.5" stroke="black" stroke-width="1" /><polygon points="8,2 0,4.5 8,7" fill="black" /></svg>') no-repeat;
    background-size: contain;
}
.condition.revertable.long::before {
    background: url('data:image/svg+xml;utf8,<svg width="100" height="9" xmlns="http://www.w3.org/2000/svg"><line x1="10" y1="4.5" x2="100" y2="4.5" stroke="black" stroke-width="1" /><polygon points="10,2 0,4.5 10,7" fill="black" /></svg>') no-repeat;
    background-size: contain;
}
.condition.revertable.long2::before {
    background: url('data:image/svg+xml;utf8,<svg width="200" height="9" xmlns="http://www.w3.org/2000/svg"><line x1="10" y1="4.5" x2="200" y2="4.5" stroke="black" stroke-width="1" /><polygon points="10,2 0,4.5 10,7" fill="black" /></svg>') no-repeat;
    background-size: contain;
}
/* --- chemical arrow with reacton condition on top END--- */

svg,img,a {
    vertical-align: middle;
    display: inline-block !important;
}

.reaction {
    font-family: 'JetBrains Mono';
}

.xrarr {
    padding: 0 5px;
}