@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

*{
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    list-style: none;
    border-collapse: collapse;
    text-decoration: none;
}

html{
    font-size: 62.5%;
}

body{
    font-size: 1.8rem;
    width: 100%;
    font-family: var(--fonte-paragrafos);
    background: var(--cor-branco);
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--fonte-titulos) !important;
    text-align: center;
}

:root{
    --cor-principal: #7746C6;
    --cor-secundaria: #5262CA;
    --cor-terciaria: #3086CF;
    --cor-principal-linear: linear-gradient(90deg,rgba(119, 70, 198, 1) 0%, rgba(82, 98, 202, 1) 50%, rgba(48, 134, 207, 1) 100%);
    --cor-preto: black;
    --cor-branco: #fff;
    --cor-cinza: #343746;
    --fonte-titulos: "Manrope", sans-serif;
    --fonte-paragrafos: 'Montserrat', sans-serif;
}

.sucesso, .erro, .info{
    border-radius: 1rem;
    padding: 1rem 2rem;
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.sucesso{
    color: var(--cor-preto);
    background: #2ff15d;
}

.erro{
    color: var(--cor-branco);
    background: #e71717;
}

.info{
    color: var(--cor-preto);
    background: #0aa2e9;
}

/* Container - Inicio */

.container{
    width: 100%;
    padding: 2rem 0;
    background: var(--cor-principal-linear);
}

.container>div>h1, .container>div>p{
    color: var(--cor-branco);
    text-align: center;
}

.container>div{
    width: 90%;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}

.gerador{
    width: 60rem;
    min-height: 40rem;
    padding: 2rem;
    background: var(--cor-branco);
    border-radius: 3rem;
    display: flex;
    flex-flow: column nowrap;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}

.gerador img{
    width: 30rem;
}

.gerador input, .gerador textarea{
    width: 100%;
    background: var(--cor-branco);
    color: var(--cor-preto);
    border: 0.18rem solid var(--cor-preto);
    font-weight: bold;
    cursor: pointer;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: .3s;
    font-size: 1.6rem;
}

.gerador textarea{
    padding: 0;
}

.gerador button, .gerador a{
    width: 100%;
    background: var(--cor-principal);
    color: var(--cor-branco);
    border: none;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: .3s;
    font-size: 1.6rem;
    text-align: center;
}

.gerador button.copiar{
    background: var(--cor-secundaria);
}

.gerador button:hover, .gerador a:hover{
    transform: scale(1.05);
}

.gerador input::placeholder{
    font-family: var(--fonte-paragrafos);
}

.loader{
  width: 5rem;
  height: 5rem;
  display: none;
  border-radius: 50%;
  border: 0.5rem solid black;
  border-top-color: cyan;
  animation: loader 1s linear infinite;
}

@keyframes loader{
  100%{
    transform: rotate(360deg);
  }
}

/* Container - Inicio */

/* Container - Fim */

@media(max-width: 500px){

    html{
        font-size: 50%;
    }

}

@media(max-width: 670px){

    .gerador{
        max-width: 100%;
    }

}

@media(max-width: 300px){

    html{
        font-size: 30%;
    }

}