/* 1: global stylings
/* 2: Standard grid layout for all pages of site 
/* 3: Standard heading on all pages
/* 4: footer
/* 5: scroll bars
/* 6: responsive layout 

/* ****************** */
/* 1: global styling  */
/* ****************** */
:root {
    --sitedark: 1, 22, 30;
    --sitealtdark: 10, 20, 30;
    --sitetablehead: 70, 90, 100;
    --siteblankline: 50, 48, 47;
    --siteblue: 16, 131, 254;
    --siteselect: 9, 61, 82;
    --sitecream: 247, 245, 185;
    --sitewhite: 255, 255, 255;
    --siteblack: 0, 0, 0;
    --sitered: 227, 18, 11;
    --siteteal: 0,128,128;
    --sitegold: 184, 134, 11;
    --sitebrightgold: 255, 204, 0;
    --siteyellow: 238, 230, 0;

    --fs-heading:    clamp(1.50rem, 4.5dvw + 0.5rem, 3.5rem);
    --fs-subheading: clamp(0.75rem, 1dvw, 1.2rem);
    --fs-large:      clamp(1rem, 2dvw + 0.5rem, 2.4rem);
    --fs-medium:     clamp(0.6rem, 0.5rem + 0.5dvw, 1.2rem);
}
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
    position: relative;
}
body{
    color: rgba(var(--sitecream), 1);
    font-family: 'myFont', 'Times New Roman', Times, serif;
    background-attachment: fixed;
    background-size: cover;
    position: relative;
    text-overflow: ellipsis;
    font-size: clamp(1rem, 1rem + 0.5dvw, 2rem);
    height: 100dvh;
    width: 100dvw;
}
body.men { background-image: url(../images/Scarborough_background.jpg); }
body.women { background-image: url(../images/York_background.jpg); }
html, body {
    width: 100dvw;
    overflow-x: clip;
    overflow-y: hidden;
}
#page_as_grid { background-color: rgba(var(--sitedark), 0.4); }
input { font: inherit;}
input::placeholder {
    font-family: myFont;
    color: rgba(var(--sitedark));
}

/* ********************************************** */
/* 2: Standard grid layout for all pages of site  */
/* ********************************************** */
#page_as_grid {
    width: 100dvw;
    height: 100dvh;
    display: grid;
    grid-template-rows: 4dvh 96dvh;
    grid-gap: 0;
}
#nav_wrapper     { grid-row: 1 / 2; }
#display_wrapper { grid-row: 2 / 3; }
#doorstop {
    margin-top: 0.5rem;
}

/* ******************************** */
/* 3: Standard heading on all pages */
/* ******************************** */
#heading_wrapper { 
    display: flex;
    align-items: center;
    text-shadow: 2px 2px 4px rgba(var(--siteblack), 1);
    background: rgba(var(--sitedark), 0.4); 
}
#heading_text::before {
    position: relative;
    content: "";
    border-width: 0 0 0 0.2rem; /* top right bottom left */
    border-color: rgba(var(--sitegold), 1);
    border-style: solid;
    right: 0.5dvw;
}
#heading_text {
    padding-top: 2.5%;
    padding-left: 5%;
    font-size: var(--fs-heading);
    color: rgba(var(--sitewhite));
    font-size: clamp(0.84rem, 2.5dvw + 0.35rem, 3.5rem);
    text-indent: -1em;
}

/* ********** */
/* 4: footer  */
/* ********** */
#footer_text {
    background-color: rgba(var(--sitedark));
    display: flex;
    align-items: center; 
    justify-content: space-between; 
    height: 100%;
}
#footer_contact   { 
    font-size: 0.9rem;
    padding-left: 2dvw; 
}
#footer_copyright { 
    font-size: 0.6rem;
    padding-right: 2dvw; 
}

/* *************** */
/* 5: scroll bars  */
/* *************** */
::-webkit-scrollbar{
  width: 10px;
  background: rgba(var(--sitedark), 0.4);
}
::-webkit-scrollbar-thumb {
  background: rgba(var(--sitedark), 0.7);
  border: 1.5px solid rgba(var(--sitecream), 1);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--sitedark), 1); }

/* ************************ */
/* 6: responsive layout     */
/* ************************ */
/*
@media (min-width: 800px) and (max-width: 1400px) {
    #heading_text    { padding: 2.5% 0% 0% 8%; } 
    #heading_tagline { padding-left: 10%; }
}
*/
@media (max-width: 800px) {
    #page_as_grid { grid-template-rows: 6dvh 94dvh; }
    #heading_text {
        padding-top: 5%;
        padding-left: 10%;
    }
    #footer_text{ line-height: 1.5rem;}
    #footer_contact,
    #footer_copyright {
        font-size: 0.4rem;
    }
}
@media (max-width: 400px) {
    #heading_text { font-size: 1.0rem; }
}