styles.css

html,body{
    padding:0;
    margin:0;
    width: 100vw;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
a{
  display: inline-block;
}

.sidebar{
  float:left;
  height:auto;
  min-height: 36vh;
background-color: #00ffcc;
width:auto;
max-width: 6vw;
min-width: 6vw;
position:fixed;
border-radius: 0% 50% 50% 0;
display: grid;

}
#sidebaricon{
  width:5vw;
max-width: 5vw;
min-width: 5vw;

height:5vh;
min-height: 5vh;
max-height: 5vh;

margin-top: 5vh;
}
svg{
  
  border:none;
  position: relative; 
  z-index: -1

  fill-opacity:1;
  stroke-opacity:1;
  width:100%;
  
}

  .top-img, .bottom-img {
    width:100vw;
    height:15vh;
    max-width: 100vw;
    margin:0px;
    padding:0px;
  
    
    /* remove white space below the images */
    display: block;
  
  
    /* images cannot be dragged */
    user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  }
  
  .bottom-img{
    position: absolute;
  }
  
  /* remove horizontal scrollbar */
  ::-webkit-scrollbar {
    display: none;
  }
  
  textarea{
    display: block;
    margin: 0 auto;
    position:relative;
    top:-8vh;
    font-family: 'Noto Sans', sans-serif;
    font-weight: 100;
    outline: none;
    border: 4px solid black;
    border-radius: 15px;
    resize:none;
    overflow: auto;
  }
  textarea::placeholder
{
    text-align: center;
    transform: translateY(5vh);
}
  .header{
  position:relative;
  top:-8vh;
  text-align: center;
  z-index: 999;
      word-spacing: 1vw;
      color: black;
      display: block;
      text-transform: none;
      font-size: clamp(2rem,calc(2rem + 1.2vw),3rem);
      font-weight: 700;
      font-family: Gotham Narrow SSm A,Gotham Narrow SSm B,Rubik,Lato,Lucida Grande,Lucida Sans Unicode,Tahoma,Sans-Serif;
      text-shadow: 0 2px 2px rgb(0 0 0 / 50%);
  }
.author{
  font-size: smaller;
  position:relative;
  text-align: center;
  top:-12vh;
  text-transform: none;
  font-family: Gotham Narrow SSm A,Gotham Narrow SSm B,Rubik,Lato,Lucida Grande,Lucida Sans Unicode,Tahoma,Sans-Serif;
  text-shadow: 0 1px 1px rgb(0 0 0 / 50%);
}
  h3{
    position:relative;
    top:-8vh;
    text-align: center;
    z-index: 999;
        word-spacing: 1vw;
        color: black;
        display: block;
        text-transform: none;
        font-size: clamp(1rem,calc(1rem + 1.2vw),3rem);
        font-weight: 1000;
        font-family: Gotham Narrow SSm A,Gotham Narrow SSm B,Rubik,Lato,Lucida Grande,Lucida Sans Unicode,Tahoma,Sans-Serif;
        text-shadow: 0 2px 2px rgb(0 0 0 / 50%);
  }
h4{
  position:relative;
  top:-8vh;
  text-align: center;
  z-index: 999;
      word-spacing: 0.3vw;
      color: black;
      display: block;
      text-transform: none;
      font-size: clamp(1rem,calc(1rem + 1.2vw),3rem);
      font-weight: 500;
      font-family: Gotham Narrow SSm A,Gotham Narrow SSm B,Rubik,Lato,Lucida Grande,Lucida Sans Unicode,Tahoma,Sans-Serif;
      text-shadow: 0 1.5px 1.5px rgb(0 0 0 / 50%); 
}

  button {
    margin: 0 auto;
    position:relative;
    background-color:inherit;
    border-radius:50%;
    border:2px solid #2ade3c;
    display:block;
    cursor:pointer;
    outline:none;
    color:#ffffff;
    padding:10px;
    text-align: center;
    white-space: nowrap;
    vertical-align:middle;
  }
  Button:active {
    box-shadow: inset 1px 1px 6px #333;
  }
  #copy-img{
    position:relative;
    width: auto;
    height:5vh;
    padding: 5px;
  }