/*=====
   styles for 328lab14.php

   by: Sharon Tuttle
   last modified: 2025-05-01
=====*/

/*-- give a bit of a left, right margin to body --*/

body
{
    margin-left: 0.5em;
    margin-right: 0.5em;
}

/*--
    have fieldset use grid layout,
    center (and so also center the form), and also try to reduce
    its bottom padding
--*/

fieldset
{
    display: grid;
    grid-template-columns: 45% auto;
    grid-template-areas: ". ."
                         ". ."
                         "sub_button sub_button";

    background-color: #ffffcc;

    width: 25em;
    margin-left: auto;
    margin-right: auto;

    padding-bottom: 0.3em;
}

/*--
   we'd like a litle spacing at the bottom
   of our input elements (OUTSIDE their borders,
   between them and other elements)
--*/

input
{
    margin-bottom: 0.5em;
}

/*--
   I think there's TOO much space under each submit
   button, though (remember: the fieldset may have
   some padding-bottom...) -- and I think it needs
   a little more top-margin...?
--*/

.sub_button
{
    margin-top: 0.3em;
    margin-bottom: 0;
    grid-area: sub_button;
}

/*--
    to center submit buttons with help of a div
    (since div is a block element, but input is not)
--*/

.sub_button
{
    display: flex;
    justify-content: center;
}

/*-- want to make any "error" text stand out visually --*/

#errors
{
    color: red;
    font-size: 120%;
}