@font-face {
font-family: 'questrialregular';
src: url('questrial-regular-webfont.woff2') format('woff2'),
 url('questrial-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

* {
margin: 0;
padding: 0;
border: 0;
}

a {
-webkit-transition: 300ms linear 0s;
-moz-transition: 300ms linear 0s;
-o-transition: 300ms linear 0s;
transition: 300ms linear 0s;
}

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

a:hover {
color: #c03;
text-decoration: underline;
}

body {
margin: 50px;
font-family: 'questrialregular', sans-serif;
text-align: center;
font-weight: 400;
font-size: 1.2em;
line-height: 1.4;
color: #000;
background-color: #fff;
background-image: url(flake.svg);
background-size: 150px auto;
background-position: center top;
}

h1 {
font-weight: 400;
font-size: 3em;
}

h2 {
text-transform: uppercase;
font-weight: 700;
font-size: 15em;
line-height: 1;
margin-bottom: 0.1em;
}

h2.big {
color: #390; 
animation-name: headerCycle; 
animation-duration:6s; 
animation-direction:normal; 
animation-iteration-count:infinite; 

-webkit-animation-name: headerCycle; 
-webkit-animation-duration:6s; 
-webkit-animation-direction:normal; 
-webkit-animation-iteration-count:infinite; 
}

#sharing {
width:100%;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}

ul.share-buttons {
text-align: left;
list-style: none;
padding: 0;
margin: 0;
background: rgba(0,0,0,.7);
width: 100%;
}

ul.share-buttons img {
height: 24px;
}

ul.share-buttons li {
display: inline;
text-align: center;
}

ul.share-buttons li a {
display: inline-block;
width: 11%;
padding: 5px 0 2px 0;
background: #000;
border-radius: 0px;
}

ul.share-buttons li.share {
padding: 0 5px;
}

ul.share-buttons li.share-fb a {
background: #3B5998;
}

ul.share-buttons li.share-tw a {
background: #000;
}

ul.share-buttons li.share-em a {
background: #444;
}

ul.share-buttons li.share-wa a {
background: #25d366;
}

ul.share-buttons li a:hover {
filter: brightness(70%);
}

ul.share-buttons .sr-only{
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

@media (min-width: 601px) {

ul.share-buttons li.share-wa {
display: none;
}

}
	

@keyframes headerCycle 
{
0% {color:#390;} 
25% {color:#c03;} 
50% {color:#fc0;} 
75% {color:#30c;}
} 

@-webkit-keyframes headerCycle 
{ 
0% {color:#390;} 
25% {color:#c03;} 
50% {color:#fc0;} 
75% {color:#30c;} 
}

h3 {
font-weight: 400;
font-size: 1.2em;
}

p, h3 {
margin-bottom: 2em;
}

p.where {
font-size: 1.5em;
}

p.foot { 
margin-top: 2em;
opacity: 0.7;
margin-bottom: 0.5em;
font-size: 0.8em;
}


/* Smartphones */
@media (max-width: 600px) {

body {
margin: 30px;
}

h1 {
font-size: 1.5em;
}

h2 {
font-size: 5em;
}

h3 {
font-size: 0.9em;
}

p.where {
font-size: 1em;
}

p.foot {
font-size: 0.8em;
}

}