:root {
    --branco-principal: #FFFFFF;
    --cinza-secundario: #C0C0C0;
    --botao-azul: #167BF7;
    --cor-de-fundo: #00030C;
    --fonte-principal: "Inter", sans-serif;
}
*{
    padding: 0;
    margin: 0;
    text-decoration: none;
}
body {
    background: var(--cor-de-fundo);
    color: var(--branco-principal);
    font-family: var(--fonte-principal);
    font-size: 1em;
    font-weight: 400;
}
.principal {
    background-image: url(/assets/Background.svg); /*apenas por questão decorativa, caso seja importante, utilizar img. */
    background-repeat: no-repeat;
    background-size: contain;
    align-items: center;
    text-align: center;
}
.container {
    height: 100vh;
    display: grid;
    grid-template-columns: 50% 50%;
}
.container__caixa {
    margin: 0 6em;
}
.container__titulo {
    font-size: 1.75em;
    font-weight: 700;
}
.container__imagem {
    margin: 1em 0 2em 0;
}

.container__botao {
    color: var(--branco-principal);
    background: var(--botao-azul);
    padding: 1em;
    border-radius: 8px;
    display: block;
    text-align: center;
    margin-bottom: 1em;
    transition: all 0.5s;
}
.container__botao:hover {
    color: var(--botao-azul);
    background: var(--branco-principal);
    transform:scale(1.1);
}
.container__aviso {
    font-size: 0.75em;
    color: var(--cinza-secundario);
}
.botao__secundario {
    background: transparent;
    border: solid 1px var(--branco-principal);
}
.botao__secundario:hover {
    color: #ff0000;
}
.secundario__imagem {
    width: 80%;
}
.secundario {
    align-items: center;
    margin: 0% 15%;
}
.descricao__titulo {
    font-size: 3em;
    margin-bottom: 0.1em;
}
.descricao__texto {
    color: var(--cinza-secundario);
}
.secundario__botao {
    display: inline-block;
    margin-top: 1em;
}
.container__descricao {
    padding: 2em;
}
.dispositivos {
    text-align: center;
}
.dispositivos__lista {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 5em 0;
}
.dispositivos__titulo {
    font-size: 3em;
    color: var(--branco-principal);
}
.lista__item {
    font-size: 2em;
    color: var(--branco-principal);
}
.rodape {
   text-align: center;
   margin: 5em 3em;
}
.rodape__lista {
    display: flex;
    list-style-type: none; 
    justify-content: center;
    margin: 1em;
    gap: 1em;
}
.lista__link a{
    color: var(--branco-principal);
    font-size: 1em;
    gap: 1em;
    transition: 0.3s;
}
.lista__link a:hover {
    color: var(--botao-azul);
}
.lista__link a:active {
    color: red;
}
.rodape__texto {
    color: var(--cinza-secundario);
    font-size: 0.9em;
    margin: 1em 0;
}