@charset 'UTF-8';
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Satisfy&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root{
    --cor-verde: '';
    --fonte: 'Ubuntu';
    --fonte-titulo: 'Satisfy';
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: var(--fonte);
}

body{
    background-image: url('../img/background.png');
    background-size: cover;       /* cobre toda a tela */
    background-position: center;  /* centraliza a imagem */
    background-repeat: no-repeat; /* não repete */
    background-attachment: fixed; /* opcional: efeito fixo ao rolar */
}

form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

input, select, button{
    height: 35px;
    border-radius: 3px;
    border: 1px solid  rgb(151, 127, 101);
    padding-inline: 5px;
    padding: 2px;
}

button{
    margin: 10px 0;
    background-color: green;
    color: white;
    border-color: green;
    cursor: pointer;
    transition: 0.3s;
}

button:hover, button:active{
    background-color: rgb(72, 166, 72);
    border-color: rgb(56, 175, 56);
    transition: 0.3s;
}

label{
    padding: 5px 0;
}

.logo{
    margin: auto;
    text-align: center;
    transition: 0.3s;
}

.logo p{
    font-family: var(--fonte-titulo);
    font-size: 2em;
    color: white;
    background-color: rgb(140, 105, 67);
    padding: 10px;
    border-radius: 3px;
}

.convite{
    text-align: center;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.6);
    font-size: 0.8em;
    margin-top: 5px;
    border-radius: 3px;
}

.conteudo{
    display: grid;
    padding: 10px;
    border: 2px solid rgb(209, 209, 209);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.6);
    transition: 0.3s;
    margin: 10px auto;
}

.rodape{
    text-align: center;
    padding: 5px;
    background-color: rgba(77, 135, 77, 0.5);
    border-radius: 3px;
    transition: 0.3s;
}

.rodape p{
    font-size: 0.8em;
}

.log{
    text-align: center;
    padding: 5px;
    font-weight: bold;
    background-color: white;
    color: rgb(123, 84, 33);
    margin-top: 10px;
    animation: fade 0.7s ease-in alternate infinite;
}

@keyframes fade{
    0%  { color: rgb(19, 167, 81) }
    100%{ opacity: 1; }
}

/* RETRATO */
@media screen and (orientation: portrait) {
    .logo{width: 100%; transition: 0.3s;}
    .logo img{width: 150px;}
    .logo p{border-radius: 0px;}
    .convite{width: 100%; transition: 0.3s; border-radius: 0px;}
    .conteudo{width: 95%; transition: 0.3s; border-radius: 0px;}
    .rodape{width: 100%; transition: 0.3s; border-radius: 0px;}
}

/* PAISAGEM */
@media screen and (orientation: landscape) {
    .logo{width: 60%; transition: 0.3s;}
    .logo img{width: 200px;}
    .convite{width: 60%; transition: 0.3s;}
    .conteudo{width: 60%; transition: 0.3s;}
    .conteudo button{ margin: 10px auto; width: 50%; transition: 0.3s;}
    .rodape{width: 60%; transition: 0.3s;}
}