@import "./base.css";
@keyframes ingrandisci {
  from {transform: scale(0);}
  to {transform: scale(1);}
}
@keyframes colora {
  from {filter: grayscale(100%);}
  to {filter: grayscale(0%);}
}
/*stile prima parte: */
div {
  display: block;
}

body
{
  background-color: rgb(210,210,210);
  font-family: Barlow;
  animation: colora 4s;
}

#top {
  background-image: url("../res/bg-4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-bottom: 30px;
}
#top > p:first-of-type {
  margin-top: 16vw;
  margin-bottom: 0;
  font-size: 8em;
  font-family: Amatic SC;
  color: #feb236;
  text-align: center;
  text-shadow: #6b5b95 4px 4px 4px;
  animation: ingrandisci 1s ease;
}

#imgPresentazione {
  border-radius: 50%;
  margin: 0 auto;
  width: 350px;
  height: 350px;
}

#top img[src*='nome']
{
  width: 80vw;
  max-width: 960px;
}

#shortIntroduction {
  text-align: center;
  color: #6b5b95;
  font-family: "Amatic SC";
  font-size: 2.4em;
  border: 1px solid #6b5b95;
  padding: 13px;
  margin: 0 auto;
  max-width: 60vw;
  background-color: #ffffff;
  animation: ingrandisci 2s ease;
}


/* stile seconda parte */

#foto, #about {
  float: left;
  height: 700px;
}
#foto {
  width: calc(100% - 980px);
  background-color: #feb236;
  box-sizing: border-box;
}
#foto > img {
  height: 600px;
  margin-top: 38px;
  border: 2px solid black;
  padding: 12px;
  margin-left: calc((100% - 368px)/2);
}

#about {
  background-color: black;
  padding: 2em;
  color: #feb236;
  box-sizing: border-box;
  max-width: 980px;
  overflow-y: auto;
  font-size: 1em;
  text-align: justify;
  font-family: Amatic SC;
}

#about p, #about h1 {
  margin: 0 auto;
  padding: 10px;
  font-weight: bold;
}
#about h1 {
  text-align: center;
  border: 2px solid #feb236;
  font-size: 2.5em;
  transition: all 1s;
}

#about h1:hover {
  background-color: #feb236;
  border: 2px solid black;
  color: black;
}

/*stile footer*/
footer {
  width: 100%;
  background-color: #feb236;
  color: black;
  box-sizing: border-box;
  text-align: left;
}

#sizer {
  max-width: 980px;
  margin: 0 auto;
}
#sizer li {list-style: none;}
#sizer i, #sizer {font-size: 20px;}
#sizer ul {padding-left: 10px; margin-left: 0;}

.bottom-element {
  width: 30%;
  display: inline-block;
  vertical-align: top;
  border-left: 1px solid black;
  padding-left: 15px;
}
.bottom-element p {font-weight: bold;}
.bottom-element a {text-decoration: none; color: black;}

#social img {width: 100px; padding: 5px;}

@media only screen and (max-width: 1380px) {
    #foto {display: none;}
    #about {max-width: 100%; width: 100%;}
    #about p, #about h1 {max-width: 980px;}
}