/* VARIABLES */

:root {

    --mobileMargin: 10%;

    --tabletMargin: 5%;

    --desktopMargin: 2%;

}

#highFidelityPrototypeLink1, #highFidelityPrototypeLink2, #highFidelityPrototypeLink3 {
    
    text-align: center;

    margin: 1% auto;

}


#highFidelityPrototypeLink1 a, #highFidelityPrototypeLink2 a, #highFidelityPrototypeLink3 a {

    font-size: 1em;

}

/*** START OF MEDIA QUERIES ***/

@media screen and (min-width: 20em) {

    h1 {

        width: 90%;

        margin: 0 auto;

    }

    h3 {

        margin-top: var(--mobileMargin);

    }

    .competitiveResearch {

        width: 85%;

        margin: 10% auto 0 auto;

        text-align: center;
     
    }

    .competitiveResearch img {

        margin-top: 10%;

    }

    .competitiveResearch p {

        text-align: left;

        margin-top: var(--mobileMargin);

    }

    #location {

        width: 90%;

        text-align: center;

        margin: 10% 0 0 0;        
       
    }  
   
}

/* 540 */

@media screen and (min-width: 30em) {

    .competitiveResearch {

        width: 85%;
             
    }

    .competitiveResearch p {

        text-align: left;

        margin-top: var(--tabletMargin);

    }

    .usabilityStudyOverview p {

        width: 90%;

        text-align: center;

        margin: 10% 0 0 0;     

    }

    .rowColumn {

        margin-bottom: var(--mobileMargin);

    }

}

/* 1280 */ 

/*** LAYOUT CHANGE ***/

@media screen and (min-width: 48em) {

    .usabilityStudy {

        margin-top: var(--mobileMargin);

    }
    
    .usabilityStudyOverview {

        display: flex;

        flex-direction: column;
       
        margin: 10% 0 0 0;

    }

    .usabilityStudyTopRow, .usabilityStudyBottomRow {

        display: flex;

        flex-direction: row; 

        width: 80%;
        
        margin: 0 auto; 
      
    }

    .rowColumn{

        width: 50%;  

        text-align: center;
          
    }
     
}

/* 1920 */

@media screen and (min-width: 120em) {

    
    #highFidelityPrototypeLink1 a, #highFidelityPrototypeLink2 a, #highFidelityPrototypeLink3 a {

        font-size: 1.25em;

    }
    
}