@import url('https://fonts.googleapis.com/css?family=Anton|Roboto');

.word {
	font-family: 'Anton', sans-serif;
	perspective: 1000px;
}

.word span {
	cursor: pointer;
	display: inline-block;
	font-size: 100px;
	user-select: none;
	line-height: .8;
}

.word span:nth-child(1).active {
	animation: balance 1.5s ease-out;
	transform-origin: bottom left;
}

@keyframes balance {
	0%, 100% {
		transform: rotate(0deg);
	}

	30%, 60% {
		transform: rotate(-45deg);
	}
}

.word span:nth-child(2).active {
	animation: shrinkjump 1s ease-in-out;
	transform-origin: bottom center;
}

@keyframes shrinkjump {
	10%, 35% {
		transform: scale(2, .2) translate(0, 0);
	}

	45%, 50% {
		transform: scale(1) translate(0, -150px);
	}

	80% {
		transform: scale(1) translate(0, 0);
	}
}

.word span:nth-child(3).active {
  animation: rotate 1s ease-out;
	/*animation: falling 2s ease-out;
	transform-origin: bottom center;*/
}

@keyframes falling {
	12% {
		transform: rotateX(240deg);
	}

	24% {
		transform: rotateX(150deg);
	}

	36% {
		transform: rotateX(200deg);
	}

	48% {
		transform: rotateX(175deg);
	}

	60%, 85% {
		transform: rotateX(180deg);
	}

	100% {
		transform: rotateX(0deg);
	}
}

.word span:nth-child(4).active {
	animation: rotate 1s ease-out;
}

@keyframes rotate {
	20%, 80% {
		transform: rotateY(180deg);
	}

	100% {
		transform: rotateY(360deg);
	}
}

.word span:nth-child(5).active {
	/*animation: toplong 1.5s linear;*/
  animation: rotate 1s ease-out;
}

.word span:nth-child(6).active {
	/*animation: toplong 1.5s linear;*/
  animation: rotate 1s ease-out;
}

@keyframes toplong {
	10%, 40% {
		transform: translateY(-48vh) scaleY(1);
	}

	90% {
		transform: translateY(-48vh) scaleY(4);
	}
}

/* Other styles */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
/*
body {
	width: 100%;
	height: 100vh;
	display: flex;
	overflow: hidden;
}
*/
body {
	background-color: #ffffff;
	/*color: #4186F7;*/
  color: #ffffff;
	display: flex;
	font-family: 'Roboto', sans-serif;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	height: 100vh;
	margin: 0;
}

.green{
  color: green;
  text-shadow: 2px 2px 4px #000000;
}
.withe{
  color: #ffffff;
  text-shadow: 2px 2px 4px #000000;
}
.red{
  color: red;
  text-shadow: 2px 2px 4px #000000;
}
.nrm{
  color: #4186F7;
  text-shadow: 2px 2px 4px #000000;
}

.dot {

text-align: left;
	font-size: 200px;

	line-height: .8;
  text-shadow: 2px 2px 4px #000000;
}

.fixed {
	position: fixed;
	top: 40px;
	left: 50%;
	transform: translateX(-50%);
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	letter-spacing: 1px;
}

footer i {
	color: red;
}

 a {
	color: #3C97BF;
	text-decoration: none;
}

.parent {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 1px;
grid-row-gap: 1px;
}

.div0 {
  grid-area: -12 / 1 / 1 / 2;
  margin:0 auto;
}
.div1 {
  grid-area: 1 / 1 / 2 / 2;
  margin:0 auto;
}
.div2 {
  grid-area: 2 / 1 / 3 / 2;
  text-align: center;
  padding-top: 50px;
  margin:0 auto;
}

.btn-1 {
    font-family: Hack, monospace;
    background: #0F0F6D;
    color: #ffffff;
    cursor: pointer;
    /*font-size: 2em;*/
    padding: 1.0rem;
    border: 0;
    transition: all 0.5s;
    border-radius: 10px;
    width: auto;
    position: relative;

    &::after {
        content: "\f054";
        font-family: "Font Awesome 5 Pro";
        font-weight: 400;
        position: absolute;
        left: 85%;
        top: 31%;
        right: 5%;
        bottom: 0;
        opacity: 0;

    }

    &:hover {
        background: #2b2bff;
        transition: all 0.5s;
        border-radius: 10px;
        box-shadow: 0px 6px 15px #0000ff61;
        padding: 1.5rem 3.5rem 1.5rem 1.5rem;

        &::after {
            opacity: 1;
            transition: all 0.5s;

        }
    }


}