estilo.css

@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
*
{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: 'Abel', sans-serif;
}
html, body 
{
    width: 100%;
    height: 100%;   
    background-color: white;
}
.clear
{
    clear: both;
    display: none;
}
section
{
    width: 100%;
    position: relative;
    border-top: 3px solid purple !important;
}
.overlay
{
    height: 100vh;
    /*background-color: rgba(128, 0, 128, 0.6);*/
}
h1{font-size: 60px; line-height: 65px;}
h2{font-size: 50px; line-height: 55px;}
h3{font-size: 40px; line-height: 45px;}
h4{font-size: 30px; line-height: 35px;}
p{font-size: 22px; line-height: 27px;}

/***Fim dos resets para a paginna*****/

/***CONFIGURANDO HEADER**/
header
{
    z-index: 2;
    position: fixed;
    top: 0px;
    height: 75px;
    width: 100%;
    padding: 10px;
    box-shadow: 1px 1px 15px 0px purple;
    background-color: white;
}
header .logo
{
    float: left;
}
header .logo .logo-web
{
    display: block;
}
header .logo .logo-mobile
{
    display: none;
}
header .logo h1
{
    color: black;
    font-family: 'Sedgwick Ave Display', cursive;
    letter-spacing: 5px;
    animation-name: animacao-logo;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
@keyframes animacao-logo
{
    0%{    
        text-shadow: 1px 1px 1.5px purple;
    }
    50%
    {
        text-shadow: 8px 8px 12px purple;
    }
    100%
    {
        text-shadow: 1px 1px 1.5px purple;
    }
}
header nav
{
    float: right;
}
header nav ul li 
{
    display: inline-block;
}
header nav ul li a 
{
    font-size: 50px;
    padding: 0px 10px;
    color: black;
}
/*****FIM DA ESTILIZAÇÃO DA HEADER*****/

/*******PERSONALIZANDO INICIO******/

main section.inicio
{
    background-image: url(img/background-header.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
main section.inicio .componentes
{
    padding-top: 40vh;
    text-align: center;
}
main section.inicio .componentes h2
{
    margin: 30px 0px;
    color: white;
}
main section.inicio .componentes a
{
    background-color: purple;
    color: white;
    border-radius: 7px;
    margin: 7px;
    padding: 20px;
}

/*******SECAO SOBRE********/

main .sobre
{
    text-align: center;
}
main .sobre h2
{
    display: inline-block;
    margin-top: 10vh;
    border-top: 3px solid white;
    padding: 15px;
    color: purple;
}
main .sobre .service
{
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}
.conteiner-service
{
    width: calc(50% - 40px);
    margin: 20px;
    padding: 20px;
    background-color: rgb(82, 12, 82);
    border-radius: 10px;
}
main .sobre .service .conteiner-service h3, main .sobre .service .conteiner-service p
{
    color: white;
}
.animacao-botao
{
    transition: 1s;
}
.animacao-botao:hover
{
    background-color: rgb(34, 34, 34);
    color: rgb(228, 181, 255)
}


/*****Galeria de Logos****/

 main section.design
{
    text-align: center;
    border-top: 3px solid purple;
}

main section.design .desing-logo
{
    padding-top: 7%;
}
main section.design .galeria
{ 
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    padding: 20px;
}
main section.design .galeria .box-img
{
    width: calc(100% / 5);
}
main section.design .galeria .box-img .img img
{
    width: 100%;
}

/*********WEB E LOJA CSS ENTRELACADO*********/
/***********TRABALHANDO COM LAYOUT*************/
/***********TRABALHANDO COM LAYOUT*************/
/***********GM***********/
section.project
{
    width: 100%;
    padding-top: 10vh;
    display: flex;
    flex-flow: row wrap;
}
.cont {width: 50%; padding: 20px;}
.img-project {width: 50%;}
.img-project img {width: 100%;}
/**********BG*********/

section.project div.cont p
{
    padding-bottom: 10vh;
}
section.project .cont > a
{
    padding: 5px;
    border-radius: 10px;
    font-size: 30px;
    color: white;
    margin-top: 10vh;
    background-color: #800080;
    border: 2px solid white;
}
section.two
{
    display: flex;
    flex-flow: row-reverse wrap-reverse;
}
/********MUNDANDO COR DA SECTION COM IFRAME DA LOJA********/

footer
{
    margin-top: 30px;
    background-color: purple;
    width: 100%;
}
footer
{
    padding: 20px;
    text-align: center;
    color: white;
}
footer .dados
{
    display: inline-block; 
    font-weight: bolder;
}


/**********CSS RESPONSIVO************/
@media screen and (max-width: 900px)
{
    .projeto-gm, .projeto-bg, .img-gm img, .img-bg img
    {
        width: 100%;
        padding: 5vh 10px;
        float: none;
        margin: 0px;
    }
    main .sobre ul
    {
        grid-template-columns: 1fr;
    }
    .conteiner-service
    {
        width: 100%;
        margin: 20px;
        padding: 20px;
        background-color: rgb(82, 12, 82);
        border-radius: 10px;
    }
    /********SECAO DESIGN RESPONSIVA**********/
    main section.design .galeria
    {
        display: block;
    }
    main section.design .galeria .box-img
    {
        width: 90%;
        margin: 0px auto;
    }
    /***********IFRAME RESPONSIVOS************/
    /*******PDF MOBILE******/
    /*****PDF MOBILE******/
}
@media screen and (max-width: 500px)
{
    /***********HEADER RESPONSIVA************/
    header .logo .logo-web
    {
        display: none;
    }
    header .logo .logo-mobile
    {
        display: block;
        font-size: 60px;
    }
}