CSS
body{
background:#FF6235;
background:
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 200vw;
height: 200vh;
overflow:hidden;
border: none;
font: normal 1px/normal Arial, Helvetica, sans-serif;
color: rgba(255,255,255,1);
-o-text-overflow: clip;
text-overflow: clip;
color:#fff;
text-align:Center;
width:105vw;
height:170vh;
margin-top:60px;
}
#poo{
color:#fff;
font-size:195px;
letter-spacing: 2px;
font-family: 'Lobster', cursive;
}
@keyframes borderradius {
to { border-radius: 50% }
}
@import url(http://fonts.googleapis.com/css?family=Croissant+One);
svg { animation: borderradius 3s ease-in-out -1.5s infinite alternate; }
svg {
width: 70px;
height: 60px;
margin: 100px;
}
:root {
width: 100%;
height: 100%;
-webkit-transition: font-size 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: font-size 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
font-size: 50%;
font-family: 'Lobster', cursive;
}
@media screen and (min-width: 50em) {
:root {
font-size: 50%;
}
}
@media screen and (min-width: 80em) {
:root {
font-size: 180%;
}
}
a {
color: #FFFFFF;
position: relative;
text-decoration: none;
margin: 2rem;
font-size: 3rem;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
font-weight: 300;
overflow: hidden;
display: block;
text-align: center;
font-family: 'Lobster', cursive;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
a span {
display: block;
-webkit-transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), -webkit-transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
font-family: 'Lobster', cursive;
}
a:after {
content: attr(data-link-alt);
display: inline;
position: absolute;
-webkit-transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
top: 100%;
left: 0;
right: 0;
text-align: center;
}
a:hover {
cursor: -webkit-grab;
cursor: grab;
}
a:hover span {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
a:hover:after {
top: 0;
}
a:active {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
cursor: -webkit-grabbing;
cursor: grabbing;
}
.India {
background-image: url("https://www.crossed-flag-pins.com/animated-flag-gif/gifs/India_240-animated-flag-gifs.gif");
background-position:center;
background-size:570px 300px;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-size: 150px;
font-weight: bold;
font-family: 'Lobster', cursive;
font-weight: normal;
padding-top: 10px;
text-align: center;
text-align: center;
}
