style = html`
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dekko&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<style>
.handwritten-font-gloria {
font-family: "Gloria Hallelujah", cursive;
font-weight: 400;
font-style: normal;
}
.rubik-700 {
font-family: "Rubik", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight: 700
}
.rubik-600 {
font-family: "Rubik", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight: 600
}
.rubik-400 {
font-family: "Rubik", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight: 400
}
.dekko {
font-family: 'Dekko';
}
.clear-button-mobile {
display: none;
cursor: pointer;
}
.button-bg {
display: flex;
justify-content: center;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 0%;
}
}
@media (pointer: coarse) {
.clear-button-mobile {
display: block;
}
}
</style>
`