/* Ready, get set, go! */
@import url("https://fonts.googleapis.com/css2?family=Bangers&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");
:root {
--lemon-animation-delay: 1000ms;
--lemon-animation-duration: 4000ms;
--title-fade-delay: 350ms;
--title-fade-duration: 500ms;
--wacky-duration: 1000ms;
}
@keyframes backgroundColorChange {
0% {
background: #77ccff;
}
100% {
background: #ffd731;
}
}
html,
body {
background-color: #77ccff;
animation: backgroundColorChange 1ms
calc(var(--lemon-animation-delay) + var(--lemon-animation-duration) - 10ms)
forwards;
margin: 0;
font-family: "PT Serif", serif;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes backgroundLemonsMobile {
0% {
background-size: 100px 100px;
transform: rotate(0);
}
25% {
background-size: 100px 100px;
background-position: center calc(350vh + 40px);
transform-origin: center calc(350vh + 40px + 50px);
transform: rotate(360deg);
}
50% {
background-size: 200px 200px;
background-position: center calc(350vh - 10px);
transform-origin: center calc(350vh - 10px + 50px);
transform: rotate(660deg);
}
75% {
transform: rotate(1080deg);
}
99% {
background-image: url("data:image/svg+xml;utf8,");
background-size: 800vh 800vh;
background-position: center center;
transform-origin: center;
transform: rotate(1440deg);
}
100% {
background-image: none;
}
}
@keyframes backgroundLemonsDesktop {
0% {
background-size: 100px 100px;
transform: rotate(0);
}
25% {
background-size: 100px 100px;
background-position: center calc(350vh + 100px);
transform-origin: center calc(350vh + 100px + 50px);
transform: rotate(360deg);
}
50% {
background-size: 200px 200px;
background-position: center calc(350vh + 50px);
transform-origin: center calc(350vh + 50px + 50px);
transform: rotate(720deg);
}
75% {
transform: rotate(1080deg);
}
99% {
background-image: url("data:image/svg+xml;utf8,");
background-size: 800vh 800vh;
background-position: center center;
transform-origin: center;
transform: rotate(1440deg);
z-index: 0;
}
100% {
background-image: none;
z-index: -1;
}
}
@keyframes wacky {
0% {
background-image: linear-gradient(
to right,
black 0%,
black 69%,
#f6828c 69%,
#f6828c 85%,
black 85%,
black 100%
);
}
20% {
background-image: linear-gradient(
to right,
black 0%,
black 69%,
#f59ca9 69%,
#f59ca9 85%,
black 85%,
black 100%
);
}
40% {
background-image: linear-gradient(
to right,
black 0%,
black 69%,
#8ae1fc 69%,
#8ae1fc 85%,
black 85%,
black 100%
);
}
100% {
background-image: linear-gradient(
to right,
black 0%,
black 69%,
#f6828c 69%,
#f6828c 85%,
black 85%,
black 100%
);
}
}
@keyframes shrinkPaddingDesktop {
from {
padding-top: 300px;
}
to {
padding-top: 80px;
}
}
article {
padding-top: 160px;
margin: 0 40px;
position: relative;
overflow: hidden;
text-align: center;
@media (min-width: 800px) {
margin: 0 auto;
padding-top: 300px;
animation: shrinkPaddingDesktop 750ms
calc(
var(--lemon-animation-delay) + var(--lemon-animation-duration) - 750ms
)
forwards;
max-width: 720px;
}
&:before {
content: "";
position: fixed;
width: 800vw;
height: 800vh;
top: -350vh;
left: -350vw;
background: url("data:image/svg+xml;utf8,");
background-position: center calc(350vh + 40px);
transform-origin: center calc(350vh + 40px + 50px);
background-repeat: no-repeat;
background-size: 100px 100px;
animation: backgroundLemonsMobile var(--lemon-animation-duration)
var(--lemon-animation-delay) forwards;
@media (min-width: 800px) {
background-position: center calc(350vh + 100px);
transform-origin: center calc(350vh + 100px + 50px);
animation: backgroundLemonsDesktop var(--lemon-animation-duration)
var(--lemon-animation-delay) forwards;
}
}
& > * {
margin: 0;
opacity: 0;
animation: fadeIn 500ms
calc(var(--lemon-animation-delay) + var(--lemon-animation-duration))
forwards;
}
& > h1 {
font-family: "Bangers";
font-size: 40px;
display: inline;
text-align: center;
animation: fadeIn var(--title-fade-duration) var(--title-fade-delay)
forwards,
wacky var(--wacky-duration)
calc(var(--lemon-animation-delay) + var(--lemon-animation-duration))
infinite;
background-image: linear-gradient(
to right,
black 0%,
black 69%,
#f6828c 69%,
#f6828c 85%,
black 85%,
black 100%
);
color: transparent;
background-clip: text;
padding-right: 6px;
position: relative;
filter: drop-shadow(1px 1px #000);
@media (min-width: 800px) {
font-size: 80px;
padding-right: 15px;
}
}
& > h1 + p,
& > h1 + p + a,
& > h1 + p + a + time {
animation: fadeIn var(--title-fade-duration)
calc(var(--title-fade-delay) + var(--title-fade-duration)) forwards;
margin: 0 auto 20px;
}
& > h1 + p {
font-size: 18px;
margin-top: 20px;
text-align: center;
padding: 0;
}
a {
color: #175891;
}
& > h1 + p + a + time + p {
margin-top: 40px;
@media (min-width: 800px) {
margin-top: 40px;
}
}
& > p {
margin: 20px 0 0;
@media (min-width: 800px) {
padding: 0 80px;
}
}
blockquote {
color: #1b82a2;
clear: both;
font-family: "Bangers";
padding: 0 80px;
font-size: 40px;
margin-top: 40px;
overflow: hidden;
p {
margin-bottom: 20px;
}
}
blockquote + p + figure {
width: 100%;
}
wacky-video {
position: relative;
.controls {
position: absolute;
bottom: 5px;
left: 0;
display: flex;
right: 0;
gap: 10px;
padding: 0 20px;
justify-content: space-between;
}
.progress {
flex-grow: 1;
order: 0;
padding-right: 20px;
align-self: center;
margin-bottom: 5px;
progress {
width: 100%;
}
}
}
& > figure {
display: block;
margin: 40px 10px 20px 0;
float: left;
@media (min-width: 800px) {
width: calc(50% - 20px);
}
}
p {
text-align: left;
}
figure + p,
figure + blockquote {
clear: both;
}
figcaption {
text-align: left;
font-style: italic;
color: #666;
}
time {
color: #666;
}
img,
video {
/* display: block; */
width: 100%;
height: auto;
}
aside {
margin-top: 40px;
.content {
margin: 20px 0;
}
}
}
progress {
appearance: none;
}
progress::-webkit-progress-value {
background: #1b82a2;
}
@keyframes fadeInView {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
[data-gallery] {
display: flex;
overflow-x: auto;
padding: 0;
gap: 20px;
align-items: center;
figure {
img {
min-height: 600px;
width: auto;
}
}
}
hr {
display: block;
margin: 40px 150px;
outline: none;
border: 1px solid black;
}
h2 {
font-family: "Bangers";
font-size: 24px;
display: inline;
@media (min-width: 800px) {
font-size: 48px;
}
}
[data-category="premium"] {
font-size: 12px;
}
body > aside {
margin: 40px 40px 0;
position: relative;
overflow: hidden;
text-align: center;
@media (min-width: 800px) {
margin: 40px auto 0;
max-width: 720px;
}
img {
width: 100%;
height: auto;
margin: 20px 0;
}
}
footer {
margin: 0 40px 40px;
@media (min-width: 800px) {
margin: 0 auto 40px;
max-width: 720px;
}
}
button {
background: #1b82a2;
cursor: pointer;
border: 2px solid black;
outline: none;
color: white;
font-weight: 600;
order: 1;
padding: 5px 10px;
border-radius: 10px;
margin-bottom: 5px;
}