@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* basic reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body { line-height: 1.5; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
#root, #__next { isolation: isolate; }

/* styles */


html        { height:100%; }
body        { height:100%; width:100%; background: #51d9ff;   font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 200; font-style: normal; user-select: none; display:block; font-stretch: normal; }
.container  { padding:20vw 0 0 0; display:flex; align-items: center; flex-direction: column; justify-content: center; }
.content    { width:100%; display:flex; align-items: center; flex-direction: column; /*filter:drop-shadow(10px 10px 4vw #444444);*/}
.content > span { font-size: 2.4vw; color:#fff; text-transform: uppercase; letter-spacing: .4em; padding:4% 0; }
.logo       { width:50%; }
.brewing    { background:#fff; border-radius: 5000px;  display: flex;  flex-direction: column; justify-content: center; text-align: center; width:35vw; height:35vw; min-height:35vw; margin:0 auto 20vw auto; transform: rotateZ(-6deg); position:relative; }
.brewing:after, .brewing:before { content:""; display:block; width:8vw; height: 8vw; border-radius:10000px; background-color:#fff; position:absolute; top:75%; left:82%; opacity:.7; }
.brewing:before { width:5vw; height: 5vw; top:96%; left:100%; opacity:.5; }
.brewing > span { text-transform: uppercase; line-height: 1em; color: #6a7d97;  }
.brewing > span.big-1 { font-size: 2.8vw; }
.brewing > span.big-2 { font-size: 8.8vw; }
.brewing > span.big-3 { font-size: 2.8vw; }
.brewing > span.big-4 { font-size: 2vw; line-height:1.5; }
.brewing > span.big-5 { font-size: 4vw; }
body > .wrap       { padding-bottom: 0.1vw; }
@media (max-aspect-ratio: 1/1) {
    body        { display: flex; flex-direction: column; justify-content: center; }
}

@keyframes orbit {
    from {  transform: rotate(0deg) translateX(.3vw) rotate(0deg); }
    to   {  transform: rotate(360deg) translateX(.3vw) rotate(-360deg); }
}

@keyframes orbit-big {
    from {  transform: rotate(0deg) translateX(30vw) rotate(0deg); }
    to   {  transform: rotate(360deg) translateX(30vw) rotate(-360deg); }
}

@keyframes pulse {
    0% { transform: scale(0.97); }
    50% { transform: scale(1.03); }
    100% { transform: scale(0.97); }
}

@keyframes pulse-rotated {
    0% { transform: scale(0.97) rotateZ(-6deg); }
    50% { transform: scale(1.03) rotateZ(-6deg); }
    100% { transform: scale(0.97) rotateZ(-6deg); }
}

.logo { animation: pulse 8s infinite ease-in-out; }
.brewing { animation: pulse-rotated 8s infinite ease-in-out; }

.brewing:after {  animation: orbit 4s forwards infinite;
    animation-timing-function: linear; }
.brewing:before {  animation: orbit 3s forwards infinite;
        animation-timing-function: linear; animation-direction: reverse; }


.bg { position:fixed; width:100%; left:0; top:0; bottom:0; right:0; z-index: -1; }
.bg div { width:100vw; height:100vw; display:block; position:fixed; top:50%; left:50%; background: #888; border-radius: 10000px; animation: orbit-big 12s forwards infinite; animation-timing-function: linear; filter:blur(10vw); pointer-events: none; z-index: -1; opacity:.5; }

.bg div { animation-delay: -4s; animation-duration: 8s; background:#d7ff81; }
.bg div + div { animation-delay: -8s; animation-duration: 12s; background:#3bffe8; }
.bg div + div + div { animation-delay: -12s; animation-duration: 10s; background:#fbb4ff; }