@font-face {
    font-family: 'NewYork';
    src: url('fonts/NewYork.eot');
    src: url('fonts/NewYork.eot') format('embedded-opentype'),
    url('fonts/NewYork.woff2') format('woff2'),
    url('fonts/NewYork.woff') format('woff'),
    url('fonts/NewYork.ttf') format('truetype'),
    url('fonts/NewYork.svg#NewYork') format('svg');
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: 'NewYork', sans-serif;
    background: #f9f9f9;
    color: #111;
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 1rem;
}

#pwrimg {
width: 100%;
max-width: 768px;
height: auto;
margin: 0.5rem 1rem;
border-radius: 8px;
}

#quotebox {
font-style: italic;
margin: 0.5rem 1rem;
text-align: center;
}

#messageform {
display: flex;
width: 90%;
max-width: 500px;
margin: 0.5rem 0;
}

#messageinput {
flex: 1;
padding: 0.5rem;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
}

#formbutton {
padding: 0.5rem 1rem;
font-size: 1rem;
border: 1px solid #0077cc;
background: #0077cc;
color: #fff;
cursor: pointer;
border-radius: 0 4px 4px 0;
}

#responseoutput {
width: 90%;
max-width: 500px;
margin-top: 1rem;
padding: 0.5rem;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 4px;
}

#mindwiper {
margin-top: 1rem;
padding-bottom: 0.3rem;   /* space below the text */
background: none;
border: none;
color: #555;
text-decoration: underline;
font-size: 1rem;
cursor: pointer;
}

@media (max-width: 480px) {
    #messageform {
    flex-direction: column;
    }
    #messageinput,
    #formbutton {
    border-radius: 4px;
    width: 100%;
    margin: 0.25rem 0;
    }
}