* {
	margin: 0;
	padding: 0;
	font-family: "Playfair Display", serif;
  font-weight: 500;
}

header {
  display: flex;
  height: 15vh;
  max-width: 100%;
  justify-content:flex-start;
  background-image: linear-gradient(to right, #11520A, #1D9410, #64F9CE);
	-webkit-background-image: linear-gradient(to right, #11520A, #1D9410, #64F9CE);
	-moz-background-image: linear-gradient(to right, #11520A, #1D9410, #64F9CE);
	-o-background-image: linear-gradient(to right, #11520A, #1D9410, #64F9CE);
	-ms-background-image: linear-gradient(to right, #11520A, #1D9410, #64F9CE);
  border-bottom: 3px solid #424242;
}

header img {
	border-radius: 100%;
	margin: 20% 5%;
}

.header-container {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

.header-container h1 {
  color: #424242;
  margin-top: 5%;
  text-transform: uppercase;
}
 
.menù {
  display: flex;
  align-self:flex-end;
}

.menù ul li {
	display: inline;
  text-transform: uppercase;
}

.menù li a {
	text-decoration: none;
	color: #424242;
	margin-right: 10px;
}

.menù a:hover {
	text-decoration: underline;
	color: #FF963D;
}

@media only screen and (max-width: 374px)
{
  .header-container h1 {text-align: center; font-size: 20px;}
  header img {max-width: 70%; margin-top: 60%;}
	.menù ul li {margin: 20% auto;}
	body .welcome p {font-size: 30px;}
	.welcome #freepik {margin-bottom: -40%;}
  main h2 {padding-top: 70px; padding-bottom: 10%;}
  main .intro {width: 80%; padding: 10%;}
  .intro #img-oblò {width: 100%; object-fit: cover; margin: 10% auto;}
  .intro #img-universo {width: 100%; object-fit: cover; margin: 10% auto;}
  #primo-paragrafo p::first-letter {font-size: 25px;}
  #secondo-paragrafo p::first-letter {font-size: 25px;}
  aside .links h3 {margin: 5% auto;}
  aside .links a {margin: auto;}
  body .cita q {font-size: 30px;}
  body .cita i {font-size: 30px;}
	body #invito p {font-size: 25px; padding: 0;}
  #invito #pulsante {color: #FF963D; font-size: 25px; padding: 2px; margin-bottom: 5px;}
  .master-footer {display:flex; flex-direction: column;}
  .master-footer #copyright {margin: 0 auto; text-align: center;}
  .master-footer #legal-info {margin: 5% auto;}
	.master-footer #logo-linkedin {margin: 5% 50%; transform: translateX(-50%);}
}

@media only screen and (min-width: 375px) and (max-width: 480px)
{
  .header-container h1 {text-align: center; font-size: 20px;}
  header img {max-width: 75%; margin-top: 45%;}
	body .welcome p {font-size: 30px;}
	.welcome #freepik {margin-bottom: -40%;}
  main h2 {padding: 10% 0; font-size: 23px;}
  main .intro {width: 80%; padding: 10%;}
  .intro #img-oblò {width: 100%; max-height: 20%; margin: 10% auto;}
  .intro #img-universo {margin: 10% auto;}
  #primo-paragrafo p::first-letter {font-size: 25px;}
  #secondo-paragrafo p::first-letter {font-size: 25px;}
  aside .links h3 {margin: 5% auto;}
  aside .links a {margin: auto;}
  body .cita q {font-size: 30px;}
  body .cita i {font-size: 30px;}
  body #invito p {font-size: 25px;}
  #invito #pulsante {color: #FF963D; font-size: 25px;}
  .master-footer {display:flex; flex-direction: column;}
  .master-footer #copyright {margin : 0 auto; text-align: center;}
  .master-footer #legal-info {margin: 5% auto;}
	.master-footer #logo-linkedin {margin: 5% 50%; transform: translateX(-50%);}
}

@media only screen and (min-width: 600px) and (max-width: 950px) and (orientation: landscape) 
{
	header {height: 30vh;}
	header img {width: 60%;}
	.welcome p:nth-child(1) {font-size: 50px;}
	.welcome p:nth-child(2) {font-size: 50px;}
	body .welcome #freepik {margin-bottom: -6%;}
	
} 

@media only screen and (min-width: 481px) and (max-width: 768px)
{
  .header-container h1 {text-align: center; font-size: 25px;}
  header img {max-width: 75%; margin-top: 35%;}
	body .welcome p {font-size: 40px;}
	.welcome #freepik {margin-bottom: -30%;}
  main .intro {width: 80%; padding: 10%;}
  main h2 {padding: 10% 0; font-size: 23px;}
  .intro #img-oblò {width: 100%; object-fit: cover; margin: 5% auto;}
  .intro #img-universo {width: 100%; object-fit: cover; margin: 10% auto;}
  #primo-paragrafo p::first-letter {font-size: 25px;}
  #secondo-paragrafo p::first-letter {font-size: 25px;}
  aside .links h3 {margin: 5% auto;}
  aside .links a {margin: auto;}
  #invito #pulsante {color: #FF963D;}
  .master-footer {display:flex; flex-direction: column;}
  .master-footer #copyright {margin: auto; text-align: center;}
  .master-footer #legal-info {margin: 5% auto 0;}
	.master-footer #logo-linkedin {margin: 10% 50% 0; transform: translateX(-50%);}
}

@media only screen and (min-width: 769px) and (max-width: 1024px)
{
  header img {max-width: 80%; margin-top: 25%;}
	body .welcome p {font-size: 60px;}
	.welcome #freepik {margin-bottom: -27%;}
  main .intro {max-width: 100%; padding: 10%;}
  main h2 {padding: 5% 0;}
  .intro #img-oblò {width: 80%; object-fit: cover; margin: 10% auto;}
	.intro #img-universo {width: 80%; object-fit: cover; margin: 10% auto;}
}

.welcome {
  height: 80vh;
  display: flex;
	flex-direction: column;
  justify-content:space-evenly;
  align-items: flex-start;
	background-image: url(Img/Costellazione%20verde%20astratta.webp);
  background-position: left;
  background-size: cover;
  background-repeat: no-repeat;
}

.welcome p {
	margin-left: 5%;
	color: #FF963D;
  font-size: 80px;
	animation: welcome 5s infinite;
	-webkit-animation: welcome 5s infinite;
	-moz-animation: welcome 5s infinite;
	-o-animation: welcome 5s infinite;
	-ms-animation: welcome 5s infinite;
}

@keyframes welcome {
  0% {opacity: 0.0; margin-left: 0;}
	100% {opacity: 1;}
}

@-webkit-keyframes welcome {
  0% {opacity: 0.0; margin-left: 0;}
	100% {opacity: 1;}
}

@-moz-keyframes welcome {
  0% {opacity: 0.0; margin-left: 0;}
	100% {opacity: 1;}
}

@-o-keyframes welcome {
  0% {opacity: 0.0; margin-left: 0;}
	100% {opacity: 1;}
}

@-ms-keyframes welcome {
  0% {opacity: 0.0; margin-left: 0;}
	100% {opacity: 1;}
}

#freepik {
	color: #FF963D;
	align-self: flex-start;
	margin: 0 auto;
	margin-bottom: -10%;
}

main {
  background-color: #64F9CE;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

#title-main {
	text-align: center;
  margin: 5% auto;
	color: #424242;
}

#img-oblò {
	max-width: 80%;
  height: auto;
	border: 3px solid #424242;
  margin: 0 auto 5%;
  box-shadow: 20px 20px 10px grey;
}

.free-pik {
	text-align: center;
  color: #FF963D;
	margin-bottom: 10%;
}

.intro {
  color: #424242;
  display: flex;
  flex-direction: column;
  width: 50%;
  margin: auto;
  line-height: 35px;
}

.intro #primo-paragrafo {
  text-align: justify;
}

#img-universo {
	max-width: 80%;
  height: auto;
	border: 3px solid #424242;
  margin: 10% auto;
  box-shadow: 20px 20px 10px grey;
}

.intro #secondo-paragrafo {
  text-align: justify;
}

.intro p::first-letter {
	font-size: 35px;
}

.freepik-link {
  color: #FF963D;
  align-self: center;
}

.links {
	background-color: #FFFFFF;
  border: 3px solid #424242;
	box-shadow: 20px 20px 10px grey;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 25% auto 10%;
}

.links h3 {
  margin: 2% auto;
  text-align: center;
  color: #424242;
  width: 100%;
}

.links a {
  margin: auto;
  padding: 10px;
  text-decoration: overline underline;
  color: #424242;
}

.links a:hover{
    color: #FF963D;
}

.cita {
  width: 50%;
  margin: 5% auto;
  display:flex;
  flex-direction: column;
  text-align: center;
}

.cita q {
  font-family: "Dancing Script", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
	color: #424242;
}

.cita i {
  font-family: "Dancing Script", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
	color: #424242;
}

#invito {
  background-image: url(Img/astronauta%20con%20figure%20geometriche%20colorate.webp);
  background-position: center top;
  background-size: cover;
  display: flex;
  flex-direction: column;
}

#invito p {
  background-color: #64F9CE;
  border: 3px solid #424242;
  border-radius: 20px;
  margin: 30% auto 5%;
  padding: 10px;
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  text-align: center;
  color: #424242;
}

#pulsante {
    font-family: "Permanent Marker", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    background-color: #FFFFFF;
    border: 3px double #424242;
    transition-duration: 0.6s;
    padding: 2px;
    margin-left: 5px;
		color: #424242;
    border-radius: 20px;
}

#pulsante:hover {
	background-color: #64F9CE;
  color: #FF963D;
}

.master-footer {
	width: 100%;
	height: 300px;
	background-image: linear-gradient(to left, #424242, #665966, #9F8A9F);
	-webkit-background-image: linear-gradient(to left, #424242, #665966, #9F8A9F);
	-moz-background-image: linear-gradient(to left, #424242, #665966, #9F8A9F);
	-ms-background-image: linear-gradient(to left, #424242, #665966, #9F8A9F);
	-o-background-image: linear-gradient(to left, #424242, #665966, #9F8A9F);
  position: relative;
  display: flex;
  justify-content:flex-start;
  align-items: center;
  border-top: 3px solid #424242;
}

#legal-info {
  color: #FFFFFF;
  margin-left: auto;
  margin-right: 5%;
}

#logo-linkedin {
	width: 10%;
	border-radius: 5px;
}

#copyright {
	color: #FFFFFF;
	font-size: 14px;
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate( -50%, -95%);
}