@font-face {
    font-family: appfont;
    src: url(../fonts/OpenSans-VariableFont_wdth,wght.ttf);
}

:root {
    --border-radius: 8px;
    --box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    --box-shadow-hover: 0 0 10px rgba(0, 0, 0, 0.5);
    --primary-color: #00385e;
    --accent-yellow: #ffc107;
    --accent-red: #e63946;
    --accent-green: #2a9d8f;
    --accent-purple: #9b5de5;
    --accent-orange: #f4a261;
    --accent-brown: #8d6e63;
    --neutral-white: #f1f1f1;
    --accent-coral: #ff6f61;
    --accent-forest: #6a994e;
    --accent-gold: #ffd166;
    --accent-teal: #009fbe; 
    --neutral-gray: #e0e0e0;
    --small-screen: 640px;
    --large-screen: 1024px;
    --small-padding: 10px;
    --large-padding: 30px;
}

body {
    margin: 0;
    overflow: auto;
    height: 100%;
    width: 100%;
    background: #e8f0f6;
}

html {
    font-size: 15px;
    height: 100%;
}

html, p, input, button, select, option {
    color: rgb(50, 50, 50);
    font-family: appfont;
    font-size: 1rem; 
}

input {
    font-weight: 600;
}

.box {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

button.box {
    cursor: pointer;
    transition: all 0.3s;
}

    button.box:hover {
        background-color: rgba(0, 0, 0, 0.1);
        filter: contrast(95%);
        border: 2px solid rgba(0, 0, 0, 0.5);
        border-radius: 255px 12px 225px 12px/12px 230px 12px 250px;
    }

input.box {
    transition: all 0.3s;
    padding: 10px;
    outline: none;
}

    input.box:focus {
        border: 2px solid rgba(0, 0, 0, 0.8);
    }

main {
    display: grid;
    overflow: auto;
}

content {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: auto;
    padding: 30px;
    grid-gap: 20px;
    max-width: 100vw;
}

.handdrawn {
    background-color: rgba(0, 0, 0, 0.05);
    filter: contrast(90%);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
}

button.handdrawn {
    cursor: pointer;
    transition: all 0.3s;
}

    button.handdrawn:hover {
        background-color: rgba(0, 0, 0, 0.1);
        filter: contrast(95%);
        border: 2px solid rgba(0, 0, 0, 0.5);
        border-radius: 255px 12px 225px 12px/12px 230px 12px 250px;
    }

input.handdrawn {
    transition: all 0.3s;
    padding: 10px;
    outline: none;
}

    input.handdrawn:focus {
        border: 2px solid rgba(0, 0, 0, 0.8);
    }

.handdrawnicon {
    color: rgb(50, 50, 50);
}

.center-v {
    display: flex;
    align-items: center;
}

@media (max-width:500px) {
    content {
        padding: 10px;
    }
}

h2 {
    font-weight: 600;
    color: #222;
}