/* DEFAULT */

* {
    box-sizing: border-box;
}

html {
font-family: 'Roboto', sans-serif;
}

html {
    scroll-behavior: smooth;
}

a:link {
color: rgb(160, 212, 229);
}

a:visited {
color:rgb(255, 189, 65) 

}

/* MENU */

.dropbtn {
  background-color: rgb(255, 189, 65);
  color: white;
  height: 40px;
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: center;
}

.dropbtn:hover {
  background-color: rgb(255, 189, 65); 
  
}
.dropbtn:focus {
  background-color: rgb(160, 212, 229);
}

.dropdown {
  position: fixed;
  display: inline-block;
  width: 100%;
}

.dropdown-content {
  display: none;
  background-color: whitesmoke;
  width: 100%;
  overflow: auto;
  text-align: center;
  z-index: 40;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: rgb(255, 189, 65);}

.show {display: block;
}

/*MOBILE */

@media screen and (min-width:460px){ 


header, main, main > section, footer {
  display: grid;
}

header, main, footer{
  max-width: 1600px; 
  margin:0 auto;
}

header {
  grid-template-columns: 1fr 1fr; 
  grid-auto-rows: 40px; 
  

}

header nav {
  align-self: center;
  justify-self:end;
  font-size: 20px;
}

#logotipo{
  display: grid;
  min-height: 200px;
  margin-top:5px;
  margin-bottom: 25px;
  background: url('../images/logotipo.png') no-repeat center center;
  background-size: contain;
}



main #logotipo, main #sobremim, main #seccao3 {
  padding:0px;
}

main #separador-1 {
  grid-template-columns: 1fr;
  height: minmax(150px, auto);
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: 'Amatic SC', cursive;
  background-color: rgb(160, 212, 229);
  color: white;
  font-size: 80px;
  padding-left: 50px;
  padding-top: 5px;
  text-align: center;  
 }

main #sobremim {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(450px, auto);
  grid-column-gap: 5px; 
}

main #sobremim #foto-perfil {
  background: url('../images/plano1.JPG') no-repeat center center;
  background-size: cover;
  height: 100%;
  width: 100%;
  display: grid;
}
main #sobremim #foto-perfil:hover {
 filter: grayscale(4);
 transition: .2s ease-in-out;
}
main #sobremim #texto {
  background-color: rgb(255, 189, 65);
  height: 100%;
  width: 100%;
  display: grid;
  padding: 10px 50px;
  color: azure;
  text-align: center;
  font-size: 20px;
  line-height: 2;
}
main #sobremim #texto:hover {
  color: rgb(69, 120, 139);
  background-color: lavender;
}
main #sobremim article p {
  align-self: center; 
  justify-self:center; 
}

main #separador-2 {
  grid-template-columns: 1fr;
  height: minmax(150px, auto);
  margin-top: 5px;
  font-family: 'Amatic SC', cursive;
  background-color: rgb(160, 212, 229);
  color: white;
  font-size: 80px;
  padding-left: 50px;
  padding-top: 15px;
  text-align: center;  
 }

main #trabalhos {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(600px, auto);
  grid-column-gap: 5px; 
  grid-row-gap: 5px;
  margin-top: 5px;
}



main #trabalhos #trabalhos1 {
  background: url('../images/bandeira.jpg') no-repeat center center;
  background-size: cover;
  height: 100%;
  width: 100%;
  display: grid;
}

main #trabalhos #trabalhos1:hover{
  filter: grayscale(1);
  transition: .2s ease-in-out;
  transform: scale(1.1);
}


main #trabalhos #trabalhos2 {
  background: url('../images/pic2.jpg') no-repeat center center;
  background-size: cover;
  height: 100%;
  width: 100%;
  display: grid;
}
main #trabalhos #trabalhos2:hover {
filter: grayscale(1);
  transition: .2s ease-in-out;
  transform: scale(1.1);
}
main #trabalhos #trabalhos3 {
  background: url('../images/pic3.jpg') no-repeat center center;
  background-size: cover;
  height: 100%;
  width: 100%;
  display: grid;
}
main #trabalhos #trabalhos3:hover {
  filter: grayscale(1);
    transition: .2s ease-in-out;
    transform: scale(1.1);
  }
main #trabalhos #trabalhos4 {
  background: url('../images/livro.jpg') no-repeat center center;
  background-size: cover;
  height: 100%;
  width: 100%;
  display: grid;
}
main #trabalhos #trabalhos4:hover {
  filter: grayscale(1);
  transition: .2s ease-in-out;
  transform: scale(1.1);

  }

footer {
  grid-template-columns: 1fr;
  height: 200px;
  margin-top: 5px;
  background-color: white;
  color: rgb(160, 212, 229);
  font-size: 20px;
  padding-left: 50px;
  padding-top: 35px;
  text-align: center; 
  line-height: 2;
}

/*TABLET */

@media screen and (min-width:768px){ 

  header {
    grid-template-columns: 1fr 3fr;
  }


  header nav {
    align-self: center; 
    justify-self:end; 
  }


  main #sobremim {
    grid-template-columns: 1fr 1fr;
  }

  main #trabalhos {
    grid-template-columns: 1fr 1fr;
  }

}

/*DESKTOP*/

@media screen and (min-width:1200px){ 

    header {
        position: fixed;
        width: 100%;
        height: 60px;
        left: 50%;
        transform: translate(-50%, 0);
    }

    main {
        padding-top: 40px;
    }

  header {
    grid-template-columns: 1fr 2fr;
  }


  header nav {
    align-self: center; 
    justify-self: end; 
    margin-right: 250px
  }


  main #sobremim, main #trabalhos {
    padding:0px;
  }

  main #sobremim {
    grid-template-columns: 1fr 1fr;
  }

 
  main #trabalhos {
    grid-template-columns: 25% 25% 25% 25%;
    margin-right: 30px;
  }
}