.overlay-container {
  --container-min-width: 256px;
  --outside-margin: 10px;

  z-index: 10;
  
  position: absolute;
  left: 0;
  top: 0;

  margin: var(--outside-margin);
  margin-bottom: 0;
  /*padding-bottom: 1em;*/
  margin-bottom: 40px;
  width: calc(100% - calc(var(--outside-margin) * 2));
  min-width: var(--container-min-width);
  min-height: calc(100vh - calc(var(--outside-margin) * 2));
  /*height: calc(100% - var(--outside-margin) * 2);*/
  height: auto;
  box-sizing: border-box;
  
  /*border-radius: 1em;*/
  background: rgb(10 10 10 / 0.85);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

.overlay-container * {
  z-index: 11;
}

.overlay-title {
  position: relative;
  display: inline;
  float: left;
  width: 88%;
  margin: 0.3em auto 0.2em;
  /*margin: 0.3em auto 1em;*/
  /*padding-left: 0.08em;*/
  
  font-weight: bold;
  text-transform: lowercase;
  font-variant: small-caps;
  font-size: 4em;
  font-size: clamp(34.4px, 11.8vw, 4em);
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 0.8;

  box-sizing: border-box;
  /*box-shadow: 0 -2.2vw 4.8vw 1.4vw rgba;*/
  /*rgba(213, 210, 77, 0.8);*/
}

@media only screen and (max-width: 500px) {
  @supports not (font-size: clamp(1px, 1px, 1px)) {
    .overlay-title {
      font-size: calc(14.4vw - 8px);
    }

    .close-button {
      font-size: calc(7.2vw - 4px);
    }
  }
}

@media only screen and (max-width: 292px) {
  @supports not (font-size: clamp(1px, 1px, 1px)) {
    .overlay-title {
      font-size: 2.1em !important;
    }

    .close-button {
      font-size: 1.05em !important;
    }
  }
}
@supports (-moz-appearance:none) {
  .overlay-title {
    letter-spacing: 0.05em;
  } 
}

.aqua-font {
  color: #50FFFF;
  text-shadow: 0 0 0.32em rgb(80 255 255 / 0.7);
}

.purple-font {
  color: #a978ff;
  /*text-shadow: 0.1em 0.2em 0.3em rgb(213 210 77 / 1);*/ /* Just yellow heavily blurred */
  /*text-shadow: 0.0em 0.0em 0.12em rgb(169 120 255 / 1), 0.05em 0.15em 0.3em rgb(213 210 77 / 1);*/
  text-shadow: 0 0 0.12em rgb(169 120 255 / 1); /* Just purple slighly blurred */
}

.close-button {
  position: absolute;
  box-sizing: border-box;
  padding-right: 0.5em;
  padding-top: 0.3em;
  right: 0;

  /* Must set overflow hidden to avoid subset font making the link reach vertically too far away from the char.
     Also then has to a) set width and height to avoid cutting the text-shadow effect b) align to top-right to 
     utilize forced extra space for the text-shadow. */
  overflow: hidden;
  width: 1.8em;
  height: 1.8em;
  text-align: right;

  text-decoration: none;
  
  content: "⦻";
  font-size: 2em;
  font-size: clamp(18px, 6vw, 2em);
  font-family: 'Cambria Math', sans-serif;
  line-height: 1.34;
}

@supports (-moz-appearance:none) {
  .close-button {
    line-height: 75%;
    padding-right: 0.4em;
    padding-top: 0.5em;

    /*font-size: 3em;*/
  }
}

@keyframes link-color-warp {
  to {
    color: #a978ff;
  }
}

@media only screen and (hover: hover) {
  .close-button:hover {
      cursor: pointer;
      animation-name: link-color-warp;
      animation-delay: 0s;
      animation-fill-mode: forwards;
      animation-duration: .7s;
    }
}

.aqua-border:before {
  border-color: rgb(80 255 255) !important;
}

.purple-border:before {
  border-color: rgb(169 120 255) !important;
}

.gradient-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--outside-margin);
  bottom: 0;
  /*margin-bottom: var(--outside-margin);*/
  /*box-sizing: border-box;*/
  /*box-sizing: all;*/
  /*box-sizing: content-box;*/
  border-radius: 1em;
  border: 6px solid;
  /*box-sizing: border-box;*/
  /*margin-bottom: var(--outside-margin);*/

  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

@supports ((mask: linear-gradient(#fff 0 0) padding-box exclude, linear-gradient(#fff 0 0) exclude) or 
    (-webkit-mask: linear-gradient(#fff 0 0) padding-box exclude, linear-gradient(#fff 0 0) exclude)) and
    ((mask-composite: exclude) or (-webkit-mask-composite: destination-out)) {

  .aqua-border::before {
    background: linear-gradient(to bottom, rgb(80 255 255), rgb(42 144 144)) border-box;
  }

  .purple-border::before {
    background: linear-gradient(to bottom, rgb(169 120 255), rgb(82 60 144)) border-box;
  }

  .gradient-border::before {
    border: 6px solid transparent !important;
    mask: linear-gradient(#fff 0 0) padding-box exclude, linear-gradient(#fff 0 0) exclude;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box exclude, linear-gradient(#fff 0 0) exclude;
  }

  /* Mozilla requires "mask-composite: exclude" embedded directly into the "-webkit-mask" definition */
  @supports (-moz-appearance:none) {
    .gradient-border::before {
      mask: linear-gradient(#fff 0 0) padding-box exclude, linear-gradient(#fff 0 0) exclude;
      -webkit-mask: linear-gradient(#fff 0 0) padding-box exclude, linear-gradient(#fff 0 0) exclude;
    }    
  }
}

.gradient-border {
  border-radius: 1em;
}