/* CSS Document */

@font-face {
	font-family: "PNS";
    src: url("PNS.woff2") format("woff2"),
    	url("PNS.woff") format("woff"),
    	url("PNS.ttf") format("ttf"); 
}  
  #generatedImage {
	  position:relative;
	  max-width: 100%;
	  max-height: 100vh;
	  /* min-width: 80vw; */
	  margin: auto;
	  object-fit: contain;
  }
  
  .wrapper {
	  display: flex;
	  height: 100%;
	  align-items: center;
	  justify-content: space-between;
	  flex-wrap: wrap;
  }
  
  .input {
	  /* position:absolute; */
	  color: white;
	  display: flex;
	  align-items: center;
	  flex-direction: column;
	  justify-content: space-evenly;
	  height: 90%;
	  flex-grow: 1;
	  width: 20vw;
	  min-width: 300px;
	  max-width: 600px;
	  margin: 10px;
	  text-align: center;
	  font-family: "PNS";
	  font-size: 2.5em;
  }
  
  .input > * {
	  width: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
  }
  
  input {
	  text-align: center;
	  font-family: "PNS";
	  font-size: 0.5em;
	  box-shadow: none;
	  border: 0;
	  background-color: rgba(255,255,255,0.20);
	  transition: background-color 0.25s ease;
	  color: white;
  }
  
  input:hover {
	  background-color: rgba(255,255,255,0.40);
  }
  input:focus {
	  background-color: rgba(255,255,255,0.40);
  }
  
  body {
	  background-color:black;
  }
  
  * {
	  margin: 0;
	  padding: 0;
	  height: 100%;
  }

  #info {
	  display: flex;
	  flex-direction: column;
	  position: absolute;
	  top: 10px;
	  left: 10px;
	  height: auto;
	  width: auto;
	  font-family: "PNS";
	  color: aliceblue;
	  font-size: 1em;
  }

  a {
	  color: aqua;
  }

  a:visited {
	  color: pink;
  }