@media (max-width: 960px) {
    main {
        margin: 0 1em;
    }
}

@media (min-width: 830px) {
    .towns {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5em;
        padding: 1em;
    }

    .towns article {
        border: #ffd382 solid 2px;
        box-shadow: 5px 5px 10px #444;
    }
}

@media (max-width: 829px) {
    .towns article {
        margin: 1em 0;
    }
}

@media (min-width: 792px) {
    #storm-form {
        margin: 1em auto;
        width: 85%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        gap: 1em 3em;

    }

    #storm-form .paragraph-text {
        grid-column: 1/3;
        margin: 0 10em;
    }

    .input-label {
        justify-content:space-between;
    }

    .submit-button {
        grid-column: 2/3;
        justify-self: right;
    }
}

@media (max-width: 791px) {
    #storm-form {
        margin: 1em;
        display: block;
        font-size: 1.5em;
    }

    .input-label {
        flex-direction: column;
    }

    #storm-form fieldset {
        margin: 1em auto;
        width: 75%;
    }

    .submit-button {
        margin-left: 10%;
    }
}

@media (min-width: 705px) {
    #summary-float {
        position: absolute;
        max-width: 40%;
        padding: 1em;
        margin: 2em;
        font-size: 0.8em;
    }

    header {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #article-img {
        max-width: 30%;
        max-height: 8em;
        float: right;
        overflow: hidden;
    }

    #forecast-indicators {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gallery {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .gallery figure:hover {
        box-shadow: 0 0 1.5em gray;
    }
    
    /** Sticky navigation
    nav {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    **/
    
}

@media (max-width: 704px) {
    .responsive , .responsive ul{
        display: block !important;
        font-size: 1.2em;
    }

    #main-nav {
        display: none;
    }

    .collapsible {
        display: flex;
        flex-direction: column-reverse;
    }

    .menu {
        display: block;
        font-size: 2em;
        font-weight: bolder;
    }

    body {
        font-size: 0.8em;
    }

    nav ul li{
        margin: 2.5em auto;
    }
    
    /** Sticky navigation
    CSS grid breaks this for some reason
    header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    **/

    header {
        border-bottom: 0.2em solid #00e3ff;
    }

    #article-img {
        max-width: 100%;
    }

    .gallery {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 625px) {    
    #logo img {
        max-height: 75px;
    }    
}

@media (min-width: 561px) {
    #map {
        margin-right: 4em;
    }
}

@media (min-width: 561px) and (max-width: 829px) {
    .towns article {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .towns article div {
        padding: 1rem;
    }

    .towns article:nth-child(even) {
        flex-direction: row-reverse;
    }

    .towns img {
        height: fit-content;
        max-width: 50%;
    }
    
}

@media (max-width: 560px) {
    #slogan {
        font-size: 0.75em;
    }
    
    #logo img {
        max-height: 50px;
    }

    #location-contact {
        flex-direction: column-reverse;
    }
}

@media (max-width: 506px) {
    #logo img {
        width: 58px;
        height: 40px;
    }
}

@media (max-width: 400px) {

    .gallery {
        grid-template-columns: 1fr;
    }
    
}

@media (min-width: 370px) {
    #weekdays, #weekend {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 369px) and (min-width: 225px) {

    #forecast-indicators {
        display: flex;
        align-items: center;
        justify-content: center;
    }

}

@media (max-width: 335px) {
    #slogan {
        font-size: 0.65em;
    }
    
    #logo img{
        max-height: 50px;
    }

    #left-head {
        flex-direction: column;
    }

    #storm-form {
        margin-bottom: 1em;
        font-size: 0.9em;
    }
}

@media (max-width: 264px) {
    #slogan {
        display: none;
    }

    #img-size {
        font-size: 1em;
    }
}