* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Inter", sans-serif;
}

body {
   background: #09090b;
   color: #e4e4e7;
   padding: 40px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

h1 {
   font-size: 40px;

   color: #fafafa;
   font-weight: bold;

}

span {
   color: #22c55e;
}

p {
   color: #71717a;
   margin: 10px;
}

textarea {
   resize: none;
   width: 100%;
   max-width: 640px;

   padding: 16px;
   border: 1px solid #27272a;

   border-radius: 10px;

   background: #141419;
   color: #fafafa;
   outline: none;
   margin-top: 20px;
}

button {
   width: 100%;
   max-width: 640px;
   background: #22c55e;
   font-size: 16px;
   font-weight: bold;
   border-radius: 10px;
   border: none;
   padding: 15px;
   cursor: pointer;
   margin-top: 10px;
}

.bloco-codigo {
   background: #141419;
   border: 1px solid #27272a;
   border-radius: 12px;
   padding: 16px;
   font-size: 14px;
   color: #34d399;
   line-height: 2;
   overflow: auto;
   max-width: 450px;
   width: 100%;
   white-space: pre-wrap;
   max-height: 450px;
}

.resultado-codigo {
   width: 100%;
   height: 100%;
   max-width: 450px;
   min-height: 350px;
   border: 1px solid #27272a;
   border-radius: 12px;
   background: #141419;
   max-height: 450px;
   margin-top: 10px;
}


.resultado {
   width: 100%;
   max-width: 1200px;
   display: flex;
   gap: 20px;
   justify-content: center;
   margin-top: 20px;
}