body {
  background-color: #28383f;
  overflow: hidden;
  padding-top: 15px;
}
@font-face{
  font-family: Separat;
  src: url(Separat.ttf); 
}
@font-face{
  font-family: Helvetica Neue;
  src: url(Helvetica.ttf); 
}
@font-face{
  font-family: API;
  src: url(DoulosSIL-Regular.ttf); 
}
a.nome{
  color: #C2DFE3;
  text-decoration: none;
  font-family: Separat;
}
@keyframes onmouse {
  from { color: #C2DFE3 }
  to { color:  #9DB4C0; }
}
a.nome:hover{
  color: #9DB4C0;
  animation: onmouse 0.5s;
}
a{
  color: #C2DFE3;
  text-decoration: none;
  font-family: Separat;
}
a:hover{
  color: #9DB4C0;
  animation: onmouse 0.5s;
}
#trebarre{
  color: #C2DFE3;
}
.dropdown-menu{
  background-color: #28383f;
  font-family: Separat;
  padding-top: 150px;
  padding-bottom: 550px;
  padding-right: 250px;
  padding-left: 150px;
}
.dropdown-menu:hover{
  background-color: #28383f;
}
.dropdown-item{
  color: #C2DFE3;
  font-family: Separat;
  padding-top: 20px;
}
.dropdown-item:hover{
  color: #9DB4C0;
  animation: onmouse 0.5s;
}
a#active{
color: #9DB4C0;
}
/* testo animato */

.container2{
  display: inline-block;
}
.container3{
  display: inline-block;
  padding-left: 430px;
}
.typed-out{
    overflow: hidden;
    border-right: .05em solid #5C6B73;
    white-space: nowrap;
    animation: 
      typing 4s steps(18, end) forwards,
      blinking 1.2s infinite;
      font-size: 6.2rem;
    width: 0;
    color: rgb(255, 201, 131);
}
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
@keyframes blinking {
  from { border-color: transparent }
  to { border-color:  #5C6B73; }
}
h1{
  font-family: Separat;
  color: #C2DFE3;
}
.thankyou{
  padding-top: 350px;
} 
.navigation{
  margin-bottom: 50px;
}
img#foto{
  width: 75%;
  height: auto;
  padding-left:100px;
  padding-top:40px;
}
.fotoresponsive{
  width: 20rem;
  padding-left: 70px;
  padding-top:40px;
}
.aboutext{
  color: #C2DFE3;
  padding-top: 30px;
  text-align: justify;
  text-justify: inter-word;
}
.aboutext1{
  color: #C2DFE3;
  padding-top: 25px;
  text-align: justify;
  text-justify: inter-word;
  padding-left: 10px;
  padding-right: 10px;
}
p.testo{
  font-family: Helvetica Neue;
}
i.fonetica{
  font-family: API;
  display: inline;
}

/* animazione testo */

.typed-out{
  overflow: hidden;
  border-right: .05em solid #5C6B73;
  white-space: nowrap;
  animation: 
    typing 4s steps(18, end) forwards,
    blinking 1.2s infinite;
  font-size: 6.2rem;
  width: 0;
  color: rgb(255, 201, 131);
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blinking {
from { border-color: transparent }
to { border-color:  #5C6B73; }
}
/* form */

div#form{
  padding-top: 50px;
}
.square-box {
max-width: 600px;
min-height: 300px;
}

input[type=text], select{
border: none;
border-bottom: 2px solid #9DB4C0;
background-color: #28383f;
width: 100%;
padding: 12px;
padding-right: 47px;
border-radius: 4px;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
outline: none;
caret-color: #9DB4C0;
color: #C2DFE3;
font-family: Separat;
}
input[type=textarea]{
border: none;
border-bottom: 2px solid #9DB4C0;
background-color: #28383f;
width: 100%;
padding: 12px;
padding-right: 47px;
border-radius: 4px;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
outline: none;
caret-color: #9DB4C0;
color: #C2DFE3;
font-family: Separat;
}
input[type=email]{
width: 100%;
padding: 12px;
border-radius: 4px;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
border: none;
border-bottom: 2px solid #9DB4C0;
background-color: #28383f;
outline: none;
caret-color: #9DB4C0;
color: #C2DFE3;
font-family: Separat;
}
.bottone{
background-color: #28383f;
color: #C2DFE3;
font-family: Separat;
padding: 6px 10px;
border: none;
border-radius: 4px;
caret-color: #9DB4C0;
border: 2px solid #C2DFE3;
}
.bottone:hover {
border-color: #9DB4C0;
}
input[type=text]:hover{
border-bottom: solid #5C6B73;
}
input[type=email]:hover{
border-bottom: solid #5C6B73;
}
input[type=textarea]:hover{
border-bottom: solid #5C6B73;
}
label{
color: #C2DFE3;
font-family: Separat;
}

/* articoli */

.sottotitolo{
  font-family: Helvetica Neue;
  color: #C2DFE3;
}
div#articoli{
  padding-top: 50px;
  overflow-y: auto;
  height: 500px;
}

/* responsive */

@media screen and (max-width: 500px) {
body{
  overflow-y: auto;
  overflow-x: hidden;
}
}

div#nav1{
  background-color: #28383f;
  padding-top: 17px;
  padding-right: 50px;
  padding-left: 50px;
}

#home{
  overflow-y: auto;
  height: 500px;
}