@media screen and (max-width: 500px) {
    body {
        font-family: Tahoma, sans-serif;
        margin: 0;
        padding: 0;
        background: rgb(255, 255, 255);
        color: rgb(120, 120, 120);
        display: grid;
        grid-template-areas:
            "header"
            "main"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr 40px;
        min-height: 100vh;
        font-size: 0.8em;
    }

    h1 {
        font-size: 1.2em;
        color: rgb(255, 127, 39);
        margin: 5px 0px 5px 0px;
    }

    h2 {
        font-size: 1.2em;
        color: rgb(255, 127, 39);
        /*color: rgb(0, 103, 184);*/
        margin: 5px 0px 5px 0px;
    }

    header {
        width: 100%;
        grid-area: header;
        background-image: url('../img/logo-long2.jpg');
        background-position-y: center;
        background-repeat: no-repeat;
        background-position-x: 50px;
    }

    menu {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: right;
    }

        menu div a {
            margin: 0px 5px 0px 5px;
            vertical-align: middle;
            color: rgb(120, 120, 120);
            text-decoration: none;
        }

            menu div a:hover {
                color: rgb(120, 120, 120);
                text-decoration: underline;
            }

            menu div a:visited {
                color: rgb(120, 120, 120);
            }


    main {
        grid-area: main;
        background: rgb(245, 245, 250);
    }

    section {
    }

    footer {
        grid-area: footer;
        background-color: rgb(255, 255, 255);
        color: rgb(170, 170, 170);
        text-align: center;
        font-size: 0.6em;
        display: flex;
        justify-content: center;
    }

    #home {
        display: flex;
        flex-direction: column;
    }

        #home .image {
            background-image: url('../img/home.webp');
            background-size: cover;
            height: 400px;
        }

        #home .text {
            text-align: center;
        }

    #services {
    }

        #services .content {
            display: flex;
            flex-direction: column;
        }

        #services span {
            padding: 0px;
            margin: 5px 0px 5px 0px;
            font-weight: bold;
            /*color: rgb(255, 127, 39);*/
        }


        #services div.innovation .image {
            background-image: url('../img/innovation.png');
            background-size: 50px 50px;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 75px;
        }

        #services div.architecture .image {
            background-image: url('../img/architecture.png');
            background-size: 50px 50px;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 75px;
        }

        #services div.software .image {
            background-image: url('../img/software.png');
            background-size: 50px 50px;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 75px;
        }

        #services div.coaching .image {
            background-image: url('../img/coaching.png');
            background-size: 50px 50px;
            background-repeat: no-repeat;
            background-position: center;
            width: 100%;
            height: 75px;
        }

    #about-me {
        display: flex;
        flex-direction: column;
        margin: 10px 0 10px 0;
    }

        #about-me .profile {
            background-color: rgb(220, 220, 220);
            height: 275px;
            border-radius: 10px;
        }

            #about-me .profile .image {
                background-image: url('../img/profile.jpg');
                background-size: cover;
                height: 200px;
                width: 200px;
                border-radius: 50%;
                margin: 10px auto;
            }

        #about-me .text {
            padding-right: 20px;
        }

    #language {
        display: flex;
        flex-direction: row-reverse;
    }

        #language .image {
            background-image: url('../img/countries.jpg');
            background-size: cover;
            height: 400px;
            border-radius: 10px;
        }

        #language .text {
            width: 100%;
            padding-top: 200px;
        }

    .language-selection {
        background-image: url('../img/globe.webp');
        background-size: 13px 13px;
        background-repeat: no-repeat;
    }


        .language-selection a {
            color: rgb(120, 120, 120);
            text-decoration: none;
        }

            .language-selection a:hover {
                color: rgb(120, 120, 120);
                text-decoration: underline;
            }

            .language-selection a:visited {
                color: rgb(120, 120, 120);
            }
}