/* MEDIA QUERIES */ /* MEDIA QUERIES */ /* MEDIA QUERIES */ /* MEDIA QUERIES */ /* MEDIA QUERIES */ /* MEDIA QUERIES */ 

/* SM: portrait phones, less than 576.98px */
@media (max-width: 575.98px) {

    /* PHOTO SECTION */

    #toggleButton {
        grid-row: 5 / 7;
        grid-column: 4 / 9;
        font-size: var(---fs-xl);
        border: 2px dashed;
        padding: 5px 10px; margin: 5px;
    }

    .nijntje-photo {
        grid-row: 1 / 5;
        grid-column: 1 / 11;
        padding: 10px 20px 0 0;
    }

    h2 {
        grid-row: 4 / 6;
        grid-column: 3 / 6;
    }

    #photobook-container {
        grid-row: 6 / 11;
        grid-column: 1 / 11;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    
    /* MESSAGEBOARD SECTION */

    .messageboard h1 {
        font-size: clamp(3rem, 4vw, 4rem);
        text-align: right;
    }

    .messageboard .toggleMessageForm {
        grid-row: 10 / -1;
        grid-column: 3 / 9;
        border: 2px dashed;
        margin: 20px 0; padding: 0;
    }

    #message-form .message-form-x {
        border: 2px dashed;
    }

    #message-form .message-form-post {
        border: 2px dashed;
    }

    #message-form textarea::placeholder {
        padding-top: 12vh;
    }

    #message-container {
        grid-row: 4 / 10;
        grid-column: 1 / -1;
        margin-left: 20px;
    }

    #message-list {
        width: calc(100% - 30px);
        height: auto;
        margin: 15px;
        box-sizing: border-box;
    }

    .message-item {
        font-size: 1rem;
    }

    /* OVER NIJNTJE SECTIE */

    .about-content {
        font-size: var(---fs-large);
    }

    .about-content #overNijntje {
        border: 2px dashed var(---white);
    }

    /* CONTACT SECTIE */

    .contact-section textarea::placeholder {
        font-size: var(---fs-xxl);
        padding-top: 5vh;
    }

    .contact-section input {
        grid-row: 6 / 7;
        grid-column: 2 / 10;
        margin: 10px;
    }

    .contact-section textarea {
        grid-row: 7 / 9;
        grid-column: 2 / 10;
        margin: 10px;
    }

    .contact-section button {
        grid-row: 9 / 10;
        grid-column: 4 / 8;
        border: 2px dashed;
        margin: 20px 0px; padding: 0;
    }

    .contact-section p {
        
        grid-row: 2 / 4;
            grid-column: 2 / 10;
    }
}

/* MD: landscape phones, greater then 575.99 and less than 767.98px */
@media screen and (min-width: 575.99px) and (max-width: 767.98px) {

}

/* LG: tablets, greater then 767.99 and less than 991.98px */
@media screen and (min-width: 767.99px) and (max-width: 991.98px) {
   
}

/* XL: desktops, greater then 991.99 and less than 1199.98px */
@media screen and (min-width: 991.99px) and (max-width: 1199.98px) {

}

/* XXL: large desktops, greater than 1199.99px */
@media screen and (min-width:1199.99) {

}
/* MOBILE LANDSCAPE: mobile phones, less then 1000px and in landscape orientation */
@media only screen and (max-width: 1000px) and (orientation: landscape) {

}

/* IPHONE SE: very small smartphones, less than 378px */
@media screen and (max-width:378px) {

}