@font-face {
    font-family: fonte_titulo;
    src: url( ./Quicksand-Bold.ttf );
}

@font-face {
    font-family: fonte_subtitulo;
    src: url( ./Quicksand-Medium.ttf );
}

@font-face {
    font-family: fonte_texto;
    src: url( ./Quicksand-Regular.ttf );
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
    width: 100vw;
    height: 100vh;
    background: url("./wallpaper.jpg") no-repeat fixed center;
}

.container_fundo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 40vw;
    height: 40vh;
    background: rgba( 0, 0, 0, 0.7 );
}

.container_titulo {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 2%;
}

.container_comentario {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-bottom: 1%;
    width: 100%;
}

.container_logotipos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-bottom: 2%;
    width: 100%;
}

.container_logotipos img {
    margin: 1%;
    width: 8vw;
}

h1 {
    font-family: fonte_titulo;
    font-size: 2vw;
    color: #FFFFFF;
    margin: 0;
}

h2 {
    font-family: fonte_subtitulo;
    font-weight: normal;
    font-size: 1vw;
    color: #FFFFFF;
    margin: 0;
}

h3 {
    font-family: fonte_texto;
    font-weight: normal;
    font-size: 0.9vw;
    color: #DCDCDC;
    margin: 0;
}

h4 {
    font-family: fonte_texto;
    font-weight: normal;
    font-size: 0.5vw;
    color: #D5D5D5;
    margin: 0;
}

/* Página de error */
.pagina_error {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    background-image: linear-gradient(to bottom, #000000 , #1C1C1C, #8B0000);;
}

.containers_error {
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    margin-top: 2vw;
}

.container_error_code {
    width: 10vw;
    height: 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #FF0000;
}

.container_error_code p {
    margin: 0;
    font-family: fonte_subtitulo;
    color: #FFFFFF;
    font-size: 2vw;
}

.container_error_message {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #FFFFFF;
}

.container_error_message p {
    margin: 0;
    font-family: fonte_subtitulo;
    text-align: center;
    color: #000000;
    font-size: 1vw;
}