/*
    Student Name: David Adigun
    File Name: styles.css
    Date: 04/14/2025
*/

/* Begin Mobile Styles */

/* Show mobile class, hide tablet-desktop class and menu-links id */
.mobile {
    display: block;
}

.tablet-desktop {
    display: none;
}

/* Style rules for hero image and header */


/* Style rule for Nutrition hero text */
#nutr.display-1 {
    font-size: 4em;
}

/* Style rule for map */
.map {
    border: 2px solid #000;
    width: 95%;
    height: 50%;
}

/* Style rule for labels */
label {
    display: block;
    padding-top: 3%;
}

/* Media Query for Tablet Viewport */
@media (min-width: 768px) {
    
     /* Tablet Viewport: Show tablet-desktop class, hide mobile class */
     .tablet-desktop {
         display: block;
     }
     
     .mobile {
         display: none;
     }
     
     /* Tablet Viewport: Nutrition hero text */
     #nutr.display-1 {
         font-size: 6em;
     }
     
     /* Tablet Viewport: Style rule for map */
     .map {
         width: 600px;
         height: 450px;
     }
     
     /* Tablet Viewport: Style rule for form element */
     form {
         width: 80%;
         margin: 0 auto;
     }
     
}

/* Media Query for Desktop Viewport */
@media (min-width: 992px) {
    
    /* Desktop Viewport: Style rules for form */
    form {
        width: auto;
        margin-bottom: 2%;
    }
    
    .form-grid {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 20px;
    }
    
    .btn {
        grid-column: 1 / span 3;
    }
    
}