@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&family=VT323&display=swap');
.showImage
  {
    position: absolute;
    top: 2%;
    height: 93%;
    left: 20%;
    width: 60%;
    background: rgba(24, 24, 24, 0.79);
    backdrop-filter: blur(10px);
    z-index: 200;
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    transition: 0.5s;

  }

  .showImage.hidden 
  {
     transform: translateY(1000px);
     opacity: 0;
     transition: 0.5s;
  }


  .showImage .backButton
  {
    position: absolute;
    top: 95%;
    left: 93%;
    color: #fff;
    font-size:2em;
    cursor: pointer;
  }
  
  .showImage .PromptDisplay {
      position: absolute;
      height: 150px;
      text-align: justify;
      color: rgb(246, 246, 134);
      top: 70%;
      left: 50%;
      transform: translateX(-50%);
      max-height: 80px;
      width: 70%;
      background: #2d2d2d;
      user-select: none;
      font-size: 0.8em;
      overflow-x: hidden;
      overflow-y: auto;
      max-height: 100px;
      flex-wrap: wrap;
      word-wrap: break-word;
      resize: none;
      box-sizing: border-box;
      user-select: none;
      cursor: pointer;
      border-radius: 8px;
      outline: none;
      border: 0.25px solid #777;
      user-select: none;
      display: flex;
    }
  .showImage .PromptDisplay::-webkit-scrollbar
  {
    display: none;
  }


  .PromptDisplay pre {
    background-color: transparent;
    position: absolute;
    top: -10%;
    color: #f8f8f2;
    font-size: 1.3em;
    width: 88%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;
    overflow-x: auto;
    white-space: pre-wrap;
    letter-spacing: 2px;
    font-family: "VT323", monospace;
}

/* Style the code content */
.PromptDisplay code {
  position: relative;
  top: 0;
    background: none;
    color: inherit;
    padding: 0;
    font-size: 1.5em;
    color: #66d9ef;
    font-family: "VT323", monospace;
}

/* Style keywords differently for syntax highlighting */
/* Style keywords differently for syntax highlighting */
.PromptDisplay .keyword {
  color: #f92672; /* Bright pink */
  font-weight: bold;
  background-color: #3e3e3e; /* Darker background for keywords */
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

/* Hover effect for keywords */
.PromptDisplay .keyword:hover {
  background-color: #f92672; /* Bright pink background on hover */
  color: #2d2d2d; /* Dark text color for contrast */
}

/* Additional styles for markdown-like elements */

.PromptDisplay  {
  color: #66d9ef; /* Light blue for italic text */
}

  .showImage .shareZone {
    position: absolute;
    top: 26%;
    left: 58%;
    height: 40px;
    width:  50px;
    background: #191919; /* Light grey background for the neumorphic effect */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid rgb(255, 221, 0);
    cursor: pointer;
    transition: 0.5s;
    transition-delay: 0.5s;
    box-shadow: inset 5px 5px 10px #131212, /* Darker grey for the inner shadow */
                inset -5px -5px 10px #121111; /* Lighter grey for the inner highlight */
  }
  
.showImage .shareZone ion-icon
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: rgb(255, 221, 0);
  text-shadow: 0 0 10px #b552f3;
  font-size: 1.3em;
}
  


.showImage .copyZone {
  position: absolute;
  top: 78%;
  left: 80%;
  height: 40px;
  width: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
  transition-delay: 0.5s;

}

.showImage .copyZone ion-icon
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: rgb(255, 221, 0);
  text-shadow: 0 0 10px #b552f3;
  font-size: 1.3em;
}
 


.downloadBox 
  {
    font-family: "VT323", monospace;
    font-size: 2em;
  }
  .downloadBox,button::after {
    top: 88%;
    left: 50%;
    transform: translateX(-50%) scale(1);
    padding: 10px 50px;
    border: none;
    border-radius: 5px;
    color: white;
    background-color: transparent;
    position: absolute;
    border: 3px solid rgb(41, 41, 41);
    cursor: pointer;
  }
  
  .downloadBox::after {
    --move1: inset(50% 50% 50% 50%);
    --move2: inset(31% 0 40% 0);
    --move3: inset(39% 0 15% 0);
    --move4: inset(45% 0 40% 0);
    --move5: inset(45% 0 6% 0);
    --move6: inset(14% 0 61% 0);
    clip-path: var(--move1);
    content: 'Download';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
  }
  
  .downloadBox:hover::after {
    animation: glitch_4011 1s;
    text-shadow: 10 10px 10px black;
    animation-timing-function: steps(2, end);
    text-shadow: -3px -3px 0px #1df2f0, 3px 3px 0px #E94BE8;
    background-color: transparent;
  }
  
  .downloadBox:hover {
    text-shadow: -1px -1px 0px #1df2f0, 1px 1px 0px #E94BE8;
  }
  
  .downloadBox:hover {
    background-color: transparent;
    border: 1px solid #2268ff;
    box-shadow: 0px 10px 10px -10px #2268ff
  }
  
  
  @keyframes glitch_4011 {
    0% {
      clip-path: var(--move1);
      transform: translate(0px,-10px);
    }
  
    10% {
      clip-path: var(--move2);
      transform: translate(-10px,10px);
    }
  
    20% {
      clip-path: var(--move3);
      transform: translate(10px,0px);
    }
  
    30% {
      clip-path: var(--move4);
      transform: translate(-10px,10px);
    }
  
    40% {
      clip-path: var(--move5);
      transform: translate(10px,-10px);
    }
  
    50% {
      clip-path: var(--move6);
      transform: translate(-10px,10px);
    }
  
    60% {
      clip-path: var(--move1);
      transform: translate(10px,-10px);
    }
  
    70% {
      clip-path: var(--move3);
      transform: translate(-10px,10px);
    }
  
    80% {
      clip-path: var(--move2);
      transform: translate(10px,-10px);
    }
  
    90% {
      clip-path: var(--move4);
      transform: translate(-10px,10px);
    }
  
    100% {
      clip-path: var(--move1);
      transform: translate(0);
    }
  }
  


  .showImage .creationTag {
    position: absolute;
    top: 65%;
    left: 50%;
    width: auto;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1.4em;
    font-family: "VT323", monospace;
    white-space: nowrap;       /* Prevents the text from wrapping to the next line */
    overflow: hidden;          /* Ensures that any overflowing text is hidden */
    text-overflow: ellipsis;   /* Optionally, you can add ellipsis to indicate overflow */
  }

  .instaUpload {
    position: absolute;
    top: 88%;
    left: 30%;
    transform: translate(-50%); /* Center the button */
    padding: 1em;
    outline: none;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-radius: 10px;
    color: #fff;
    font-weight: 300;
    font-size: 2em; /* Set font size to 2em */
    font-family: inherit;
    z-index: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
    display: none;
}


  .instaUpload ion-icon
  {
    position: absolute;
    left: 0px;
    margin-right: 5px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }



  .openSeaUpload {
    position: absolute;
    top: 88%;
    left: 70%;
    transform: translate(-50%); /* Center the button */
    padding: 1em;
    outline: none;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    background: linear-gradient(45deg, #33aaff, #3366ff, #3333ff, #6633ff, #9933ff);
    border-radius: 10px;
    color: #fff;
    font-weight: 300;
    font-size: 2em; /* Set font size to 2em */
    font-family: inherit;
    z-index: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
    display: none;
    
  }
  
  
  .openSeaUpload ion-icon
  {
    position: absolute;
    left: 0px;
    margin-right: 5px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }



  .showImage .imageContainer {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 22px;
    background-color: transparent; /* Light grey background for the neumorphic effect */
  }
  .showImage .imageContainer .imgDisp {
    max-width: 100%;
    max-height: 100%;
    filter: blur(20px);
    object-fit: contain;
    transition: 0.25s;
    overflow: hidden;
    pointer-events: none;
}
 .showImage .imageContainer .imgDisp.loaded {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transition: 0.25s;
      filter: blur(0px);
      border: 2px solid #f09433;
    }   
