@font-face
{
    font-family:"handwriting";
    src:
    url("fonts/journal-webfont.woff2") format("woff2"),
    url("fonts/journal-webfont.woff") format("woff");
    font-weight:normal;
    font-style:normal;
        
}

@font-face 
{
    font-family:"typewriter";
    src:
    url("fonts/momt___-webfont.woff") format("woff2"),
    url("fonts/momt___-webfont.woff") format("woff");
    font-weight:normal;
    font-style:normal;

}

body
{
    font:1.3rem sans-serif;
    padding:0.5em;
    margin:0;
    background:#222;

}

form
{
    position:relative;
    width:740px;
    height:498px;
    margin:0 auto;
    padding:1em;
    box-sizing:border-box;
    background:#fff url(./background.jpg);

    display:grid;
    grid-gap: 20px;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:10em 1em 1em 1em;
}


h1
{
    font:
    1em "typewriter",
    monospace;
    align-self:end;

}

#message 
{
    grid-row:1/5;
}

#from, #reply
{
    display:flex;
}

label
{
    font:
    0.8em "typewriter", 
    sans-serif;  
}

input,
textarea
{
    font:
    1.4em/1.5em "handwriting",
    cursive,
    sans-serif;
    border:none;
    padding:0 10px;
    margin:0;
    width:80%;
    background:none;
}

input:focus,
textarea:focus
{
    background:rgb(0 0 0 /10%);
    border-radius:5px;
}

textarea
{
    display:block;
    padding:10px;
    margin:10px 0 0 -10px;
    width:100%;
    height:90%;

    border-right:1px solid;

    overflow:auto;
}

button
{
    padding:5px;
    font: bold 0.6em sans-serif;
    border:2px solid #333;
    border-radius: 5px;
    background:none;
    cursor:pointer;
    transform: rotate(-1.5deg);
}

button::after
{
    content:">>>";
}

button:hover,
button:focus
{
    background:#000;
    color:#fff;
}