@charset "UTF-8";

/* Typical Device Breakpoints
---------------------------
pequenas telas : até 600px;
cel : até 768px
tablet : até 992px
pc até 1200px
grandes telas acima de 1200px */

@media screen and (min-width: 900px){
    header{
        text-align: center;
        margin: 15px;
        border-radius: 5px;
        box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.144);
        width: 30px;
        height: 45px;
        display: flex;
        position: fixed;
        top: 20px;
        left: 20px;
    }
    div#banner{
        display: block;
        background: url('../image/Banners/baner1.png') center center no-repeat;
        background-size: cover;
        height: 500px;
        box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.541);
        width:100%;
        margin-bottom: 50px;
    }
    nav{
        font-size: 1.2em;
        margin: 5px auto;
        flex-direction: column;
    }div.menu p:hover{
        font-size: 1em;
    }
    main{
        display: block;
        margin: auto;
        width: 800px;
        height: calc(100vh - 380px);
    }
    
}
@media screen and(min-width: 1600px){
    header{
        width: 30px;
        height: 350px;
    }
    div#banner{
        height: 350px;
        width:calc(100% - 30px);
    }

}