html, body { height: 100%; }
* {box-sizing:border-box;}

body {
opacity:0;
margin: 0 10vw;
background: #1c1c1c;
font-family: 'Source Code Pro', monospace;
border-top:20px solid #b4c9cc;
--txt:#b4c9cc;
--main-bg:#1c1c1c;
}

.changeBg {
background:#425f63;
}

::selection {
background:#b4c9cc;
border-right:3px solid blue;
}

main p {
position:relative;
padding: 20vh 0px 0px;
font-size:5vw;
color: var(--txt, #b4c9cc);
font-weight: 200;
transition: transform ease .8s;
will-change: transform;
}
.corner {
border:5px solid white;
width:80px;
height:80px;
position:absolute;
right:62px;
transition:1s ease all;
}

a {
text-decoration: none;
color:#b4c9cc;
}

.hide {
  opacity: 0;
}
.show {
  opacity: 1;
  transition: 1s all ease;
}

svg.social {
fill:white;
margin-left: 10px;
width:15px;
}


/* GSAP TXT EFFECT */
a.content__text-link {
font-weight: 400;
}

.block__title span,
.block__link span,
.content__text-link span {
	display: inline-block;
	white-space: pre;
}

.hover-reveal {
display: none;
}
/* ----------------- */



aside {
display:flex;
flex-direction: column;
position: fixed;
right:20px;
top:20px;
text-align: right;
font-weight: 200;
font-size: .75em;
}
aside a {
text-transform: uppercase;
opacity: .1;
transition: transform .85s ease;
margin: 5px 0px;
display: flex;
align-items: center;
justify-content: flex-end;
}

aside a:hover {
opacity:1!important;
transform: translateX(-6px);
transition: transform .3s ease;
}

aside img {
width: 30px;
height: 30px;
transition: transform .65s ease;
}

/* svg hand wave */
svg.wave {
width:5.5vw;
fill: #aecacd;
z-index: 999;
transform-origin: 10% 90%;
-webkit-animation:hand 1s ease 2;
animation:hand 1s ease 2;
-webkit-animation-delay: 1s;
animation-delay: 1.2s;
transition: ease all 1s;
}

span {
cursor:pointer;
}

span:hover + svg.wave {
-webkit-animation:hand 1s ease infinite;
animation:hand 1s ease infinite;
}

.alitia {
opacity: 1;
-webkit-animation-name: fadeInOpacity;
animation: fadeInOpacity 1 ease-in 1s;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes fadeInOpacity {
  0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


@-webkit-keyframes hand {
  0% {
    transform: rotate(0deg);
    transform-origin: 10% 90%;
  }
  25% {
    transform: rotate(11deg);
    transform-origin: 10% 90%;
  }
  50% {
    transform: rotate(-10deg);
    transform-origin: 10% 90%;
  }
  75% {
    transform: rotate(11deg);
    transform-origin: 10% 90%;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: 10% 90%;
  }

}


@keyframes hand {
  0% {
    transform: rotate(0deg);
    transform-origin: 10% 90%;
  }
  25% {
    transform: rotate(11deg);
    transform-origin: 10% 90%;
  }
  50% {
    transform: rotate(-10deg);
    transform-origin: 10% 90%;
  }
  75% {
    transform: rotate(11deg);
    transform-origin: 10% 90%;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: 10% 90%;
  }
}
@-webkit-keyframes a_litia {
  from {
      transform : scale(0);
      opacity   : 1;
  }
  50% {
      transform : scale(0.6);
      opacity   : 0.26;
  }
  to {
      transform : scale(1);
      opacity   : 1;
  }

}

@keyframes a_litia {
    from {
        transform : scale(0);
        opacity   : 1;
    }
    50% {
        transform : scale(0.6);
        opacity   : 0.26;
    }
    to {
        transform : scale(1);
        opacity   : 1;
    }
}

p span.hello {
font-size:15vw;
margin-left: -11px;
font-weight: 400;
}


h1 { transition:all ease .2s}

h1:hover{
opacity:.9;
}

svg {
transition: all ease .5s;
}
h1:hover + svg {
 animation:hand 1s ease infinite;
}

.highfive_btn {
display:flex;
justify-content: center;
align-items: center;
margin-top:15vh;
margin-bottom:30vh;
}

svg.highfive {
width:200px;
height:200px;
padding: 40px;
border-radius: 50%;
border:5px solid #aecacd;
fill: #aecacd;
margin-bottom: 10vh;
transition: .65s ease all;
}
svg.highfive:hover{
fill: #1c1c1c;
transform:scale(1.15);
cursor: pointer;
background: #b4c9cc;
transition: .15s ease all;
}
/* does this work on mobile safari? */
svg.highfive:focus{
fill: #1c1c1c;
transform:scale(1.15);
cursor: pointer;
background: #b4c9cc;
transition: .15s ease all;
}
svg.highfive:active{
fill: #1c1c1c;
transform:scale(1.15);
cursor: pointer;
background: #b4c9cc;
transition: .15s ease all;
}

@keyframes hand {
  0% {
    transform: rotate(0deg);
    transform-origin: 10% 90%;
  }
  25% {
    transform: rotate(11deg);
    transform-origin: 10% 90%;
  }
  50% {
    transform: rotate(-10deg);
    transform-origin: 10% 90%;
  }
  75% {
    transform: rotate(11deg);
    transform-origin: 10% 90%;
  }
  100% {
    transform: rotate(0deg);
    transform-origin: 10% 90%;
  }
}


#page-gradient {
background: linear-gradient(rgba(19,19,19,0),#131313);
bottom: 0;
left:0;
height: 20vh;
pointer-events: none;
position: fixed;
width: 100%;
z-index: 650;
}

.line {
stroke-dasharray: 100;
animation: dash 5s linear;
opacity:0;
}

svg.highfive:hover .line {
opacity:1;
}
svg.highfive:focus .line {
opacity:1;
}
svg.highfive:active .line {
opacity:1;
}

@media only screen and (max-width: 680px) {

aside {
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
right: 0px;
top: 0px;
text-align: left;
font-weight: 400;
font-size: .8em;
  }

aside a {
font-weight: 400;
opacity: 1;
}

main p {
position: relative;
font-size: 7vw;
color: #b4c9cc;
}

p span.hello {
font-size:15vw;
margin-left: 0px;
font-weight: 400;
}

p span {
font-size:7vw;
}

svg.wave {
width:25px;

}
svg.highfive {
width: 100px;
height: 100px;
padding: 20px;
border:3px solid #aecacd;
margin-bottom:20vh;
}
svg.social {
fill: white;
margin-left: 10px;
width: 20px;
display: none;
}
main {
margin-bottom:250px;
}
#page-gradient {
display: none;
}

}