html{
    scroll-behavior: smooth;
}
header {
    color: rgb(0, 0, 0);
    text-align: center;
    font-family: 'Syncopate', sans-serif;
    font-weight: bold;
    font-size: 5vw;
    opacity: 1;
    display: block;
    transition: all 2s ease 1s;
    max-height: 10%;
}
    .boasvindas{
        color: rgb(61, 145, 255);
        text-align: center;
        font-family: 'Syncopate', sans-serif;
        font-size: 2vw;
        opacity: 1;
        box-align: center;
        display: block;
        transition: all 1s ease 2s;
        max-height: 30%;
    }

.menu img{ 
width: 80px;
}
    
body{
    color:rgb(4, 9, 10);
    text-align: center;
    font-family:'Open Sans Condensed', sans-serif;
    font-size: 7vw;
    padding: 50px;
    margin: 0;
}
h1{
    font-family:'Syncopate', sans-serif;
    font-size: 200%;
}

    ul.menumenu {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      font-family:'Syncopate', sans-serif;;
      background-color: #333;
      font-size: 20px;
    }
    
    ul.menumenu li {float: left;}
    
    ul.menumenu li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    ul.menumenu li.right {float: right;}
 
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover:not(.active) {
    background-color: #111;
  }
  
.sobre{
    float: right ;
    max-width: 90%;
    min-width: 30%;
    height: 100%;
    border: 20%;
    padding: 10%;
    background-color:#ffffff54;
    font-size: 20px;
    font-family:'Open Sans Condensed', sans-serif;
    margin-left: 120px;
    margin-right: 120px;
}

.portefolio{
    float: center ;
    max-width: 90%;
    min-width: 30%;
    height: 100%;
    border: 20%;
    padding: 5%;
    font-size: 20px;
    font-family: 'Open Sans Condensed', sans-serif;
    text-align: center;
    display: grid;
    margin-left: 120px;
    margin-right: 120px;
      
}

.conteudo{
    padding: 5%;
    flex: 1 1 80%;
    min-height: 100vh;
    float: center;
}

.grelha{
    display: grid;
    height: 100vh;
    width: 100%;
    grid-template-rows:repeat(6, 10vw);
    grid-template-columns:repeat(5, 10vw);
    grid-gap:40px;
}

.pequeno{ 
    background-image: url(../imgs/portefolio4.jpg);
    background-size: cover;
    grid-row:4/ span 1;
    background-color: blue;
    grid-column:3/ span 1;
    justify-content: center;
    align-items: center;
    width: 100%;
    
}

.medio1{ 
    background-image: url(../imgs/portefolio1.jpg);
    background-size: cover;
    grid-row: span 2 ;
    background-color: blue;
    grid-column: 1 /span 2;
    justify-content: center;
    align-items: center;
}
.medio{ 
    background-image: url(../imgs/portefolio5.jpg);
    background-size: cover;
    grid-row: span 2 ;
    background-color: blue;
    grid-column: 1 /span 2;
    justify-content: center;
    align-items: center;
}

.grande{
    background-image: url(../imgs/portefolio3.jpg);
    background-size: cover;
    grid-row: span 3;
    background-color: blue;
    grid-column: span 3;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-widht:764px){ 
    body{
        margin: 0;
        padding: 0; /*não funciona*/
    }
}
.alto{
    background-image: url(../imgs/portefolio6.jpg);
    background-size: cover;
    grid-row: 4/6;
    background-color: blue;
    grid-column: 4/ span 2;
    justify-content: center;
    align-items: center;
}

.largo{
    background-image: url(../imgs/portefolio2.jpg);
    background-size: cover;
    grid-row: 5 / span 2;
    background-color: blue;
    grid-column: span 3;
    justify-content: center;
    align-items: center;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
.nav { position: fixed;  
    top: 0; 
    padding: 0;
}