<link rel="stylesheet" href="https://unpkg.com/98.css">

<div class="window" id="hidethis" style="width: 80%; height: auto;">
  <div class="title-bar" style="background: rgb(21,131,209);
				background: linear-gradient(90deg, rgba(21,131,209,1) 0%, rgba(5,0,128,1) 100%); padding: 0px 3px;">
		<div class="title-bar-text" 
    		 style="margin-right: 18px;
        			 font-family: 'blink';
               letter-spacing: .7px;">
               <b>{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}</b>
    </div>
    <div class="title-bar-controls">
    	<button style="margin-left: 2px;" id="btn-minimize" aria-label="Minimize"></button>
      <button style="margin-left: 2px;" id="btn-maximize" aria-label="Maximize"></button>
      <button id="close" class="btn-old" aria-label="Close"></button>
    </div>
  </div>
  <div class="window-body"
  		 style="font-size: 13px;
       				letter-spacing: .36px;
              word-spacing: -3px;
     					margin: 5px 3px 3px 3px;">         
		<div class="poster-container" style="width:100%;">
<!-- WHY IS "the-shadow" NOT WORKING? --> 
      <img style="width:100%;" src="https://cdn.substack.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fbucketeer-e05bbc84-baa3-437e-9518-adb32be77984.s3.amazonaws.com%2Fpublic%2Fimages%2Fc4ef4561-3cdb-450b-ae3a-8e3ed94d39f7_1078x551.png">
      <div class="the-shadow" 
     			 style="box-shadow: inset -1px -1px #fff, 
                              inset 1px 1px grey, 
                              inset 0px 0px #dfdfdf, 
                              inset 1px 2px #0a0a0a;">
      </div>
    </div>  	
    <div class=movie-content style="padding: 1px 8px 0px 8px">
  	  <strong><p style="font-family: 'blink'; 
                    	  margin-top: 10px; 
            	          margin-bottom: 6px;">{{wf {&quot;path&quot;:&quot;shm-hsrt&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}
      </p></strong>
    	<div style="font-family: 'blink';">
      	<p id="details">{{wf {&quot;path&quot;:&quot;kvtrt-shm-hsrt-vshnh&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}</p>
        <p id="extra-details" hidden>{{wf {&quot;path&quot;:&quot;prtym-nvspym-mvrkhbymmm&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}</p>
          {{wf {&quot;path&quot;:&quot;hqrnh-sh-vt&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}
      </div>
    </div>
	<div class="buttons-container" dir="ltr" style="font-family: 'Blink'; display: flex; justify-content: left; height: 1.8rem; margin-top: 15px;">
		<button style="padding: 5px 0px 2px 0px; 
    							 font-size: 13px; 
                   font-family: 'Blink'; 
          				 margin-left: 0px; 
                   width: 30%;">
    	<a style="width: 100%; 
                height: 100%; 
                display:block; 
                color:black; 
                text-decoration: none" href="{{wf {&quot;path&quot;:&quot;qyshvr-lqnyyt-krtysym&quot;,&quot;type&quot;:&quot;Link&quot;\} }}" target="_blank">כרטיסים</a>
    </button>
          
		<button id="show-extra-details" style="padding: 5px 0px 2px 0px; font-size: 13px; font-family: 'Blink'; width: 35%; margin-left: 6px;">פרטים נוספים 
		</button>
  </div>
</div>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.