@charset "UTF-8";

@font-face {
    font-family: "inter_regular-18";
    src: url(../fonts/Inter_18pt-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: "inter_bold-18";
    src: url(../fonts/Inter_18pt-Bold.ttf);
    font-weight: bold;
}

@font-face {
    font-family: "inter_regular-24";
    src: url(../fonts/Inter_24pt-Regular.ttf);
    font-weight: 700;
}

@font-face {
    font-family: "inter_bold-24";
    src: url(../fonts/Inter_24pt-Bold.ttf);
    font-weight: bold;
}

:root {
    --brancoTituloeDestaque: #ffffff;
    --cinzaSecundario: #C0C0C0;
    --cordeFundo: #00030C;
    --cordeFundo-2: #040814;
    --corBotao: #167BF7;

    --fonte_inter-regular-18: 'inter_regular-18', Arial;
    --fonte_inter-bold-18: 'inter_bold-18', Arial;
    --fonte_inter-regular-24: 'inter_regular-24', Arial;
    --fonte_inter-bold-24: 'inter_bold-24', Arial;
    --btn-azul-efeito: #328dfd;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--cordeFundo);
    color: var(--brancoTituloeDestaque);
    font-family: var(--fonte_inter-bold-24);
    font-size: 16px;
}

.principal {
    background-image: url(../images/Background.png);
    background-size: 100vw;
    background-repeat: no-repeat;
    align-items: center;
    text-align: center;
}

.container {
    width: 98.8vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 50% 50%;
}
.container__box {
    margin: 0 4em;
}

.container__box h1 {
    text-align: left;
}

.container__titulo {
    font-size: 28px;
    margin-bottom: 1em;
}

.container__image {
    display: block;
    margin:auto;
    margin-bottom: 1em 0 2em 0;
}
.container__btn {
    text-decoration: none;
    font-family: var(--fonte_inter-regular-18);
    font-size: 16px;
    text-align: center;
    color: var(--brancoTituloeDestaque);
    background-color: var(--corBotao);
    border: 1px solid var(--corBotao);
    border-radius: 8px;
    padding: 1em;
    display: block;
    margin-bottom: 1em;
}

    .container__btn:hover {
        background-color: var(--btn-azul-efeito);
        color: var(--cordeFundo);
    }

.container__segundo_btn {
    background-color: transparent;
    text-decoration: none;
    font-family: var(--fonte_inter-regular-18);
    font-size: 16px;
    text-align: center;
    color: var(--brancoTituloeDestaque);
    border: 1px solid;
    border-radius: 8px;
    padding: 16px;
    display: block;
    margin-bottom: 1em;
}
    .container__segundo_btn:hover {
        background-color: var(--btn-azul-efeito);
        color: var(--cordeFundo);
    }

.container__aviso {
    text-align: center;
    color: var(--cinzaSecundario);
    margin-top: 0.5%;
    font-size: 12px;
}

.secundario {
    align-items: center;
    text-align: center;
}

.secundario__img-plataformas {
    width: 70%;
    margin-left: 6em;
    
}

.container__titulo-secundario {
    font-family: var(--fonte_inter-bold-24);
    font-size: 40px;
    margin-right: 4em;
    margin-bottom: 0.1em;
}

.container__descritivo-texto {
    font-family: var(--fonte_inter-regular-18);
    color: var(--cinzaSecundario);
    font-size: medium;
    text-align: justify;
    margin-left: 2em;
    margin-right: 2em;
    padding-right: 1em;
}

.container__descritivo-texto--secundario {
    font-family: var(--fonte_inter-regular-18);
    color: var(--cinzaSecundario);
    font-size: medium;
    text-align: justify;
    margin: 0 2em 0.7em 2em;
    padding-right: 1em;
}

.segundo__btn {
    display: inline-block;
    margin: 1em 20em 0 2em;
}

.dispositivos {
    width: 98vw;
    height: 100vh; 
}

.dispositivos__titulo {
    text-align: center;
    font-size: 48px;
    font-family: var(--fonte_inter-bold-24);
    color: var(--brancoTituloeDestaque);
    margin: 2.5em 0 1em 0;
}

.dispositivos__lista {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 5em 0;
}

.dispositivos___itens-da-lista {
    font-size: 32px;
    text-align: center;
    color: var(--brancoTituloeDestaque);
    justify-content: center;
}

.rodape {
    text-align: center;
    margin: 10em 4em 2em 4em;
}

.rodape__lista {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin-top: 0.9em;
    font-family: var(--fonte_inter-regular-18);
    font-size: 0.9em;
}
.rodape__itens-da-lista {
    padding: 0 5px;
}

.rodape__lista a {
    text-decoration: none;
    color: var(--brancoTituloeDestaque);
    font-size: 15px;
}

.rodape__lista a:hover {
    color: var(--corBotao);
    text-decoration: underline;
    cursor: pointer;
}
.rodape__texto {
    font-family: var(--fonte_inter-regular-18);
    color: var(--cinzaSecundario);
    margin: 1em 5px 8px 5px;
    font-size: 14px;
}