body,html{
margin:0;
padding:0;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-ms-flex-direction:column;
flex-direction:column;
height:100vh;
width:100vw;
-ms-flex-align:center;
align-items:center;
background-color:#ffffff;
font-family:sans-serif;
background-image:url(pattern.png)
}
code{
background:#fff;
color:#4e56b9;
padding:2px 6px;
border-radius:2px;
display:block
}
code pre{
overflow:auto
}
a{
color:#4e56b9
}
p span{
background:#fff;
color:#4e56b9;
padding:5px 10px;
border-radius:2px
}
header{
-ms-flex-align:center;
-ms-flex-pack:end;
justify-content:flex-end
}
.main,header{
display:-ms-flexbox;
display:flex;
align-items:center;
width:100%
}
.main{
-ms-flex-direction:column;
flex-direction:column;
-ms-flex:1;flex:1;
-ms-flex-pack:center;
justify-content:center;
-ms-flex-align:center
}
.modal-type,.modals{
text-align:center
}
.modal-content{
font-size:16px
}
.btn,.modal-content{
font-family:sans-serif
}
.btn{
text-decoration:none;
background:#4e56b9;
color:#fff;
padding:15px;
font-size:14px;
margin:10px;
display:inline-block;
text-transform:capitalize;
letter-spacing:1px;
border-radius:2px;
transition:background .2s ease-in-out
}
.btn:focus,.btn:hover{
background:#6974f9
}
.btn.for-github{
fill:#fff;background:none
}
.title{
color:#fff;
font-family:Reenie Beanie,cursive;
font-size:54px;
text-align:center;
margin:20px
}
.sub-title{
font-size:14px;
color:#fff
}
.sub-title:before{
content:"Animation : "
}
select{
padding:10px;
border-radius:4px;
border:0
}
@media screen and (max-width:480px){
.title{font-size:22px}
}
.ga{
margin-top:30px;width:400px
}


.blinking{
	animation:blinkingText 1.0s infinite;
}
@keyframes blinkingText{
	0%{		color: #ffffff;	}
	10%{	color: transparent;	}
	20%{	color: transparent;	}
	30%{	color:transparent;	}
	100%{	color: #ffffff;	}
}