@font-face {
font-family: Varela Round;
src: url(VarelaRound.woff2) format("woff2");
}
:root {
--a: #f33;
--b: #33f;
}
body {
color: var(--a);
font-family: Varela Round;
font-weight: bold;
font-size: 1.25vmax;
letter-spacing: .1rem;
line-height: 2;
text-align: center;
backdrop-filter: blur(.2vmax);
  cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><linearGradient id='a'><stop offset='0' stop-color='%23f33'/><stop offset='1' stop-color='%2333f'/></linearGradient></defs><path d='M3.664 2.091c-.029-.187-.011-.378.048-.557.29-.833 1.375-1.043 1.951-.377L20.009 15.183c.124.136.221.303.274.478.319.984-.545 1.944-1.554 1.729l-7.225-1.081-3.802 6.224c-.088.159-.209.303-.355.419-.813.636-2.01.151-2.157-.869L3.664 2.091Z' fill='none' stroke='url(%23a)' stroke-linejoin='round' stroke-width='1.5'/></svg>"),auto;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' style='background:%23000' viewBox='0 0 200 200' width='300' height='300'><path fill='%230014dd' d='m100 57.1-36 36 7.5 7.5L100 72.1z'/><path fill='%230024ee' d='M100 57.1v15l28.6 28.5 7.5-7.5z'/><path fill='%230014dd' d='M100 163.2v15l70.7-70.7.1-15.1z'/><path fill='%230024ee' d='M100 163.2 29.2 92.5v15l70.8 70.7z'/><path fill='%2333F' d='M100 21.8 29.2 92.5l70.7 70.7 70.7-70.7L100 21.8zm0 106.1L64.6 92.5 100 57.1l35.4 35.4-35.4 35.4z'/><path fill='%23c7000c' d='M0 157.1v15l28.6 28.5 7.5-7.5z'/><path fill='%23e30020' d='m70.7 200 .1-7.6-7.6 7.6z'/><path fill='%23F33' d='M27.8 200h35.4l7.5-7.5L0 121.8v35.4l35.3 35.3z'/><path fill='%23e30020' d='m200 157.1-36 36 7.5 7.5 28.5-28.5z'/><path fill='%23c7000c' d='m136.7 200-7.5-7.5v7.5z'/><path fill='%23F33' d='m172.1 200-7.5-7.5 35.4-35.4v.1-35.4l-70.8 70.7 7.5 7.5z'/><path fill='%23c7000c' d='M136.7 0 200 63.2v15L129.2 7.5V0Z'/><path fill='%23F33' d='M200 27.8v.1L172.1 0h-35.4L200 63.2z'/><path fill='%23e30020' d='M63.2 0 0 63.2v15L70.7 7.5V0z'/><path fill='%23F33' d='M0 63.2 63.2 0H27.8L0 27.8z'/></svg>") fixed;
box-shadow: inset 0 0 0 100vw rgb(0 0 0/.7);
}
::selection {
color: var(--b);
}
h1, h2 {
font-size: 3vmax;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.a {
height: 100vh;
align-content: center;
}
.b {
border: .1vmax solid var(--a);
width: 50px;
margin: 1.5rem auto;
}
.c {
display: inline-flex;
margin-top: 2rem;
align-items: center;
padding: .8vmax;
border: .2vmax solid var(--a);
border-radius: 2vmax;
box-shadow: 0 0 2vmax var(--a);
}
.c span {
 margin-left: 1rem;
 padding-left: 1rem;
border-left: .05vmax solid var(--a);
}
a {
color: unset;
text-decoration: none;
}
a:hover {
color: var(--b);
transition: .5s;
}