/* This style sheet has the media queries for the learnmore.html
this will mainly adjust the width and placement of the text 
that is on top of the intro image, or the image after the header.
it will also have to make the columns responive deoending on the screen size,
larger devices will see two to four columns in a row and smaller will see one column */

/* ADVOCACY CAMPAIGNS SECTION 
--------------------------------------------------- */
.advocacyCampaigns { 
    padding: 2%;
}
/*  LATEST NEWS 
--------------------------------------------------- */
figcaption a {
    text-decoration: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: blue;
}
figcaption a:hover {
    text-decoration: underline;
    color: rgb(0, 0, 0);
}

/* MEDIA QUERIES 
--------------------------------------------------------------------- */
@media only screen and (max-width: 400px) {
/* CSS for device screens smaller than 400px */
    .mainTitle {
        width: 160px;
        font-size: 110%;
        left: 5%;
        bottom: 150px;
    }
    .subtitle {
        width: 160px;
        font-size: 80%;
        left: 5%;
        bottom: 80px;
    }
/* latest news */
    .row {
        display: flex;
        flex-direction: column;
    }
}
@media only screen and (min-width: 400px) {
    /* CSS for screens of 400px and up. will end when the next media query starts. */
    /* reference - GalaxyS8 Portrait Mode : 412x718 */
    .mainTitle {
        font-size: 160%;
        left: 5%;
        bottom: 50%; /*same position for all screen sizes*/ 
    }
    .subtitle {
        width: 240px;
        font-size: 80%;
        left: 5%;
        bottom: 35%; /*same position for all screen sizes*/ 
    }
    .row { /* latest news */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}
@media only screen and (min-width: 500px) {
    /* CSS for screens of 500px and up. will end when the next media query starts. */
    .mainTitle {
        width: 240px;
        font-size: 170%;
    }
    .subtitle {
        width: 50%;
        font-size: 100%;
        bottom: 28%;
    }
}
@media only screen and (min-width: 600px) {
    /* CSS for screens of 400px and up. will end when the next media query starts. */
    /* Small devices (portrait tablets and large phones, 600px and up) */
    .mainTitle {
        width: 250px;
        padding: 1% ;
        font-size: 175%;
        left: 15%;
    }
    .subtitle {
        width: 250px;
        padding: 0.5% ;
        font-size: 120%;
        left: 15%;
        bottom: 25%;
    }
    .story { /*makes two columns */
        display: flex;
        flex-direction: column;
    }
    .story img {
        max-width: 100%;
        height: auto;
    }
}
@media screen and (min-width: 768px) { 
    /* CSS for screens of 768px and up. will end when the next media query starts. */
    /* Medium devices (landscape tablets, 768px and up) */
    /* for reference - Galaxy S8+ Landscape: 798px X 332px
    Microsoft Surface Portrait: 912px X 1225px */

/* advocacy campaigns */
    .advocacyCampaigns {
        display: flex;
        flex-wrap: wrap;
    }
    .column  { /*one columne becomesa two. puts image and description side by side*/
        width: 40%;
    }
}
@media only screen and (min-width: 992px) {
    /* CSS for screens of 992px and up. will end when the next media query starts. */
    /* Medium devices (landscape tablets, 944px and up .. 
    reference - 912px is portrait for the microsoft surface) */
    .mainTitle {
        width: 280px;
        font-size: 200%;
    }
    .subtitle {
        width: 288px;
        font-size: 130%;
    }
    .tangSection {
        padding: 0px;
    }
    .tangSection h1 {
        padding-left: 5%;
    }
}
@media only screen and (max-width: 1016px) and (min-width: 954px) {
    .row { /* latest news */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(267px, 1fr));
    }
}
@media only screen and (min-width: 1200px) {
    /* CSS for screens of 1200px and up. will end when the next media query starts. */
    /* reference - Microsoft Surface Landscape: 1368px X 769px */
    .mainTitle {
        width: 310px;
        font-size: 220%;
    }
    .subtitle {
        width: 320px;
        font-size: 140%;
    }
}
@media only screen and (min-width: 1400px) {
    /* CSS for screens of 1400px and up. will end when the next media query starts. */
   
}
@media only screen and (min-width: 1500px) {
    /* CSS for screens of 1500px and up. */
    /* Extra large devices (large laptops and desktops, 1500px and up)*/
    /* refernece - ASUS Laptop ROG Zephyrus M15 : 1536x721px  */
   
}