/* tablet */
@media (max-width: 768px) {
    .rij {
        flex-direction: column;
    }

    p {
        font-size: 1rem;
    }

    .kaart {
        width: 100%;
        max-width: 300px;
    }
    .viewport::after {
        content: "tablet";
    }
}
/* telefoon */
@media (max-width: 480px){
    .viewport::after {
        content: "telefoon";
    }



}

.viewport::after {
    content: "laptop";
}

    img {
        width: 400px;
        height: 260px;
    }

    body {
        background-color: antiquewhite;
        color: lightsalmon;
    }

    h1 {
        color: lightsalmon;
        text-align: center;
        font-family: "PT Serif", ui-serif;
        border: 3px solid lightsalmon;

    }

    h2 {
        font-family: "American Typewriter", ui-serif;
    }

    p {
        font-family: cursive;
        font-size: 20px;
        display: inline;
    }

    #me {
        margin-left: 800px;
        margin-top: -300px;
        border: 3px dashed lightsalmon;
    }

    #gif {
        padding-top: 8rem;
        padding-left: 26rem;
    }

    #indexfont {
        padding-left: 36rem;
        font-size: xx-large;

    }

    hr {
        color: lightsalmon;
    }

    .border {
        border: 2px solid salmon;
        display: inline;
    }

    a {
        color: lightsalmon;
    }

    a:hover {
        color: crimson;
    }

    a:active {
        color: beige;
    }

    .link {
        color: indianred;
    }

    .link:hover {
        color: darkorange;
    }

    .firstpart {
        margin-left: 1rem;
    }

    .painting {
        display: flex;
        flex-wrap: wrap;
        border: solid 3px black;
        width: 55vh;
        height: 50vh;
        justify-content: flex-start;

    }

    .row {
        display: flex;
        width: 100%;
    }

    .box {
        flex: 1;
        border: solid 2px black;
    }

    .fifth {
        flex: 0 0 40%;
    }

    .eight {
        flex: 0 0 50%
    }

    .stack {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        flex: 0 0 40%;

    }

    .stack .row {
        flex: 1;

    }

    .red {
        background-color: red;
    }

    .blue {
        background-color: blue;
    }

    .white {
        background-color: white;
    }

    .yellow {
        background-color: yellow;
    }

    * {
        box-sizing: border-box;
    }
    .form_base {
        display: flex;
        background-color: white;
        flex-wrap: wrap;
        width:27vw;
        height: 80vh;
        justify-content: center;
    }
    fieldset {
        display: flex;
        border: black solid 2px;
    }
    form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 25vw;

    }
    .form_text {
        font-family: Arial;
        align-self: center;
        font-size: x-large;
    }