/* GLOBAL STYLES */
html, body {
    font-family: "Roboto", sans-serif;
    color:#222831;
    background-color: #8bd9de;
    /* Below is the code that inserts an emoji of the West Syriac Cross (Unicode
    U+2670) to the background of my webpage. The URL http://www.w3.org/2000/svg in the SVG namespace declaration isn't a
    service they're providing. It's simply an identifier that's used to
    differentiate SVG elements from other types of elements in a document. The
    URL doesn't point to a file or resource that could be deleted, and your
    browser doesn't try to access it like a typical URL. The URL is used purely
    as an identifier and could actually be any string of characters, as long as
    it's unique. The W3C uses URLs for namespaces because they're easy to manage
    and guaranteed to be globally unique. 
    Below, there is a part that says: "fill = 'rgba (0,0,0,0,0.5)',
    the first 3 integers (all zeroes) are the values for 'r', 'g', 'b', (red,
    green, blue). The 5th value is the value for 'a', which seems to determine
    how dark the mini-crosses in the background will be. Previously, this number
    was set at 0.7, but I just put the 'Donate' text in now and I had to reduce
    this value to 0.5 because I felt the background crosses were dark enough to
    make the "Donate" text (which is smaller than all of the rest of the text) a
    bit difficult to read. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75' viewBox='0 0 100 100'%3E%3Ctext fill='rgba(0,0,0,0.05)' y='70' font-size='75'%3E%E2%99%B0%3C/text%3E%3C/svg%3E");
    background-repeat: repeat;
    padding: 0px; }

/******************************************************************************/

/* STYLING FOR NAVIGATION BAR (AKA: WEBSITE HEADER) */
nav {
    background-color: #222831;
    color: #fff;       /* Font color in the header bar. */
    padding-left: 20px;  /* Moves the text 20px away from left.*/
    line-height: 3.75em;
    align-content: center; }

/******************************************************************************/

/* ID SELECTORS */
/* Id selectors have the highest specificity in HTML, i.e., their rules override
any contradicting rules. */

#form-header {
    color: #222831;
    font-size: clamp(11px, 3vw, 27.5px); /* Adjust as needed */
    margin-left: 60px;
}

/* General text styling rules for the input form. */
#myForm {
    font-weight: 750px;
    font-size: 22px;
    color: white;
    /* Chosen background color -- to form high contast with text. */
    background-color: #222831;
    /* General positioning styling rules for the input form. */
    margin-left: 60px;
    margin-bottom: 7px;
    padding: 20px;
    /* Detailing. */
    border: 2px solid black;
    /* Size of rectangle encompassing input form questions. */
    width: 570px;
}

/* Common styling to all input parameters. */
#paragraphs,
#infusion,
#infusion-rate,
#citation {
    width: 50px;
    height: 30px;
    /* Aligns top/bottom of input box with top/bottom of words on left of it. */
    vertical-align: middle;  
    margin-left: 7px;
    margin-bottom: 16px;
    font-size: 22px;
}

/* Style the "infusion" type input of the generator's form. */
#infusion {
    width: 315px;
}

/* Style the "infusion-style" input of the generator's body. */
#infusion-rate,
#citation {
    width: 60px;
}


/* Style the "generate" button. It's located outside form's rectangle. */
#generateButton {
    /* General text styling rules for the input form BUTTON: */
    font-size: 23px;
    color: #800000;
    text-align: center;
    text-decoration: none;
    /* Background color rules: */
    background-color: #8bd9de;
    /* Button detailing: */
    border: none;
    /* Location and sizing rules for the text and button: */
    padding: 7px 24px;
    display: inline-block;
    margin-top: 10px;
    margin: 8px 2px;
    /* Cursor transformation when hovering over button: none: */
    cursor: pointer;
}

/******************************************************************************/

/***** CLASS SELECTORS -- WHICH CREATE A CSS FLEXBOX *****/
/* The below code styles each article + image combo as a CSS Flexbox.
 * From GPT-4: "This will create a two-column layout with the image and text
 * side by side. When the browser window is resized, both the image and text
 * will shrink proportionally." */

 /* HIGHEST LEVEL -- APPLIES TO ENTIRE ARTICLE (BOTH TEXT + IMAGE) */
 /* MOST GENERAL -- HENCE, LOWEST SPECIFICITY (LOWEST PRIORITY) */
.article {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    vertical-align: middle;
    padding: 0px;
    /*
    height: 600px;
    width: 1500px;
    */
}

/* ONE-LEVEL MORE ZOOMED IN -- APPLIES TO ALL ARTICLE IMAGES
 * (I.E. BOTH LHS IMAGES AND RHS IMAGES)
 * AND ALL ARTICLE TEXT
 * (I.E. BOTH LHS TEXT AND RHS TEXT) */
.article-image, .article-text {
    flex: 1 1 50%; /* adjust as needed */
}

/* Note that we've added "img" to the name to the class selector here, that
makes big difference */ 
.article-image img {
    /*
    height: 500px;
    width: 500px;
    */
    
    max-width: 75%;
    max-height: 75%;
    
    object-fit: cover; /* resize and crop the image as necessary to cover both the height and width of its box */
    padding-right: 0px;
    padding-left: 0px;
    padding-top: 30px;
    padding-bottom: 30px;

}

.article-text {
    /* To achieve a responsive font, I am using viewport width (vw) units.
     * 3 vw = a width of 3% of the viewport width;
     * but if the viewport gets too small, or too large, we want to limit how
     * much flex there is for the font size, hence, I have used the clamp()
     * function, and set the font size to 3vw, with a minimum size of 12px,
     * and a max possible size of 27.5px.
     * As some garbage browsers may not have the ability to interpret vw units,
     * I have added a font-size rule of 16px. Note that if two items have equal
     * weighting (i.e. both of the font-size attributes listed below), the code
     * to be read last is the styling rule that will be applied.
     * Hence, the order of these two font-size instructions. */
    /*font-size: 16px;*/ /* Fallback for older browsers ... hmm, I find that it
    keeps the font size too big for my browser when I make the browser page small, because the font size is kept big, it becomes a long column of text that goes off the page ... it seems that 12px clamp is being overridden, because commenting this out does remove this effect. */
    font-size: clamp(11px, 3vw, 27.5px); /* Adjust as needed */
    color: #222831; /* font color */

    justify-content: left;  /* horizontally aligns the text along left margin */
    flex-direction: column; /* ensures that the text is centered vertically even if there are multiple paragraphs or other elements; if there is only one paragraph of text, though, this rule is not needed. */ 
}

/* And this code makes the image and text stack vertically on screens smaller
than 600 px, so smart phone screens. */
@media (max-width: 600px) {
    .article-image, .article-text {
        flex-basis: 100%;
    }
}

/***** ARTICLES THAT HAVE THEIR TEXT ON THE LEFT, IMAGE ON THE RIGHT. *****/

/* Note that for now, I have made the gap between LHS text container,
 * and the RHS image container, 10px + 10px = 20px for now. */
.article-text-left {
    /* I wanted to put this in the body styling rules at the top,
     * but I don't want the navigation bar to also start 60px from the left,
     * I was hoping that if I put this in the body styling rules at the top of
     * this page, then I could overide it for the nav bar by specifying the
     * margin inside the nav bar styling rules to be 0px (I thought that's the
     * way cascading style sheets worked, that the more specific rule would
     * override the more generalised/higher level styling rule ... but it
     * doesn't override it, the nav bar is still shift 60px from the LHS.
     * Hence, I need to specify this rule here. */
    margin-left: 60px; /* Start 60px in from LHS of screen. */
    margin-right: 15px; /* End 10px before image container starts. */
    
}
.article-image-right {
    margin-left: 15px; /* Start 10px in from text container. */
    margin-right: 60px; /* End 60px out from RHS of screen. */
}

/***** ARTICLES THAT HAVE THEIR TEXT ON THE RIGHT, IMAGE ON THE LEFT. *****/
.article-image-left {
    margin-left: 60px; /* Start 60px in from LHS of screen. */
    margin-right: 15px; /* End 10px before image container starts. */
}
.article-text-right {
    margin-left: 15px; /* Start 10px in from text container. */
    margin-right: 60px; /* End 60px out from RHS of screen. */
}

/**** CLASS SELECTORS *****/
/**** Articles before generator *****/
.article-text-only {
    margin-left: 60px;
    margin-right: 60px;
    p {
        margin: 0em;
    }
}


.donation-text {
    margin-left: 60px;
    margin-right: 60px;
    align-items: center;
    justify-content: center;  /* horizontally aligns the text in the center. */
}

/******************************************************************************/

/* IPSUM GENERATOR HEADER, AND PRIVACY SHEET HEADER
/* Styling their headers/titles. */
.article-privacy-header { /* Note that the form header is located outside the rectangle. */
    margin-left: 60px;
}

.article-privacy-header {
    color: #042d6a;
}

/* Styling the paragraph/body text of said articles. */
.article-privacy-body {
    /* commented out to test the CSS Flexbox code above. 
    font-weight: 1000px;
    font-size: 27.5px;  */
    color: #222831;
    background-color: #8bd9de; 
    margin-left: 65px;
   /* margin-right: 50px; */
   margin-bottom: 25px;
}

.article-privacy-body {
    font-size: 1.2em;
}

/******************************************************************************/

/* CLASS SELECTORS (Cont.) */

/* Makes font color of the specified text a dark maroon color. */
.highlight {
    color: #800000;
}
/* Makes font color of the specified text a grey blue color. */
.highlight2 {
    color: #042d6a;
}

/******************************************************************************/

/* TYPE SELECTORS */
h1 {
    font-size: 2.50em; /* 'em' is a scalable unit used in webdev 1.5x current */
    margin-bottom: 0.75em; /* reduces space between the header and body text.*/
}

h2 {
    font-size: 1.25em; 
    margin-top: 0em;
    margin-bottom: 0em; /* reduces space between header and body text.*/
}

h3 {
    font-size: 1.5em;
    margin-bottom: 0.25em;
}

p {
    margin: 0.25em;
}
/******************************************************************************/


/* Style the footer */
footer {
    /* Putting in a background-color prevents the translucent cross emoji, which
    is necessary to improve reading ability (accessibility). */
    background-color: #8bd9de;
    margin-bottom: 25px;
    font-size: 16px;
    text-align: center;
  }

/* Style the Privacy Policy link that is located within the footer section. */
footer a {
    color: black;        /* Change the link color to black */
    text-decoration: none; /* Remove the underline */
}
  
footer a:hover {
    color: gray;  /* Change the link color to gray when the mouse is over it */
}
  
/* Style the privacy link */
#privacy {
    font-size: 18px;
    text-align: center;
}