body{
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: black;
}

.containt{
    width: 90%;
    margin: auto;
    
}

h1{
    font-size: 30pt;
}


header{
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    /* border: solid white 1px;  referencia de margem  */
    padding: 10px;
    position: relative;
}

/* caracteristicas para link */
a{
  text-decoration: none;
  font-size: 20px;
  margin: 2px;
  color: white;
  border-radius: 5px;
  padding: 5px;
}
a:hover {
    background-color: purple;
    color: black;
    padding: 5px;
    transition: 0.4s;
  }
  /* carcteristicas para link */

.logo{
    display: inline;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%)
}
.logo img{
    width: 200px;
}

nav{
   display: inline;
   /* border: solid white 1px;  referencia de margem  */
   position: absolute;
   top: 50%;
   right: 10px;

   transform: translateY(-50%) /*corrige a diferenca do aling top*/
}

nav .icon{
    display: none;
}

.banner{
    padding: 10px;
    height: 312px;
    background-image: url(../img/photo-1592609931095-54a2168ae893.jpeg);
    /* opacity: 60%; */
    background-size: cover;
}



#about{
    margin: auto;
    padding-left: 20px;
    padding-right: 20px;
}

#about img {
    padding-top: 20px;
    padding-bottom: 20px;
    width: 500px;
    float:left;
}

#about p {
    margin: auto;
    padding: 10px;
    text-align: justify;
}

/* opacity black box */
.opBoxBanner{
    width: 93% ;
    margin: auto;
    padding: 40px;
    background: rgba(0,0,0,80%);
    color: white;
    text-align: center;
    border-radius: 20px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
}

.whiteBox{
    width: 100%;
    padding: 10px;
    background-color: white;
    color: black;
    overflow: auto;
    box-sizing: border-box;
    

}

.containtSection{
    padding: 10px;
    margin: auto;
    display: block;
    text-align: center;
    overflow: auto; /*duvida, pq o overflow funciona aqui*/

}


#portfolio{
    padding: 10px;
    background-image: url(../img/photo-1592609931095-54a2168ae893.jpeg);
    /* opacity: 60%; */
    background-size: cover;
    
}
h2{
    text-align: center;
}
/* verificar onde tá essa tag */
.opBox{
    width: 100% ;
    margin: auto;
    padding: 40px;
    background: rgba(0,0,0,80%);
    color: white;
    text-align: justify;
    border-radius: 20px;
    box-sizing: border-box;
    overflow: auto; /* verificar */
}

.opBox p{
    text-align: center;
}

.portContent{
    width: 100%;
    margin: auto;
    /* border: red solid 1px; */
    /* flex start */
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    /* flex end */
    overflow: auto;
}
.portBox{
    width: 300px;
    height: 300px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: table-cell;
    background-color: white;
    border-radius: 20px;
    text-align: center;
    /* float: left; */
    box-sizing: border-box;
}
.portBox img{
    width: 280px;
    margin-top: 30px;
}
.portBox a {
    color: black;
}
.portBox a:hover {
    color: purple;
    background-color:transparent;

}

.containtContact{
    margin-top: 10px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
#contact i{
    display: inline;
    vertical-align: middle;
    
}
/* #contact p{
    display: inline;

} */


/* botão de subir  - verificar comportamento*/

#subir{
	position:fixed;
	bottom:5px;
    right:5px;
    background-color: black;
    color: white;
}


/* botão de subir */

footer{
    height: 50px;
    color: white;
    text-align: center ;

}



@media screen and (max-width: 985px) {

        #about img {
            margin:auto;
            display: block;
            width: 95%;
            float:none;
        }
        #about p {
            float: none;
        }
  }

  @media screen and (max-width: 500px){

    .logo img{
        width: 150px;
    }

    h1{
        font-size: 20px;
    }

    .portBox{
        width: 230px;
        height: 230px;
    }
    .portBox img{
        width: 200px;
        margin-top: 20px;
    }

    /* ainda lidando com isso */
    a:hover{
        background-color: transparent;
        color: white;

    }



  }


      
      
      @media screen and (max-width: 700px){
          /* Ajusta e esconde o menu quando diminuir */
          .topnav a {
              display: none;
              
          }
          .topnav .icon {
              float: right;
              display: block;
              color: white;
            }
          .topnav.responsive {
          position:relative; 
          background-color: black;
          display: block;
          margin-top: 50px;
          margin-right: 0px;
          
        }
        .topnav.responsive a{
            float: none;
            display: block;
            text-align: center;
            padding-top: 10px;
            padding-bottom: 10px;
            
        }
        .topnav.responsive a.icon{
            position: absolute;
            /* border: red 1px solid; */
            right: 10px;
            top: 0px;
            background-color: black;
            padding-bottom: 0px;
          }
          nav{
              right: 0px;
          }
          
         }