@import url('https://fonts.googleapis.com/css2?family=Hubballi&family=Marko+One&family=Sail&display=swap');

:root {
  --cor-clara: #EFEFEF;
  --cor-escura: #111;
  --cor-detalhes: #1C2824;
  --background-color: #3D554E;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 100%;
  font: inherit;
}

::selection {
  background-color: rgba(28, 40, 36, 0.5);
}

body {
  width: 100vw;
  margin: 2rem auto;
  background-color: var(--background-color);
}

h1 {
  margin: 1rem;
  color: var(--cor-clara);
  font-size: 4rem;
  font-family: "Sail", system-ui;
  text-align: center;
  text-shadow: 1px 2px var(--cor-detalhes);
}

form {
  width: 90vw;
  margin: .5rem auto;
  padding: 0 .5rem .5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}

label, .button {
  font-size: 1.1rem;
  font-family: "Marko One", serif; 
}

label {
  padding: 1rem .1rem .1rem;
  align-self: flex-start;
  color: var(--cor-clara);
  text-shadow: 1px 1px var(--cor-detalhes); 
}

.button {
  margin: .5rem 0;
  padding: .5rem .7rem;
  align-self: flex-end;
  cursor: pointer;
  color: var(--cor-detalhes);
  border: 2px solid var(--cor-detalhes);
  background-color: var(--cor-clara);
  border-radius: 7px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.button:hover {
  font-weight: bold;
  border-width: 2px 4px 4px 2px;
  box-shadow: 0px 0px 8px 0 rgba(200, 200, 200, 0.2), 2px 2px 10px 0 rgba(200, 200, 200, 0.19);
}

.button:active {
  border-width: 2px 3px 3px 2px;
}

.textarea__conteudo {
  height: 10rem;
  white-space: pre-wrap;
}

.input__titulo, 
.textarea__conteudo {
  align-self: stretch;
  padding: .3rem .5rem;
  color: var(--cor-escura);
  font-size: 1.2rem;
  font-family: "Hubballi", sans-serif;
  border: 2px solid var(--cor-detalhes);
  background-color: var(--cor-clara);
  border-radius: 7px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.button:focus,
.input__titulo:focus, 
.textarea__conteudo:focus {
  outline: 3px solid var(--cor-clara);
  background-color: #C4CDC8;
}

.resultado {
  width: 85vw;
  margin: 1.5rem auto;
  padding: 1.5rem;
  color: var(--cor-escura);
  border: none;
  border-radius: 7px;
  background-color: var(--cor-clara);
  box-shadow: 0px 4px 8px 0 rgba(200, 200, 200, 0.2), 0px 6px 20px 0 rgba(200, 200, 200, 0.19);
}

.titulo__resultado::first-letter, 
.conteudo__resultado::first-letter {
  text-transform: capitalize;  
} 

.titulo__resultado {
  padding-bottom: .5rem;
  font-size: 1.3rem;
  font-family: "Marko One", serif;
  text-align: left;
}

p {
  font-size: 1.2rem;
  font-family: "Hubballi", sans-serif;
  white-space: pre-wrap;
}

.conteudo__resultado {
  padding-right: .4rem;
  text-align: justify;
  overflow-wrap: break-word;
}

.erro__resultado {
  width: 85vw;
  margin: 1rem auto;
  padding: 2rem 1rem;
  text-align: center;
  color: #7C0D0D;
  background-color: var(--cor-clara);
  border: 1px solid #7C0D0D;
  border-width: 0px 3px;
}

@media only screen and (min-width: 990px) {
  h1 {
    font-size: 5rem;
  }

  form {
    width: 72vw;
    margin: 2rem auto;
    padding: .5rem 0rem;
    display: grid;
    gap: 1rem;
    justify-content: center;
    grid-template-columns: .5fr 2fr .5fr;
  }

  label, .button {
    padding: .5rem 0rem;
    font-size: 1.3rem;
  }

  .button {
    margin: 0;
    padding: .5rem 1rem;
    grid-row: 1 / 3;
    grid-column: 3 / 4;
    align-self: end;
    justify-self: end;
  }

  .input__titulo, 
  .textarea__conteudo {
    align-self: auto;
    font-size: 1.3rem;
  }

  .resultado {
    width: 80vw;
    padding: 2rem;
    padding-right: 3rem;
  } 

  .titulo__resultado {
    font-size: 1.6rem;
  }

  p {
    font-size: 1.5rem;
  }

  .erro__resultado {
    width: 80vw;
    margin: 3rem auto;
    padding: 2rem;
  }
}