html {
font-size: 16px;
}

body { 
font-family: "Roboto Condensed", sans-serif;
font-optical-sizing: auto;
font-weight: 900;
font-style: normal;
letter-spacing: 0.03em;
}

p, .prose {
font-weight: 400;
}

strong {
font-weight: 900;
}

svg {
max-width: 15rem;
}

@media (min-width: 768px) {
.md\:max-w-xs {
max-width: 18rem;
}
}

#menu_daddy {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
animation: menu-animation linear both;
animation-timeline: scroll(root);
animation-range: 0px 100px;
}

#menu_mommy {
height: 5.5rem;
animation: menu-height-animation linear both;
animation-timeline: scroll(root);
animation-range: 0px 100px;
}

.logo {
height: 5rem;
animation: logo-animation linear both;
animation-timeline: scroll(root);
animation-range: 0px 100px;
}

.slogan {
animation: slogan-animation linear both;
animation-timeline: scroll(root);
animation-range: 0px 100px;
}

.zakaz_total {
line-height: 1.15;
animation: zakaz-animation linear both;
animation-timeline: scroll(root);
animation-range: 0px 100px;
}

.korzinka {
animation: korzinka-animation linear both;
animation-timeline: scroll(root);
animation-range: 0px 100px;
}

@keyframes menu-animation {
from {
position: fixed;
font-size: 1rem;
}
to {
position: fixed;
font-size: 0.875rem;
}
}

@keyframes menu-height-animation {
from {
height: 5.5rem;
}
to {
height: 4rem;
}
}

@keyframes logo-animation {
from {
height: 5rem;
}
to {
height: 3.6rem;
}
}

@keyframes slogan-animation {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 1;
transform: scale(1);
}
}

@keyframes zakaz-animation {
from {
transform: scale(1);
}
to {
transform: scale(1);
}
}

@keyframes korzinka-animation {
from {
transform: scale(1);
}
to {
transform: scale(1);
}
}

@media (min-width: 440px) {
.korzinka { 
display: flex;
}
}

@media (max-width: 440px) {
.logo {
height: 3.6rem;
animation: logo-mobile-animation linear both;
animation-timeline: scroll(root);
animation-range: 0px 100px;
}
}

@keyframes logo-mobile-animation {
from {
height: 3.6rem;
}
to {
height: 3.6rem;
}
}

@media (max-width: 330px) {
.zakaz_total_uah {
padding-right: 0;
}
}

@media (max-width: 310px) {
.zakaz_total_uah {
display: none;
}
.cart_del_butt {
margin-left: 0;
}
}

@supports not (animation-timeline: scroll()) {
#menu_daddy {
position: fixed;
top: 0;
animation: none;
}

#menu_mommy {
height: 5.5rem;
animation: none;
}

.logo {
height: 5rem;
animation: none;
}

.slogan {
animation: none;
}

.zakaz_total {
animation: none;
}

.korzinka {
animation: none;
}

main {
margin-top: 0;
}
}

.demo-content {
height: 200vh;
background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
}