/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@400;700;800&display=swap');

/* Base Patterns */
body {
    background-color: #ffffff;
    background-image: radial-gradient(#111 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Doodle Pattern Class */
.doodle-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23111111' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Text Outline Effect for Menus */
.text-stroke {
    -webkit-text-stroke: 2px black;
    color: transparent;
}
.text-stroke:hover {
    -webkit-text-stroke: 0px;
    color: white;
    text-shadow: 4px 4px 0px #111;
}

/* Utilities */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}