<div class="stars"></div>

<div class="positioning">
	<div class="roof"></div>
	<div class="sun"></div>
	<h1>🐈</h1>		
</div>

// Chrome only - Using experimental Variable fonts.

@font-face {
	font-family:'Zycon'; 
	src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Zycon.ttf');
}

html {
	height: 100%;
}

body {
	background: radial-gradient(ellipse at bottom, #1C2837 0%, #050608 100%);
	height: 100%;
	overflow: hidden;
}

.positioning {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-align: center;
	transform: translate(0, 25%);
}

h1 {
	margin: 0;
	font-size: 200px;
	position: absolute;
	font-family: 'Zycon'; 
	font-variation-settings: 'T1  ' 1, 'T2  ' 0, 'T3  ' 0, 'T4  ' 0, 'M1  ' -1, 'M2  ' -1;
	color: #0d1f4a;
	transform: translateX(50%);
	z-index: 3;
	bottom: 30%;
	animation: eclipse 6s linear infinite;
}

.sun {
	width: 195px;
	height: 195px;
	position: absolute;
	left: 50%;
	background: radial-gradient(ellipse at center, #ffd000 1%, #f9b700 39%, #f9b700 39%, #e06317 100%);
	box-shadow: 0 0 10px 2px rgba(255, 107, 0, 0.4), 0 0 22px 11px rgba(255, 203, 0, 0.13);
	border-radius: 50%;
	z-index: 1;
	bottom: 30%;
}

.roof {
	width: 100%;
	height: 50%;
	background: linear-gradient(to top, #4A2CC0 50%, #3920A4 70%);
	position: absolute;
	bottom: 0;
	transform: rotate(0deg) translate(15%, 25%) skew(-30deg);
	z-index: 2;
}

.stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 1069px 1980px #FFF , 1553px 1152px #FFF , 508px 752px #FFF , 1088px 734px #FFF , 1449px 140px #FFF , 1833px 1041px #FFF , 417px 1965px #FFF , 969px 933px #FFF , 1767px 1694px #FFF , 1282px 184px #FFF , 850px 1675px #FFF , 1692px 415px #FFF , 1732px 941px #FFF , 1378px 709px #FFF , 1438px 536px #FFF , 742px 1380px #FFF , 873px 1511px #FFF , 907px 991px #FFF , 1839px 1661px #FFF , 1688px 771px #FFF , 994px 1086px #FFF , 913px 1619px #FFF , 1011px 1106px #FFF , 1325px 1724px #FFF , 1994px 1267px #FFF , 936px 1272px #FFF , 1997px 1933px #FFF , 1180px 6px #FFF , 1735px 1997px #FFF , 1357px 1337px #FFF , 1927px 1519px #FFF , 606px 1817px #FFF , 1782px 706px #FFF , 280px 1980px #FFF , 237px 380px #FFF , 702px 1936px #FFF , 564px 508px #FFF , 1192px 619px #FFF , 828px 1802px #FFF , 1750px 1751px #FFF , 171px 1251px #FFF , 499px 827px #FFF , 1192px 703px #FFF , 810px 1226px #FFF , 713px 551px #FFF , 954px 819px #FFF , 868px 520px #FFF , 1579px 1325px #FFF , 411px 341px #FFF , 212px 116px #FFF , 811px 1333px #FFF , 650px 1239px #FFF , 78px 1693px #FFF , 1298px 434px #FFF , 1369px 1530px #FFF , 749px 1974px #FFF , 57px 894px #FFF , 1814px 651px #FFF , 436px 837px #FFF , 402px 1006px #FFF , 84px 1426px #FFF , 1618px 1585px #FFF , 1464px 1841px #FFF , 693px 318px #FFF , 962px 1618px #FFF , 141px 910px #FFF , 545px 1633px #FFF , 84px 1683px #FFF , 1170px 1710px #FFF , 1544px 1169px #FFF , 987px 857px #FFF , 372px 1588px #FFF , 318px 12px #FFF , 294px 1103px #FFF , 1537px 879px #FFF , 456px 949px #FFF , 566px 1960px #FFF , 1015px 785px #FFF , 23px 1088px #FFF , 625px 1295px #FFF , 149px 171px #FFF , 1153px 1188px #FFF , 1636px 229px #FFF , 1954px 72px #FFF , 1779px 1650px #FFF , 791px 1049px #FFF , 810px 451px #FFF , 1969px 663px #FFF , 591px 526px #FFF , 641px 968px #FFF , 1232px 471px #FFF , 353px 383px #FFF , 362px 1131px #FFF , 1237px 596px #FFF , 1544px 916px #FFF , 144px 1233px #FFF , 365px 1143px #FFF , 1768px 961px #FFF , 1907px 1925px #FFF , 791px 1068px #FFF , 1943px 943px #FFF , 1926px 1603px #FFF , 295px 1088px #FFF , 352px 628px #FFF , 94px 1730px #FFF , 235px 989px #FFF , 63px 841px #FFF , 1763px 36px #FFF , 1078px 736px #FFF , 1636px 1204px #FFF , 1733px 1708px #FFF , 375px 476px #FFF , 1517px 1633px #FFF , 1864px 83px #FFF , 1734px 408px #FFF , 92px 1157px #FFF , 1183px 1955px #FFF , 1089px 514px #FFF , 155px 1734px #FFF , 1184px 1304px #FFF , 908px 1441px #FFF , 1436px 588px #FFF , 635px 404px #FFF , 1322px 366px #FFF , 262px 585px #FFF , 1913px 1719px #FFF , 929px 1449px #FFF , 1223px 856px #FFF , 1870px 1351px #FFF , 208px 1694px #FFF , 668px 1743px #FFF , 218px 1201px #FFF , 749px 1453px #FFF , 890px 1535px #FFF , 1147px 1089px #FFF , 402px 43px #FFF , 146px 878px #FFF , 682px 1183px #FFF , 777px 293px #FFF , 349px 398px #FFF , 1082px 1954px #FFF , 1721px 1122px #FFF , 942px 1538px #FFF , 1549px 184px #FFF , 1705px 1070px #FFF , 1461px 1379px #FFF , 690px 1883px #FFF , 1506px 1622px #FFF , 85px 282px #FFF , 912px 1227px #FFF , 1275px 34px #FFF , 647px 1257px #FFF , 609px 1900px #FFF , 88px 1825px #FFF , 38px 850px #FFF , 749px 1934px #FFF , 110px 850px #FFF , 1883px 524px #FFF , 1871px 1990px #FFF , 874px 1999px #FFF , 6px 783px #FFF , 571px 1763px #FFF , 306px 928px #FFF , 1637px 1276px #FFF , 86px 781px #FFF , 1467px 976px #FFF , 1873px 109px #FFF , 1908px 1918px #FFF , 1441px 1707px #FFF , 1858px 345px #FFF , 404px 271px #FFF , 921px 275px #FFF , 1017px 1287px #FFF , 1904px 130px #FFF , 510px 32px #FFF , 1577px 1142px #FFF , 92px 119px #FFF , 1523px 1012px #FFF , 1638px 1757px #FFF , 458px 330px #FFF , 804px 1722px #FFF , 1044px 815px #FFF , 79px 1054px #FFF , 1202px 1961px #FFF , 1515px 986px #FFF , 721px 1462px #FFF , 1803px 302px #FFF , 718px 952px #FFF , 1729px 335px #FFF , 458px 398px #FFF , 1913px 1582px #FFF , 401px 831px #FFF , 864px 1433px #FFF , 823px 1848px #FFF , 597px 481px #FFF , 338px 128px #FFF , 1337px 428px #FFF , 1542px 1605px #FFF , 1696px 488px #FFF , 982px 1838px #FFF , 1249px 100px #FFF , 1246px 1381px #FFF , 993px 1826px #FFF , 409px 993px #FFF , 2000px 1241px #FFF , 432px 585px #FFF , 367px 416px #FFF , 1553px 304px #FFF , 1774px 1021px #FFF , 1298px 1235px #FFF , 1252px 677px #FFF , 1054px 1024px #FFF , 584px 1754px #FFF , 160px 735px #FFF , 1111px 1822px #FFF , 985px 1642px #FFF , 1869px 862px #FFF , 1384px 1165px #FFF , 469px 762px #FFF , 526px 375px #FFF , 1077px 1887px #FFF , 38px 1495px #FFF , 787px 1875px #FFF , 343px 141px #FFF , 1928px 1119px #FFF , 437px 1806px #FFF , 1950px 487px #FFF , 738px 1353px #FFF , 284px 1176px #FFF , 1034px 1954px #FFF , 383px 674px #FFF , 1836px 1030px #FFF , 128px 1593px #FFF , 923px 148px #FFF , 1176px 6px #FFF , 1607px 304px #FFF , 1066px 4px #FFF , 1735px 1020px #FFF , 1528px 799px #FFF , 628px 1836px #FFF , 835px 856px #FFF , 67px 1007px #FFF , 1333px 1845px #FFF , 207px 1502px #FFF , 1229px 1796px #FFF , 458px 823px #FFF , 1942px 75px #FFF , 919px 895px #FFF , 1723px 1897px #FFF , 214px 1496px #FFF , 423px 1809px #FFF , 1573px 1294px #FFF , 1106px 215px #FFF , 372px 305px #FFF , 1864px 198px #FFF , 1347px 1320px #FFF , 200px 1836px #FFF , 1025px 1208px #FFF , 1519px 910px #FFF , 1943px 506px #FFF , 728px 434px #FFF , 1893px 1602px #FFF , 498px 214px #FFF , 1138px 1342px #FFF , 871px 302px #FFF , 1397px 1767px #FFF , 295px 1433px #FFF , 280px 54px #FFF , 1364px 235px #FFF , 804px 1003px #FFF , 1183px 9px #FFF , 480px 207px #FFF , 510px 234px #FFF , 1282px 1818px #FFF , 233px 1713px #FFF , 1195px 1366px #FFF , 1776px 411px #FFF , 1486px 414px #FFF , 1644px 1814px #FFF , 1610px 515px #FFF , 876px 429px #FFF , 1895px 1020px #FFF , 1449px 856px #FFF , 1314px 818px #FFF , 930px 1329px #FFF , 1335px 1863px #FFF , 114px 58px #FFF , 1403px 665px #FFF , 78px 1026px #FFF , 1253px 1932px #FFF , 619px 817px #FFF , 1873px 908px #FFF , 617px 1817px #FFF , 1294px 444px #FFF , 286px 1684px #FFF , 135px 1000px #FFF , 1569px 1308px #FFF , 835px 1645px #FFF , 1642px 1975px #FFF , 1093px 1392px #FFF , 1994px 23px #FFF , 733px 1302px #FFF , 305px 1417px #FFF , 709px 708px #FFF , 872px 1878px #FFF , 1972px 1086px #FFF , 1428px 1839px #FFF , 1132px 68px #FFF , 870px 159px #FFF , 1603px 358px #FFF , 720px 41px #FFF , 1325px 975px #FFF , 1674px 1832px #FFF , 231px 876px #FFF , 1573px 1881px #FFF , 40px 1671px #FFF , 1025px 1642px #FFF , 314px 740px #FFF , 1262px 970px #FFF , 1967px 1139px #FFF , 1987px 1184px #FFF , 376px 1872px #FFF , 1176px 1535px #FFF , 467px 303px #FFF , 324px 745px #FFF , 1253px 1261px #FFF , 1048px 575px #FFF , 608px 414px #FFF , 549px 661px #FFF , 536px 897px #FFF , 1917px 884px #FFF , 796px 143px #FFF , 1972px 854px #FFF , 1172px 369px #FFF , 1233px 1243px #FFF , 1714px 1574px #FFF , 379px 213px #FFF , 388px 1111px #FFF , 848px 496px #FFF , 882px 573px #FFF , 764px 830px #FFF , 365px 1066px #FFF , 626px 822px #FFF , 688px 1981px #FFF , 1682px 990px #FFF , 889px 809px #FFF , 221px 804px #FFF , 1136px 615px #FFF , 712px 1209px #FFF , 826px 1311px #FFF , 1787px 256px #FFF , 750px 998px #FFF , 1314px 296px #FFF , 561px 1641px #FFF , 344px 265px #FFF , 449px 1689px #FFF , 336px 2px #FFF , 1878px 1886px #FFF , 1625px 978px #FFF , 1275px 530px #FFF , 400px 587px #FFF , 131px 163px #FFF , 779px 1855px #FFF , 29px 762px #FFF , 649px 74px #FFF , 648px 1936px #FFF , 1930px 380px #FFF , 1511px 1679px #FFF , 1977px 1056px #FFF , 101px 184px #FFF , 1417px 754px #FFF , 342px 1089px #FFF , 1595px 1268px #FFF , 955px 908px #FFF , 1426px 1616px #FFF , 1079px 1615px #FFF , 567px 552px #FFF , 1623px 508px #FFF , 355px 795px #FFF , 405px 496px #FFF , 1905px 1985px #FFF , 780px 1428px #FFF , 174px 719px #FFF , 967px 1880px #FFF , 154px 1090px #FFF , 1403px 702px #FFF , 811px 1050px #FFF , 1789px 1540px #FFF , 979px 1116px #FFF , 248px 620px #FFF , 1805px 1061px #FFF , 367px 45px #FFF , 836px 894px #FFF , 780px 824px #FFF , 1319px 77px #FFF , 1391px 1535px #FFF , 773px 1425px #FFF , 1858px 1750px #FFF , 904px 43px #FFF , 1086px 610px #FFF , 678px 775px #FFF , 748px 1630px #FFF , 707px 1179px #FFF , 687px 1231px #FFF , 250px 1874px #FFF , 1775px 125px #FFF , 1511px 1945px #FFF , 852px 1177px #FFF , 1466px 272px #FFF , 1514px 198px #FFF , 752px 1247px #FFF , 576px 304px #FFF , 863px 1536px #FFF , 1023px 1954px #FFF , 243px 892px #FFF , 1701px 1243px #FFF , 991px 865px #FFF , 676px 1265px #FFF , 1488px 1003px #FFF , 514px 1347px #FFF , 56px 330px #FFF , 1752px 707px #FFF , 497px 1221px #FFF , 793px 94px #FFF , 918px 1262px #FFF , 1004px 1908px #FFF , 1933px 1643px #FFF , 315px 809px #FFF , 1217px 1082px #FFF , 364px 490px #FFF , 307px 636px #FFF , 1120px 1448px #FFF , 1529px 32px #FFF , 1120px 1936px #FFF , 1737px 928px #FFF , 45px 128px #FFF , 1480px 845px #FFF , 1742px 527px #FFF , 1537px 882px #FFF , 809px 1636px #FFF , 967px 1004px #FFF , 356px 1470px #FFF , 121px 1058px #FFF , 87px 1929px #FFF , 879px 1208px #FFF , 460px 1306px #FFF , 652px 595px #FFF , 1114px 1411px #FFF , 1585px 818px #FFF , 1057px 1613px #FFF , 1436px 122px #FFF , 84px 1934px #FFF , 1932px 124px #FFF , 967px 827px #FFF , 918px 1314px #FFF , 649px 112px #FFF , 1754px 1221px #FFF , 1360px 532px #FFF , 700px 1935px #FFF , 1339px 30px #FFF , 99px 1278px #FFF , 1099px 865px #FFF , 1306px 542px #FFF , 754px 1447px #FFF , 565px 852px #FFF , 1687px 766px #FFF , 1114px 1406px #FFF , 1511px 244px #FFF , 1434px 1607px #FFF , 1813px 378px #FFF , 1716px 1527px #FFF , 505px 1857px #FFF , 1863px 1904px #FFF , 1606px 1204px #FFF , 1358px 237px #FFF , 920px 1591px #FFF , 848px 286px #FFF , 977px 559px #FFF , 1501px 1014px #FFF , 1179px 88px #FFF , 578px 164px #FFF , 929px 799px #FFF , 617px 607px #FFF , 1834px 1995px #FFF , 1117px 924px #FFF , 1343px 27px #FFF , 1683px 435px #FFF , 1350px 160px #FFF , 304px 869px #FFF , 660px 1088px #FFF , 1409px 536px #FFF , 983px 1674px #FFF , 1592px 961px #FFF , 1921px 406px #FFF , 1390px 600px #FFF , 1848px 241px #FFF , 1858px 1551px #FFF , 1787px 1872px #FFF , 1745px 1647px #FFF , 300px 1663px #FFF , 296px 1215px #FFF , 1412px 1694px #fff;
}

@keyframes eclipse {
	0% {
			font-variation-settings: 'T1  ' 1, 'T2  ' 0, 'T3  ' 0, 'T4  ' 0, 'M1  ' -1, 'M2  ' -1;	}
	
	5% {
		font-variation-settings: 'T1  ' 0, 'T2  ' 0, 'T3  ' 0, 'T4  ' 0, 'M1  ' -1, 'M2  ' -1;	}
	10% {
		font-variation-settings: 'T1  ' 0, 'T2  ' 0, 'T3  ' 0, 'T4  ' 0, 'M1  ' -1, 'M2  ' -1;
	}
	15% {
			font-variation-settings: 'T1  ' 1, 'T2  ' 0, 'T3  ' 0, 'T4  ' 0, 'M1  ' -1, 'M2  ' -1;	}
}

var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
  this.setAttribute("data-text", this.innerText);
});