/**/
@media (min-width: 350px) {
  h1 {
    font-size: 48px;
    /*line-height: 96px;*/
    line-height: 0.8;
    letter-spacing: 0;
    margin-top: 28px;
    margin-bottom: 16px;
    font-weight: 400;
  }
}

h1 .tagline {
  font-size: 1.20rem;
  line-height: 0.8;
  color: #7f7bec;
}

.social-icons {
  
}
    .social-icon {
  display: inline-block;    
  font-size: 32px;
  padding: 10px;
  color: #fff;
}
.social-icon-div {
  padding-bottom: 30px;
}

.button-hover, .credit-hover, .social-hover{
    display:inline-block;
    -webkit-transform:perspective(1px) translateZ(0);
    transform:perspective(1px) translateZ(0);
    box-shadow:0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration:.3s;
    transition-duration:.3s;
    -webkit-transition-property:transform;
    transition-property:transform
}
.button-hover:active,.credit-hover:active, .social-hover:active, 
.button-hover:focus,.credit-hover:focus, .social-hover:focus, 
.button-hover:hover,.credit-hover:hover, .social-hover:hover{
    -webkit-transform:scale(1.1);
    transform:scale(1.1)
}

/* Animation  */
.fadein {
  animation-name: fadein;
  animation-duration: 3s;
  animation-fill-mode: both;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Icon Hover */
.icon-hover{
    display:inline-block;
    -webkit-transform:perspective(1px) translateZ(0);
    transform:perspective(1px) translateZ(0);
    box-shadow:0 0 1px rgba(0,0,0,0);
    -webkit-transition-duration:.3s;
    transition-duration:.3s
}
.icon-hover .hvr-icon{
    -webkit-transform:translateZ(0);
    transform:translateZ(0)
}
.icon-hover:active .hvr-icon,.icon-hover:focus .hvr-icon,.icon-hover:hover .hvr-icon{
    -webkit-animation-name:icon-hover;
    animation-name:icon-hover;
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-timing-function:ease-in-out;
    animation-timing-function:ease-in-out;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1
}

@-webkit-keyframes icon-hover{
    16.65%{
        -webkit-transform:translateY(6px);
        transform:translateY(6px)
    }
    33.3%{
        -webkit-transform:translateY(-5px);
        transform:translateY(-5px)
    }
    49.95%{
        -webkit-transform:translateY(4px);
        transform:translateY(4px)
    }
    66.6%{
        -webkit-transform:translateY(-2px);
        transform:translateY(-2px)
    }
    83.25%{
        -webkit-transform:translateY(1px);
        transform:translateY(1px)
    }
    100%{
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}
@keyframes icon-hover{
    16.65%{
        -webkit-transform:translateY(6px);
        transform:translateY(6px)
    }
    33.3%{
        -webkit-transform:translateY(-5px);
        transform:translateY(-5px)
    }
    49.95%{
        -webkit-transform:translateY(4px);
        transform:translateY(4px)
    }
    66.6%{
        -webkit-transform:translateY(-2px);
        transform:translateY(-2px)
    }
    83.25%{
        -webkit-transform:translateY(1px);
        transform:translateY(1px)
    }
    100%{
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}

/* Button */

.button-entrance {
    animation-name: popUp;
    animation-duration: 1s;
    animation-fill-mode: both;
    /* Used to start button entrance animation one after another  */
    animation-delay: calc(var(--delay)/10);
  }

@keyframes popUp {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

/* Buttons */
.icon {
  padding: 0px 8px 3.5px 0px;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.button, button {
  display: inline-block;
  text-decoration: none;
  height: 48px;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
  width: 300px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0.1px;
  white-space: wrap;
  border-radius: 8px;
  cursor: pointer;
}

.button.button-outline {
  position: relative;
  background-color: transparent;
  color: #fff;
  border: solid #fff 2px;
}

.button.button-default {
  color: #FFFFFF;
  background-color: #0085FF;
}
.button.button-mastodon {
  color: #ffffff;
  background-image: linear-gradient(to bottom, #6364FF, #563ACC);
}
.button.button-twitter {
  color: #FFFFFF;
  background-color: #1DA1F2;
}
.button.button-linkedin {
  color: #FFFFFF;
  background-color: #2867B2;
}

.credit-txt {
  font-weight: 400;
  font-size: 12px;
  text-decoration: none;
  color: #ffffff45;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #171a1d #31363b;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 8px;
}

*::-webkit-scrollbar-track {
  background: #31363b;
}

*::-webkit-scrollbar-thumb {
  background-color: #171a1d;
  border-radius: 30px;
  border: 3px none #ffffff;
}