body {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: 500;
    margin: 0%;
    padding: 0%;
    width: 100%;
}

#principal {
    background-image: linear-gradient(#0175be, #015d96);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding-bottom: 5%;
}

#imagem {
    width: 30%;
    margin: 10% 5%;
}

#dev {
    background-image: url(./assets/pincelada.png);
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    width: 45%;
    height: 30%;
    text-align: center;
    font-size: 130%;
}

#telefone {
    float: right;
    position: absolute;
    right: 3%;
    white-space: nowrap;
}

ul {
    list-style-type: none;
    margin-left: -3%;
    display: flex;
    flex-direction: row;
}

a {
    display: flex;
    align-content: center;
    align-items: center;
    text-decoration: none;
    color: black;
}

footer {
    font-size: x-large;
    padding: 2%;
}

a:hover {
    color: #0175be;
    opacity: 80%;
}

.material-symbols-outlined {
    padding: 3%;
}

@media only screen and (min-width: 1250px) {
    #dev {
        height: 300px;
        padding-top: 5%;
    }
}

@media only screen and (max-width: 750px) and (min-width: 450px) {
    #principal {
        display: block;
        padding-bottom: 10%;
    }
    footer {
        text-align: center;
        align-items: center;
        padding-left: 0%;
        font-size: large;
    }
    ul {
        flex-direction: column;
        text-align: center;
        align-items: center;
        font-size: large;
    }
    #telefone {
        text-align: center;
        position: static;
    }
    #dev {
        width: 90%;
        margin: 0% 5%;
        height: 9rem;
        padding-top: .4rem;
        align-items: center;
        font-size: 120%;
    }
    #imagem{
        width: 80%;
    }
    .material-symbols-outlined {
        padding: 0% 3% 0% 0% ;
    }
}

@media only screen and (max-width: 450px) {
    #principal {
        display: block;
    }
    #dev {
        width: 90%;
        margin: 0% 5%;
        height: 9rem;
        padding-top: 1.5rem;
        align-items: center;
        font-size: 80%;
    }
    #imagem{
        width: 80%;
    }
    footer {
        text-align: center;
        align-items: center;
        padding: 0%;
        font-size: large;
    }
    #telefone {
        text-align: center;
        position: static;
    }
    ul {
        flex-direction: column;
        text-align: center;
        align-items: center;
        font-size: medium;
        padding: 3%;
    }
    .material-symbols-outlined {
        padding: 0% 3% 0% 0% ;
    }
}