/* This style sheet has the media queries for the petition.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 adjust the placement for the top button and position the bottom one in the center. */

#petitionDescription {
    background-color: rgba(226, 229, 38, 0.48);
    margin: 0 0 0% 0;
    padding: 5% 0;
}

/* MEDIA QUERIES 
-----------------------------------------------------*/
@media only screen and (max-width: 400px) {
/* CSS for device screens smaller than 400px */
    .mainTitle {
        width: 100%;
        font-size: 110%;
        left: 20%;
        bottom: 150px;
    }
    .subtitle {
        left: 20%;
        bottom: 120px;
    }
    button { 
        width: 23%; 
        margin: 0 40%; /* This centers the buttons*/ 
        background-color: #ffc800;
        font-size: 14px;
    }
    .topButton {
        position: absolute;
        text-decoration: none;
        width: 19%;
        left: 0%; 
        bottom: 80px;
    }
}
@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 {
        width: 100%;
        font-size: 120%;
        left: 20%;
        bottom: 150px;
    }
    .subtitle {
        width: 100%;
        left: 20%;
        bottom: 120px;
        font-size: 100%;
    }
    button { 
        margin: 0 40%; /* This centers the buttons*/ 
        background-color: #ffc800;
        width: 20%; 
        font-size: 15px;
    }
    .topButton {
        position: absolute;
        text-decoration: none;
        width: 19%;
        left: 0%; /*moves button 30% from the center*/
        bottom: 80px;
    }
}
@media only screen and (min-width: 500px) {
    /* CSS for screens of 500px and up. will end when the next media query starts. */
    .mainTitle {
        width: 250px;
    }
    .subtitle {
        width: 150px;
        bottom: 40%;
    }
    button { 
        margin: 0 37%; /* This centers the buttons*/ 
        width: 25%; 
        font-size: 15px;
    }
    .topButton {
        width: 75px;
        left: 5%;
    }
}
@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 {
        font-size: 125%;
    }
    .topButton {
        width: 100px; /*width adjustment for screensize*/
        height: 10%;
        padding: 0%;
        left: -25px;
    }
}
@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 */
    .mainTitle {
        width: 360px;
        padding: 10px 0;
        font-size: 180%;
    }
    .subtitle{ 
        width: 25%;
    }
    button {
        font-size: 17px;
        margin: 0 40%; /* This centers the buttons*/ 
        width: 17%;
    }
    /* both buttons dont have to same width with one rule set so gave them individual
    rules to keep similar width sizes */
    .topButton {
        left: -50px;
    }
}
@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 {
        font-size: 180%;
    }
    .subtitle {
        width: 20%;
    }
    button {
        width: 14%;
    }
}
@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 {
        font-size: 200%;
        width: 400px; 
    }
    .subtitle {
        width: 17%;
    }
    button {
        width: 12%;
        height: 50px;
        padding: 0%;
    }
}
@media only screen and (min-width: 1400px) {
    /* CSS for screens of 1400px and up. will end when the next media query starts. */
    .subtitle {
        width: 15%;
    }
    button {
        width: 11%;
    }
}
@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  */
    .subtitle {
        width: 13%; 
    }
}