@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&family=Montserrat:wght@600;900&display=swap');
@font-face {
  font-family: 'Apfel Grotezk';
  src: url("/assets/ApfelGrotezk-Fett.woff") format("woff");
  src: url("/assets/ApfelGrotezk-Fett.woff2") format("woff2");
}
*:focus {
  outline: none;
}

textarea {
  resize: none;
}

html {
  border: 0;
  margin: 0;
  padding: 0;
  background: black;
}
body{
  padding: 5em;
  align-items: center;
}
h1{
  font-family: 'Lora';
font-size: 3rem;
margin:0;
padding:0;
background: linear-gradient(180deg, #FFFFFF 22.95%, #000000 200.82%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
h2{
  font-family: 'Apfel Grotesk';
font-size: 1.01rem;
margin:0;
padding:0;
color: #A594FD;
}
.text{
  display: flex;
    margin-bottom: 3.5em;
    flex-direction: column;
}
.container {
display: flex;
justify-content: space-evenly;
  background: black;
  
}

textarea {
  margin: 30px;
  width: 26vw;
  height: 33vh;
  border: none;
  font-family: "Apfel Grotezk";
  font-size: 1rem;
  line-height: 1.7rem;
  color: #F4F5F8;
  background-color: rgba(0, 0, 0, 0);
}
textarea::placeholder{
  color: rgba(255, 255, 255, 0.3);
}
.card-1 {
  width: 30vw;
  height: 40vh;
  background: #131313;
  border-radius: 35px;
}
.card-1:hover{
  background: rgba(19, 19, 19, 0.8);
  transform: translateY(-0.8em);
  transition: 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.card-2 {
  width: 30vw;
  height: 40vh;
  background: #131313;
  border-radius: 35px;
}
/*
.convert{
  margin-top:12vh;
  width: 4rem;
  height: 4rem;  
  background: linear-gradient(130.55deg, #FFFFFF -262.68%, #1E1E1E 54.92%);
border-radius: 4rem;
border:none;
} */
.convert {
  margin-top:12vh;
  width: 4rem;
  height: 4rem;
  border-radius: 4rem;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  border: 0px;
  background-image: linear-gradient(130.55deg, #FFFFFF -262.68%, #1E1E1E 54.92%);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.convert:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
  border: none;
}

.convert:active {
  transform: scale(0.95);
}