@font-face {
    font-family: "Wonderland";
    font-weight: normal;
    font-style: normal;
    src: url("/assets/fonts/montserrat.regular.otf") format("opentype");
}

:root{
    --header-h: 4em;
    --menu-h: 50px;

    --color-cream: #fcf8b9;
    --color-lilac: #d8b1ff;
    --color-aqua: #cbffed;
    --color-gray: #918f8f;
    --color-lightgray: #e6e6e6ef;
    --color-pink: #ffbee9;
    --color-white: white;
    --color-black: black;
    --gradient-main: linear-gradient(135deg, var(--color-pink), var(--color-cream), var(--color-aqua), var(--color-lilac));
}
*   {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
.input-global {
    width: 100%;
    max-width: 350px;
    padding: 10px;
    margin: 16px 0;
    border-radius: 10px;
    border: 1px solid var(--color-black);
    box-sizing: border-box;
}
body {
    font-family: "Wonderland", 'Courier New', Courier, monospace;
}
textarea {
    padding: 10px;
}
header{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 0;
    background-color: var(--color-white);
}
footer {
    background-color: var(--color-lilac);
    padding: 50px 40px;
}
.btn {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all .3s ease;
}
.btn:hover {
    background: var(--gradient-main);
    color: var(--color-black);
    transform: scale(1.05);
}


@media (max-width: 600px) {
    :root{
        
    }
    html,
    body{
        overflow-x: hidden;
        width: 100%;
        font-family: "Wonderland", 'Courier New', Courier, monospace;
    }
    textarea{
        padding: 10px;
    }
    header{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 0;
        background-color: var(--color-white);
    }
}