@font-face {
    font-family: 'ChildsHandwriting';
    src: url('fonts/ChildsHandwriting-8AX2.ttf') format('truetype');
}

* {
    box-sizing: border-box;
}

body {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent scrolling, true full-screen */
}

/* Now spans 100vw and 100vh perfectly */
.canvas {
    width: 100vw;
    height: 100vh; 
    position: relative;
    display: flex;
    flex-direction: column;
    
    /* Responsive to both width and height equally using cqmin */
    container-type: size;
    container-name: canvas;
}

.top-section {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 4cqmin 8cqmin;
    color: black;
    height: 25cqmin;
    font-family: 'ChildsHandwriting', cursive;
    z-index: 10;
}

.link {
    color: black;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.1s;
    font-size: 8cqmin;
}

.link:hover {
    color: #ff00ff;
    transform: scale(1.1) rotate(-3deg);
}

.x {
    font-size: 10cqmin;
    font-family: 'ChildsHandwriting', cursive;
}

.green-line {
    width: 100%;
    height: 0.8cqmin;
    background-color: #00ea00;
    z-index: 10;
}

.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 6cqmin 12cqmin;
    z-index: 10;
}

.header-text {
    font-family: 'ChildsHandwriting', cursive;
    font-size: 18cqmin;
    font-weight: 400;
    margin: 0;
    margin-top: 4cqmin;
    color: #000;
    line-height: 0.9;
}

.money-signs {
    display: flex;
    gap: 15cqmin;
    margin-top: 4cqmin;
    padding-left: 10cqmin;
}

.money-signs span {
    font-family: 'ChildsHandwriting', cursive;
    font-size: 28cqmin;
    display: inline-block;
    line-height: 1;
}

/* Doodles positioned around the canvas independently */
.doodle {
    position: absolute;
    z-index: 1; /* Keep them behind the main text */
    pointer-events: none; /* Ignore hovering on doodles so links still work easily */
}

.doodle-sun {
    top: 28cqmin;
    right: 8cqmin;
    width: 25cqmin;
    height: 25cqmin;
    animation: jitter 0.5s infinite;
}

.doodle-stick-figure {
    bottom: 5cqmin;
    right: 15cqmin;
    width: 30cqmin;
    height: 50cqmin;
    animation: jitter 0.4s infinite;
}

.doodle-roblox {
    bottom: 8cqmin;
    right: 45cqmin;
    width: 25cqmin;
    height: 40cqmin;
    animation: jitter 0.6s infinite;
}

.doodle-cloud {
    top: 25cqmin;
    left: 10cqmin;
    width: 30cqmin;
    height: 15cqmin;
    animation: jitter 0.3s infinite;
    opacity: 0.7;
}

/* Messy strokes for SVG */
.sketch-path {
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.promo-text {
    font-family: 'ChildsHandwriting', cursive;
    font-size: 5cqmin;
    margin-top: 5cqmin;
    color: #444; /* Slightly faded grey to look more like pencil/crayon */
    text-align: center;
    width: 100%;
}

/* Jitter animation for true MS-paint/kids drawing feel */
@keyframes jitter {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-2px, 0px) rotate(1deg); }
    30% { transform: translate(2px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-2px, 1px) rotate(0deg); }
    70% { transform: translate(2px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.money-signs span:hover, .header-text:hover, .x:hover {
    animation: jitter 0.1s infinite; /* Fast jitter on hover */
    color: #ff00ff;
    cursor: default;
}