/* resources
• https://css-tricks.com/snippets/css/
*/


/* the css file is where you put all your styles rules, it defines the appereance of your page usually is placed in this way "root/css/whatever.css" */

/* in your html you can assign a 'class' or an 'id' inside your opening tag (i.e. '<p class="something">' ) than you can recall that class ('.something') or id('#something') inside the css and assign rules to specify how your content will be visualized.  */

html, body{
    min-height: 100%;
    width:100%;
}

body{
    font-family: 'Montserrat', sans-serif;
    background-color: WhiteSmoke gray;
}
/* I choose a google font: https://www.google.com/fonts
A very easy way to change font and let repository lighter*/

.main p{
  color: #000000;
  font-size: 18px;
  padding: 0 20% 0 20%;
}

.text p{
width: 960px;
margin: 0 auto;
}

  .lavoro{
    background-image: url(img/texture.png);
    width: 100%;
    height:85%;
    background-repeat: no-repeat;
    background-size: cover;
  }

.nav{
    font-family: 'Montserrat', sans-serif;
    width: 100%;
}

.nav ul{
  list-style: none;
  left:-70px;
    position:relative;
    display: inline-table;
    float: right;
    width: 150px;
    text-shadow: 1px 1px;
    color: #FFD700;

}

.nav li{
    padding:3%;
    position: relative;
    display: inline;
}
.nav li:first-child{
  border-right: 2px solid black;
}
.nav li a, .main-nav .button a, .draft a{
  color: #000;
  text-decoration: none;
}

small {
    font-size: 70%
}

#name{
    width: 35%;
    margin: 0 auto;
    text-align: center;
    padding-top: 35px;
    color: #000;
    font-size: 24px;
    text-shadow: 2px 2px #F5F5F5;
}

#name_about{
    width: 25%;
    margin: 0 auto;
    text-align: center;
    padding-top: 70px;
    color: #808080;
}

.main{
    margin-top: 100px;
    margin-bottom: 70px;
    text-align: center;
}

.icone{
    height: 170px;
    display: block;
    margin: 0px auto 3px auto;
}

.main-nav{
    display: block
    position: relative;
    text-align: center;
    top:30px;
}

.button{
    position: relative;
    display: inline-block;
    padding: 0px 5% 0px 5%;
}

.social{
text-align: center;
}

.fotoprofilo_about{
  width: 30%;
  margin-left: 35%;
  margin-right: 35%;

}

.bozza_progetto{
  width: 95%;
  padding: 0 20% 0 0;
}

.draft {
  color: #000000;
  font-size: 20px;
  font-family: 'Montserrat', sans-serif;
  background-color: #E5E4E2;
  width: 95%;

}

.draft p i {
  color: #808080;
}

.post-preview {
  font-family: helvetica;
}

.social li{
  width: 40px;
  margin: 15px 15px;
  display: inline;

}
.logo{
    height:50px;
    padding:10px;
    position: relative;
    display: inline-block;
}

.screenshot_html{
  width: 70%;
  padding: 0 15% 0 15%;
}

.foto_html{
  width: 40%;
  padding: 0 30% 0 30%;
}

.up{
  float: right;
  color: #000;
  text-decoration: overline;
}

iframe{
  padding: 0% 25% 0% 25%;
}

footer{
    width:100%;
    color: #808080;
    padding: 2% 0% 1% 0%;
    background-color:black;
}

.copyright_text-muted{
  text-align: center;
}