/* The Magazine Style title */
/* Should work on making this fully responsive, 
but this was mainly an experiment with skew features 
and multiple box-shadows to get this effect. */

:root {
  --size: 2;
  --skew: 7;
  --orange: hsl(20, 100%, 71%);
  --svgfilter: url(#squiggly-0);
  --boxshadow: rgb(22, 12, 3);
  --textshadow: rgb(42, 22, 23);
  --x-tshadow-size: 0.669131px;
  --y-tshadow-size: 0.743145px;
  --x-bshadow-size: 0.819152px;
  --y-bshadow-size: 0.573576px;
  --noise-image: url(data:image/png;base64,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);
}
@media only screen and (max-width: 600px) {
  :root {
    --size: 1.8;
    --x-tshadow-size: 0.223044px;
    --y-tshadow-size: 0.247715px;
    --x-bshadow-size: 0.273051px;
    --y-bshadow-size: 0.191192px;   
  }
}
@media only screen and (max-width: 400px) {
  :root {
    --size: 1.2;
    --x-tshadow-size: 0.223044px;
    --y-tshadow-size: 0.247715px;
    --x-bshadow-size: 0.273051px;
    --y-bshadow-size: 0.191192px;
  }
  .no-mobile {
    display:none  }
}


.lightning {
  display: flex;
  position: relative;
  margin: 12vmin 4vmin;
  filter: var(--svgfilter);
  span {
    color: black;
    letter-spacing: calc(var(--size) * 0.1vmin);
    font-size: 0.8rem;
    padding: calc(0.2 * 1.1rem) 0 0 0;
    margin-right: 1px;
    text-align: left;
    text-shadow: none;
  }
  > * {
    background:#a2ff00; /* Brighter Yellow: A2FF00; /* #f3c016; */
    margin: 3px;
    margin-bottom: 3vh;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: calc(var(--size) * 0.8vmin) calc(var(--size) * 1.6vmin);

    transform: skew(calc(var(--skew) * -1deg), calc(var(--skew) * -1deg));
    font-size: calc(var(--size) * 3vmax);
    font-weight: 700;
    color: Crimson;

    text-transform: uppercase;
    text-align: right;
    border: 2px solid var(--boxshadow);
    border-left: 0;
    text-shadow: var(--textshadow) 0px 0px 0px,
      var(--textshadow) var(--x-tshadow-size) var(--y-tshadow-size) 0px,
      var(--textshadow) calc(var(--x-tshadow-size)*2) calc(var(--y-tshadow-size)*2) 0px,
      var(--textshadow) calc(var(--x-tshadow-size)*3) calc(var(--y-tshadow-size)*3) 0px,
      var(--textshadow) calc(var(--x-tshadow-size)*4) calc(var(--y-tshadow-size)*4) 0px,
      var(--textshadow) calc(var(--x-tshadow-size)*5) calc(var(--y-tshadow-size)*5) 0px,
      var(--textshadow) calc(var(--x-tshadow-size)*6) calc(var(--y-tshadow-size)*6) 0px;

    box-shadow: var(--border) 0px 0px 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*1) calc(var(--y-bshadow-size)*1) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*2) calc(var(--y-bshadow-size)*2) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*3) calc(var(--y-bshadow-size)*3) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*4) calc(var(--y-bshadow-size)*4) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*5) calc(var(--y-bshadow-size)*5) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*6) calc(var(--y-bshadow-size)*6) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*7) calc(var(--y-bshadow-size)*7) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*8) calc(var(--y-bshadow-size)*8) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*9) calc(var(--y-bshadow-size)*9) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*10) calc(var(--y-bshadow-size)*10) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*11) calc(var(--y-bshadow-size)*11) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*12) calc(var(--y-bshadow-size)*12) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*13) calc(var(--y-bshadow-size)*13) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*14) calc(var(--y-bshadow-size)*14) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*15) calc(var(--y-bshadow-size)*15) 0px,
      var(--boxshadow) calc(var(--x-bshadow-size)*16) calc(var(--y-bshadow-size)*16) 0px; 

    &:last-child {
      left: calc(var(--size) * -0.5vmin);
      position: relative;
      text-align: left;
      /* font-size: 8vmin; */
      span {
        border-top: 1px solid;
      }
    }
  }
}

.bg {
  position: absolute;
  top: -5vh;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: auto;
}
.orange {
  background-color: var(--orange);
}

.noisy {
  background-image: var(--noise-image);
}

//
svg {
  height: 1px;
}

.content {
    display: flex;
    justify-content: center;
    padding: 3vh 5px 5px 0;
  }

  iframe.subscribe{
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 150px;        /* Viewport-relative units */
    width: 100vw;
}


.info-box {
    background-color: #A2FF00; /* Adjust background color as needed */
    border-radius: 10px; /* Adjust corner roundness */
    padding: 20px; /* Adjust padding for content */
    display: flex; /* Enables positioning of icon and list */
    justify-content: space-between; /* Positions icon and list horizontally */
    margin: 50px auto; /* Centers the box horizontally */
    position: relative; /* Needed for icon positioning */
    filter: var(--svgfilter);
    width: 70vw;
}
  
  .info-box::before {
    content: "";
    background: url("https://substackcdn.com/image/fetch/w_500,c_limit,f_webp,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Ffc2931ec-5da5-4ac7-95be-7aaf255980bc_640x640.png"); /* Adjust icon bubble color */
    background-size: cover;
    border-radius: 50%; /* Makes the bubble round */); /* Empty element for styling */
    /* Position */
    display: inline-block;
    position: absolute; /* Positions the icon bubble */
    top: -7em; /* Adjusts icon position from top */
    left: 50%;
    transform: translateX(-50%);
    /* Sizing */
    width: 10em; /* Adjusts icon bubble size */
    height: 10em; /* Adjusts icon bubble size */
    /* Shadow */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Adds slight shadow to icon bubble */
  }

  .info-box::after {
    content: "Read more";
    text-transform: uppercase;
    text-align: center;
    font-weight: 800;
    font-size: large;
    /* Button background */
    background: #A2FF00;
    background-size: cover;
    border-radius: 10px; /* Makes the bubble round */); 
    /* Positioning */
    display: inline-block;
    position: absolute; /* Positions the icon bubble */
    bottom: -0.8rem; /* Adjusts icon position from top */
    left: 50%;
    transform: translateX(-50%);
    /* Sizing */
    width: 12rem; /* Adjusts icon bubble size */
    height: auto; /* Adjusts icon bubble size */
    padding: 1rem;
    /* Shadow */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Adds slight shadow to icon bubble */
  }
  
  

  .info-list li, ul{
    display: inline-block; /* Makes list items inline for horizontal layout */
    padding: 10px;
  }

  .info-list__text {
    font-weight: 700;
    color: #333; /* Adjusts text color */
  }
    
body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  position: relative;
  /* clouds */
  /background: #00b4ff;
    color: #333;
    /* height: 100vh; */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}