:root {
    --backFaixa:rgba(0, 0, 0, 0.389);
    --backSombra: rgba(31, 31, 31, 0.256) 5px 5px 10px;
    --backHover: rgba(0, 0, 0, 0.43);
    --backInput: rgba(0, 0, 0, 0.473);
    --backBut: rgb(98, 0, 255);
    --backBut2: rgb(217, 0, 255);
    --backHoverBut: rgb(63, 0, 164);
    --backHoverBut2: rgba(203, 0, 203, 0.74);
}

body {
    background: rgb(246,0,255);
    background: linear-gradient(90deg, rgb(170, 0, 176) 0%, rgb(70, 0, 183) 100%);

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

a {
    text-decoration: none;
}

#titulo {
    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
    font-size: 4vh;
}

#texto2 {
    display: flex;
    align-items: center;
    justify-content: center;

    color: rgb(255, 255, 255);
    font-size: 3vh;
}

main {
    align-content: center;

    background-color: var(--backFaixa);
    height: 45vh;
    border-radius: 5vh;
    box-shadow: var(--backSombra);
}

.conteudo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2vh;
    gap: 3vh;
}

.valor1 {
    height: 7vh;
    width: 50vh;
    border-radius: 5vh;
    border: none;

    background-color: var(--backInput);
    box-shadow: var(--backSombra);
}

.valor1:hover {
    background-color: rgba(75, 75, 75, 0.495);
    transition: all .2s;
}

.valor2 {
    height: 7vh;
    width: 50vh;
    border-radius: 5vh;
    border: none;

    background-color: var(--backInput);
    box-shadow: var(--backSombra);

    outline: none;
}

.valor2:hover {
    background-color: rgba(75, 75, 75, 0.495);
    transition: all .2s;
}

.gerador {
    height: 7vh;
    width: 15vh;
    border-radius: 5vh;
    border: none;
    font-size: 2vh;

    background-color: var(--backBut);
    box-shadow: var(--backSombra);
    color: white;
}

.gerador:hover {
    background-color: var(--backHoverBut);
    color: white;
    transition: all .2s;
}

.resultGeral {
    display: flex;
    justify-content: center;
    align-items: center;
}

.res {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4vh;
    padding: 1vh;
    width: 50vh;
    height: 5vh;

    color: rgb(210, 210, 210);
    font-size: 2vh;
    font-weight: 500;
    
    background-color: var(--backInput);
    border-radius: 5vh;
    box-shadow: var(--backSombra);
}

.res:hover {
    background-color: rgba(75, 75, 75, 0.495);
    transition: all .2s;
}

#copy {
    text-align: center;
    padding: 1vh;
    border-radius: 5vh;
    border: none;
    width: 15vh;
    height: 7vh;
    font-size: 2vh;

    background-color: var(--backBut);
    box-shadow: var(--backSombra);
    color: white;
}

#copy:hover {
    background-color: var(--backHoverBut);
    transition: all .2s;
}

.conteudo:focus, input:focus {
    box-shadow: 0 0 0 0;
    outline: 0;
}

/* TIRAR AS SETAS DO INPUT */

input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    
}
input[type=number] { 
    -moz-appearance: textfield;
    appearance: textfield;

}

/* TIRAR AS SETAS DO INPUT */

/* Centraliza o texto dentro do Input */

input,
input::placeholder {
    text-align: center;
    font-size: 2vh;
    color: rgba(255, 255, 255, 0.818);
}

/* Centraliza o texto dentro do Input */

footer
{
    color: rgba(255, 255, 255, 0.473);
    text-align: center;
    font-style: italic;

    margin: 5vh;
}

.convert {
    background-color: var(--backBut2);
    box-shadow: var(--backSombra);

    border: none;
    border-radius: 5vh;

    padding: .4vh;
    padding-left: 2vh;
    padding-right: 2vh;
    margin: auto;

    font-size: 2.5vh;
    color: white;
    font-weight: 500;
}

.convert:hover {
    background-color: var(--backHoverBut2);
    transition: all .3s;
}