* { }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
body { color: red; font-family: "Share Tech Mono", monospace; }
.wrapper { position: relative; width: 100%; height: 100%; overflow: hidden;}
.letter { font-size: 100vh; line-height: 100vh; margin-top: -50vh; margin-left: -27vh; color: #c33; text-align: center; position: absolute; display: block; transform: scale(0.2); transform-origin: center center; left: 50%; top: 50%; }
.letter span { display: block; transform: rotate(-90deg) scale(4.2); will-change: transform; animation: Apple 20s ease infinite 2s alternate; }
.alphabet-inner { position: absolute; top: 19vh; left:0; right: 0; bottom: 0; }
.letter {  }

.letter div { transform-origin: top center; will-change: transform, opacity; }
.a1 { transform: rotate(0deg); animation: A1 20s ease infinite 2s alternate;}
.a2 { transform: rotate(45deg); animation: A2 20s ease infinite 2s alternate;}
.a3 { transform: rotate(90deg); animation: A3 20s ease infinite 2s alternate; }
.a4 { transform: rotate(135deg); animation: A4 20s ease infinite 2s alternate;}
.a5 { transform: rotate(180deg); animation: A5 20s ease infinite 2s alternate;}
.a6 { transform: rotate(225deg); animation: A6 20s ease infinite 2s alternate;}
.a7 { transform: rotate(270deg); animation: A7 20s ease infinite 2s alternate;}
.a8 { transform: rotate(315deg); animation: A8 20s ease infinite 2s alternate;}


@keyframes Apple {
0%  { transform: rotate(-90deg) scale(4.2); }
2%  { transform: rotate(-90deg) scale(4.2); }
10% { transform: rotate(-90deg) scale(1.05); }
12% { transform: rotate(-90deg) scale(1.05); }
20% { transform: rotate(-180deg) scale(1.2); }
22% { transform: rotate(-180deg) scale(1.2); }
30% { transform: rotate(-180deg) scale(3.8); }
32% { transform: rotate(-180deg) scale(3.8); }
50% { transform: rotate(-25deg) scale(3.5); }
52% { transform: rotate(-25deg) scale(3.5); }
60% { transform: rotate(25deg) scale(1.1); }
66% { transform: rotate(25deg) scale(1.1); }
80% { transform: rotate(0deg) scale(2) translate(0px,-21vh);}
100% { transform: rotate(0deg) scale(2) translate(0px,-21vh);}
}


@keyframes A2 {
0%  { transform: rotate(45deg); opacity:1; }
60% { transform: rotate(45deg); opacity:1;}
80% { transform: rotate(0deg); opacity:0; }
100% { transform: rotate(0deg); opacity:0; }
}

@keyframes A3 {
0%  { transform: rotate(90deg); opacity:1; }
60% { transform: rotate(90deg); opacity:1;}
80% { transform: rotate(0deg); opacity:0; }
100% { transform: rotate(0deg); opacity:0; }
}

@keyframes A4 {
0%  { transform: rotate(135deg); opacity:1; }
60% { transform: rotate(135deg); opacity:1;}
80% { transform: rotate(0deg); opacity:0; }
100% { transform: rotate(0deg); opacity:0; }
}

@keyframes A5 {
0%  { transform: rotate(180deg); opacity:1; }
60% { transform: rotate(180deg); opacity:1;}
80% { transform: rotate(0deg); opacity:0; }
100% { transform: rotate(0deg); opacity:0; }
}

@keyframes A6 {
0%  { transform: rotate(225deg); opacity:1; }
60% { transform: rotate(225deg); opacity:1;}
80% { transform: rotate(0deg); opacity:0; }
100% { transform: rotate(0deg); opacity:0; }
}

@keyframes A7 {
0%  { transform: rotate(270deg); opacity:1; }
60% { transform: rotate(270deg); opacity:1;}
80% { transform: rotate(0deg); opacity:0; }
100% { transform: rotate(0deg); opacity:0; }
}

@keyframes A8 {
0%  { transform: rotate(315deg); opacity:1; }
60% { transform: rotate(315deg); opacity:1;}
80% { transform: rotate(0deg); opacity:0; }
100% { transform: rotate(0deg); opacity:0; }
}

@keyframes center {
0%  { transform: translate(0px,0px); }
75% { transform: translate(0px,0px); }
80% { transform: translate(0px,-75px); }
100% { transform: translate(0px,-75px); }
}