/*  Styles for douglas.html */
/*  Author: D. G. Adams */
/*  Date: 2026-June-03 */

body {
    display:flex; flex-direction: column; justify-content: center;

    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;                  /* important so margin auto works */
    min-width: 100vw;
    margin: 0;                          /* no margin or padding */
    row-gap: 2vh;                       /* space between header, main, footer */
    color: seashell;                    /* a nice yellow-white for text */
    position: relative;
}
body::before {
/*  Create a background image using a gradient 
    This is much faster than downloading a file 
    and solves the white flash on reload issue */
    background-image:   radial-gradient(farthest-corner at 80% 80%,
                        #004800  0%, #002040 40%,
                        #001000 60%, #003000 99%); 
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

header {
    display:flex; flex-direction:row; justify-content:left;

    font-size: 1.4rem;          
    padding-top:3vh; 
    padding-left: 3vw;
    align-items: center; 
    gap: 0.5vw;

    & > img {                   /* icon img */
    width: 2em;                 /* sized use em,  */    
    hight: 2em; 
    margin-top: -0.15em;        /* icon is off center, so nudge it up a bit */
    }
}

main {
    display:flex; flex-direction: row; justify-content: left;

    & figcaption {text-align:center;}
        
    & ul {                      /* styles for all ul in main */
        margin: 0; 
        padding: 0; 
        text-align: left; 
        list-style-type: none;    
    } 
    & > .top-list {             /* topmost ul in main */
        display:inline-flex;    /* let flexbox handle layout */
        align-items: top;       /* line list up to top of parent */
        justify-content: left;  /* list is centered in parent*/
        column-gap: 5vw;        /* space between columns*/
        row-gap: 1vh;
        column-count: 4;        /* four columns*/
        width: 100%;            /* takes full width of parent (main) */
    }       
    & .new-column {             /* style to force li to new column  */
        break-before: column;
    }
    & .no-link {
        font-size: 0.9rem;
        display: inline-flex;   /* let flex handle alignment */
        align-items: center;    /* vertically center children */
        justify-content: left;  /* left justify children */
        column-gap: 0.5vw;      /* space between icon and text */
        padding: 1vh 1vw;
        margin: 1vh 0;
        width: 70%;
        border-radius: 7px;
        color: seashell;
        background-color: #80708060;
        text-align: left;
        text-decoration: none;
    }      
}

.btn {                    /* make link appear as a button with icon */
    font-size: 0.9rem;
    display: inline-flex;   /* let flex handle alignment */
    align-items: center;    /* vertically center children */
    justify-content: left;  /* left justify children */
    column-gap: 0.5vw;      /* space between icon and text */
    padding: 1vh 1vw;       /* space inside button */
    margin: 1vh 0;          /* space around button */
    width:70%;              /* button fills parent width */
    border-radius: 7px;
    color: seashell;
    background-color: #80808060;
    text-align: left;
    text-decoration: none;
    transition: all 0.1s;   /* Smooth color change on hover */

    box-shadow: 4px 4px 0 #000000e0;
    position: relative;

    & > img {
        width: 1.4em; 
        height: 1.4em;
    }
    &:hover {
        background-color: #808080b0;
    }
    &:active {
        transform: translate(2px, 2px);
        box-shadow: 2px 2px 0 #000000e0;            
    }
}

footer {
    display:flex; flex-direction:row; justify-content:center;

    margin: auto 2vw 1vh 2vw;
    & > address {
        display: inline;          /* don't show email address */
    }
    & .email {
        color: cyan; 
        text-decoration: none;
    }
    & .page-tag {               /* page tag in lower right corner */
        font-size: 0.7rem;
        margin-left: auto;
        align-self: flex-end;
    }
    & .btn {
        margin: 0;
        width: 8vw;
        text-align: center;
    }
}