:root {
    /* Colors: */
    --cinza-escuro: #404040;
    --cinza-medio: #828282;
    --cinza-claro: #BDBDBD;
    --preto-comp-verde: #00120E;
    --verde-medio: #00B259;
    --verde-claro: #D7DF23;
    --preto-comp-azul: #0B303C;
    --azul-medio: #1268B3;
    --azul-claro: #0095DA;
    --cor-atencao: #FFBD07;
    --cor-erro: #FF0753;
    --cor-info: #812990;
}

body {
    background: rgb(23,28,102);
    background: linear-gradient(0deg, rgba(23,28,102,1) 0%, rgba(0,170,173,1) 100%);
    color: #FFF;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: 14px;
    overflow-x: hidden;
}

h1 { 
    font-weight: 400; 
    font-size: 60px;
}

.mob {
    display: none;
}

h1 strong { font-weight: 700; }

#main {
    margin: 80px auto;
    max-width: 880px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

#right {
    max-width: 402px;
}

#left {
    max-width: 428px;
    background-image: url("img/construction.png");
    background-repeat: no-repeat;
    background-position: bottom right;
    width: 100%;
    height: 500px;
}

#sn {
    display: flex;
    justify-content: space-between;
    max-width: 230px;
}

@media screen and (max-width: 768px) {
    h1 { font-size: 45px; }
    #right { max-width: 297px; }
    #main { margin: 80px 80px 0px -80px; }
}

@media screen and (max-width: 590px) {
    body { text-align: center; }
    #left { display: none; }
    .mob { 
        display: block; 
        margin-left: -100px;
    }
    #main { 
        margin: 80px auto; 
        justify-content: center;
    }
    #right { max-width: 90%;}
    #sn { margin: 0 auto };
}