/* NOTE:
Se c'è un .cacca vuol dire che è una classe, mentre un #cacca indica un id invece che una classe.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}


h3,h4 {
  font-family: 'Museo-300', serif;
  font-size: 16pt;
}

h1 {
  font-family: 'Museo-700', serif;
  font-size: 20pt;
}

h2 {
  font-family: 'Museo-700', serif;
  font-size: 16pt;
  text-transform: uppercase;
}

p {
  font-family: 'MuseoSans-500', sans-serif;
	font-weight: normal;
	font-style: normal;
  font-size: 17pt;
}

.menu{
}

#menu{
  position: fixed;
  right: 2%;
  z-index: 3;
  font-family: 'Museo-300', serif;
  overflow: hidden;
  float: right;
  text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);

}

#menu a{
  float: left;
  color: #f2f2f2;
  text-align: center;
  margin: 7px 5px;
  padding: 7px 10px;
  text-decoration: none;
  font-size: 17px;
  text-transform: uppercase;
  border-radius: 18px;
}

/* Change the color of links on hover */
#menu a:hover {
  background-color: rgba(88, 88, 88, 1);
  color: white;
  text-decoration: underline;
  transition: .5s;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}


#opener {
  position: absolute;
  color: white;
  height: 100vh;
  display: flex;
  align-items: center;
  z-index: 10;
  margin-left: 10%;
  }

#opener h1 {
  font-size: 35pt;
  text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.5);
  /* NOTE: rgba significa rgbalpha, ultimo numero è l'opacità */
  letter-spacing: 0px;
}

#opener h2 {
  font-size: 1.9rem;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
  letter-spacing: 0px;
  line-height: 2.3rem;
  padding-top: 2vh;
}

@keyframes arrow {
  from {top: 95vh}
  to {top: 94vh;}
}

#arrowdn svg{
  position: absolute;
  top: 95vh;
  width:70px;
  height: auto;
  left: 50%;
  margin-left: -35px;
  z-index: 10;
  fill: grey;
  filter: invert(75%);

  animation-name: arrow;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.arrow:hover{
  fill:green;
}

.chapter {
  text-align: center;
  align-items: center;
  display: flex;
  color: white;
    padding: 6vh 0vh;
}

#bio {
    padding: 6vh 0vh;
  text-align: center;
  color: black;
}

#div-bio {
  margin-top: 100vh;
  background-color: #EBDA68;
}

.row h1 {

  line-height: 33pt;
}

#projects {
  background-color: #4C7862;
  color: white;
  text-align: center;
  padding: 5vh 0vh;
}

.u-max-full-width img:hover{
  opacity: 20%;
  transition: 2s;
}

  #projects-int h2 {
    margin: 3vh 0vh 1vh 0vh;}

  #projects-int p{
    text-align: left;
}

#projects a{
    text-decoration: underline;
  }

#projects h2{
  margin-bottom: 1vh;

}

#footer {
  background-color: #303840;
}


#logo img{
  width:200px;
  height:auto;
  position: relative;
  left: 50%;
  margin-left: -150px;
  padding: 50px;
}

#line {
  background-color: white;
  margin-left: 15%;
  margin-right: 15%;
  margin-bottom: 30px;
  height: 2px;
}

#contacts{
  text-align: center;
  margin-bottom: 80px;
}

#contacts h1{
  color: white;
  font-size: 23pt;
  line-height: 60pt;
}

#contacts p,a{
font-size: 13pt;
line-height: 32px;
text-decoration: none;
color: white;
 }

#developer a,p{
  text-align: center;
  text-decoration: none;
  padding: 10px;
  font-size: 13pt;
}

#developer a{
  font-size: 10pt;
}

#developer {
  background-color: #C4893F;

}