@import 'https://fonts.googleapis.com/css?family=Ubuntu:300, 400, 500, 700';

*, *:after, *:before {
  margin: 0;
  padding: 0;
}

.svg-container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -2;
  width: 100%;
}

svg {
  height: 100%;
  width: 100%;
}

svg path {
  transition: .1s;
}

.svg-resizable {
  width: 44%;
  height: auto; /* Mantiene l'aspect ratio */
}

header {
  width: 100%;
  height: 750px;
  color: #000;
  text-align: center;
}

header .content {
  margin: 0 0;
  display: flex;
  flex-direction: column;
  /*justify-content: center;    Main axis: in this case vertical beacuse flex-direction is column  */
  align-items: center;      /*  Cross axis: perpendicular to main axis                             */
}

.subtitle {
  margin-top: 50px;
  font-family: 'Amaranth';
  font-size: 26px;
}

.arrow {
  padding-top: 80px;
  color: whitesmoke;
  opacity: .9;
  animation: slide 2s ease-out infinite;
}

.lan-selector {
  position: absolute;
  right: 8px;
  top: 8px;
}

.theme-selector {
  position: absolute;
  left: 8px;
  top: 8px;
}

footer {
  background: #dddee1;
  /* height: 140px; */
  text-align: center;
}

small {
  opacity: .5;
  font-weight: 300;
}

small a{
  color: inherit;
}

.space {
  display: none;
}

.social-container {
  margin: auto;
  display: flex;
  width: 40%;
  height: 100px;
  z-index: -2;
  /*-webkit-text-stroke: .5px white;*/

  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.social-container a {
  transition: all ease-in .1s;
}

.social-container a:hover {
  transform: scale(1.1);
}

.social-container-footer {
  margin: auto;
  display: flex;
  width: 30%;
  height: 100px;

  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.icon {
  position: relative;
  cursor: pointer;
  height: 60px;
  width: 60px;
  color: white;
  background: #333;
  margin: 5px;
  box-shadow: 0 0 6px -2px #000, 0 0 45px -20px #000;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;

  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}

.gradient-border {
  position: absolute;
  content: "";
  z-index: -1;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  transform: scale(1.07);
  border-radius: 5px;
  border-collapse: separate; 


  background: linear-gradient(
    60deg,
    hsl(224, 85%, 66%),
    hsl(269, 85%, 66%),
    hsl(314, 85%, 66%),
    hsl(359, 85%, 66%),
    hsl(44, 85%, 66%),
    hsl(89, 85%, 66%),
    hsl(134, 85%, 66%),
    hsl(179, 85%, 66%)
  );
  background-size: 300% 300%;
  animation: moveGradient 4s alternate infinite;
  animation-delay: 2000ms;

  animation: fadeIn ease 1s;
  -webkit-animation: fadeIn ease 1s;
  -moz-animation: fadeIn ease 1s;
  -o-animation: fadeIn ease 1s;
  -ms-animation: fadeIn ease 1s;
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}

/* Animation fill water for social icons in teh header */

.icon .instagram {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: fill-instagram .4s linear forwards;
  animation-delay: 400ms;
  color: var(--instagram-color);
}

.icon .facebook {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: fill-facebook .4s linear forwards;
  animation-delay: 800ms;
  color: var(--facebook-color);
}

.icon .youtube {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* animation: fill-youtube .4s linear forwards; */
  animation-delay: 1200ms;
  color: var(--youtube-color);
}

.icon .linkedin {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: fill-linkedin .4s linear forwards;
  animation-delay: 1600ms;
  color: var(--linkedin-color);
}

.icon .github {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: fill-github .4s linear forwards;
  animation-delay: 2000ms;
  color: var(--github-color);
}

.icon-footer i,
.icon i {
  margin-top: 12px;
}

.icon-footer {
  cursor: pointer;
  margin: 5px;
}

.social-container-footer a {
  color: inherit;
}

@keyframes slide {
  0% { opacity:.2; transform: translateY(-5px); }	
  50% {opacity: .8; transform: translateY(0px);}	
100% { opacity: 0; transform: translateY(5px); }	
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  .svg-container {
    position: absolute;
    top: 400px;
    right: 0;
    left: 0;
    z-index: -2;
    width: 100%;
  }

  .svg-resizable {
    width: 94%;
    height: auto; /* Mantiene l'aspect ratio */
  }

  .space {
    position: absolute;
    display: block;
    height: 400px;
    top: 0;
    right: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    background: var(--main-bg-color);
  }

  .arrow {
    padding-top: 34px;
    color: whitesmoke;
    opacity: .9;
    animation: slide 2s ease-out infinite;
  }

  .social-container {
    margin: auto;
    display: flex;
    width: 80%;
    height: 150px;
    z-index: -2;
  
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .icon {
    cursor: pointer;
    height: 40px;
    width: 40px;
    color: white;
    background: #333;
    margin: 5px;
    box-shadow: 0 0 6px -2px #000, 0 0 45px -20px #000;

    animation: fadeIn ease 1s;
    -webkit-animation: fadeIn ease 1s;
    -moz-animation: fadeIn ease 1s;
    -o-animation: fadeIn ease 1s;
    -ms-animation: fadeIn ease 1s;
  }
  
  .icon i {
    margin-top: 4px;
  }

  .social-container-footer {
    margin: auto;
    display: flex;
    width: 60%;
    height: 100px;
  
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .lan-selector {
    position: absolute;
    right: 4px;
    top: 4px;
    font-size: 22px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  }
}

/* If start and stop point are same point it wil result in a no-fade, next gradient*/
@keyframes fill-instagram {
  0% {}

  10%{
    background-image: linear-gradient(to top, white 90%, var(--instagram-color) 90%);
  }

  20%{
    background-image: linear-gradient(to top, white 80%, var(--instagram-color) 80%);
  }

  30%{
    background-image: linear-gradient(to top, white 70%, var(--instagram-color) 70%);
  }

  40%{
    background-image: linear-gradient(to top, white 60%, var(--instagram-color) 60%);
  }

  50%{
    background-image: linear-gradient(to top, white 50%, var(--instagram-color) 50%);
  }

  60%{
    background-image: linear-gradient(to top, white 40%, var(--instagram-color) 40%);
  }

  70%{
    background-image: linear-gradient(to top, white 30%, var(--instagram-color) 30%);
  }

  80%{
    background-image: linear-gradient(to top, white 20%, var(--instagram-color) 20%);
  }

  90%{
    background-image: linear-gradient(to top, white 10%, var(--instagram-color) 10%);
  }

  100% {
    background-image: linear-gradient(to top, var(--instagram-color) 100%, var(--instagram-color) 100%);
  }
}

@keyframes fill-facebook {
  0% {}

  10%{
    background-image: linear-gradient(to top, white 90%, var(--facebook-color) 90%);
  }

  20%{
    background-image: linear-gradient(to top, white 80%, var(--facebook-color) 80%);
  }

  30%{
    background-image: linear-gradient(to top, white 70%, var(--facebook-color) 70%);
  }

  40%{
    background-image: linear-gradient(to top, white 60%, var(--facebook-color) 60%);
  }

  50%{
    background-image: linear-gradient(to top, white 50%, var(--facebook-color) 50%);
  }

  60%{
    background-image: linear-gradient(to top, white 40%, var(--facebook-color) 40%);
  }

  70%{
    background-image: linear-gradient(to top, white 30%, var(--facebook-color) 30%);
  }

  80%{
    background-image: linear-gradient(to top, white 20%, var(--facebook-color) 20%);
  }

  90%{
    background-image: linear-gradient(to top, white 10%, var(--facebook-color) 10%);
  }

  100% {
    background-image: linear-gradient(to top, var(--facebook-color) 100%, var(--facebook-color) 100%);
  }
}


@keyframes fill-youtube {
  0% {}

  10%{
    background-image: linear-gradient(to top, white 90%, var(--youtube-color) 90%);
  }

  20%{
    background-image: linear-gradient(to top, white 80%, var(--youtube-color) 80%);
  }

  30%{
    background-image: linear-gradient(to top, white 70%, var(--youtube-color) 70%);
  }

  40%{
    background-image: linear-gradient(to top, white 60%, var(--youtube-color) 60%);
  }

  50%{
    background-image: linear-gradient(to top, white 50%, var(--youtube-color) 50%);
  }

  60%{
    background-image: linear-gradient(to top, white 40%, var(--youtube-color) 40%);
  }

  70%{
    background-image: linear-gradient(to top, white 30%, var(--youtube-color) 30%);
  }

  80%{
    background-image: linear-gradient(to top, white 20%, var(--youtube-color) 20%);
  }

  90%{
    background-image: linear-gradient(to top, white 10%, var(--youtube-color) 10%);
  }

  100% {
    background-image: linear-gradient(to top, var(--youtube-color) 100%, var(--youtube-color) 100%);
  }
}


@keyframes fill-linkedin {
  0% {}

  10%{
    background-image: linear-gradient(to top, white 90%, var(--linkedin-color) 90%);
  }

  20%{
    background-image: linear-gradient(to top, white 80%, var(--linkedin-color) 80%);
  }

  30%{
    background-image: linear-gradient(to top, white 70%, var(--linkedin-color) 70%);
  }

  40%{
    background-image: linear-gradient(to top, white 60%, var(--linkedin-color) 60%);
  }

  50%{
    background-image: linear-gradient(to top, white 50%, var(--linkedin-color) 50%);
  }

  60%{
    background-image: linear-gradient(to top, white 40%, var(--linkedin-color) 40%);
  }

  70%{
    background-image: linear-gradient(to top, white 30%, var(--linkedin-color) 30%);
  }

  80%{
    background-image: linear-gradient(to top, white 20%, var(--linkedin-color) 20%);
  }

  90%{
    background-image: linear-gradient(to top, white 10%, var(--linkedin-color) 10%);
  }

  100% {
    background-image: linear-gradient(to top, var(--linkedin-color) 100%, var(--linkedin-color) 100%);
  }
}


@keyframes fill-github {
  0% {}

  10%{
    background-image: linear-gradient(to top, white 90%, var(--github-color) 90%);
  }

  20%{
    background-image: linear-gradient(to top, white 80%, var(--github-color) 80%);
  }

  30%{
    background-image: linear-gradient(to top, white 70%, var(--github-color) 70%);
  }

  40%{
    background-image: linear-gradient(to top, white 60%, var(--github-color) 60%);
  }

  50%{
    background-image: linear-gradient(to top, white 50%, var(--github-color) 50%);
  }

  60%{
    background-image: linear-gradient(to top, white 40%, var(--github-color) 40%);
  }

  70%{
    background-image: linear-gradient(to top, white 30%, var(--github-color) 30%);
  }

  80%{
    background-image: linear-gradient(to top, white 20%, var(--github-color) 20%);
  }

  90%{
    background-image: linear-gradient(to top, white 10%, var(--github-color) 10%);
  }

  100% {
    background-image: linear-gradient(to top, var(--github-color) 100%, var(--github-color) 100%);
  }
}

  @keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }
  
  @-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }
  
  @-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }
  
  @-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }
  
  @-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
  }