/* desktop*/

        * {margin: 0;padding: 0;border: 0;box-sizing:border-box;}

        body {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            color: #234;
            background-color: #FFF;
        }
        h1 {
            position: absolute; top: 135px; right: 20px;
            font-weight: normal;
            font-size: 1em;
         }
         nav {
            display: flex;
            flex-flow: row wrap;
            justify-content: space-evenly;
            padding-top: 8px;
            margin-left: 8px;
            margin-right: 8px;
            gap: 12px;
        }
        nav > a {
            background-color: rgb(236, 236, 226);
            padding: 12px 16px;
            flex: 1 0 auto;
            text-align: center;
            border-radius: 6px;
            text-decoration: none;
        }

        nav > a:hover {
            background-color: yellow;
            color: black;
        }
         section {

            min-height: 300px;
            background-color: rgb(19, 19, 57);
            margin: 8px;
         }

         

         section h2, section h2 + p {
            text-align: center;
            color: #FFF;
         }

         .content_frame {
            border: 4px solid yellow;
            min-height: 300px;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-evenly;
            padding: 12px;

         }

         .content_frame > div {
            border: 4px solid skyblue;
            flex: 0 0 45%;

         }

         section:nth-child(odd) {
            

         }
         section:nth-child(odd) .hero {

         background-image: url(../images/hedgehog.jpg);
         background-repeat: no-repeat;
         background-size: 90%;
         background-position: center;
         position: relative;
         right: -10%;
         border: 0;
         }
         section:nth-child(even) {
            
        }
        section:nth-child(even) .hero {

            background-image: url(../images/hedgehog.jpg);
            background-repeat: no-repeat;
            background-size: 90%;
            background-position: center;
            position: relative;
            left: -10%;
            order: 2;
            border: 0;
        }

        section:nth-child(odd) .text {
            background: orange;
            border: 0;
        }
        section:nth-child(even) .text {
            background: orange;
            border: 0;
        }






        @media screen and (max-width: 750px) {

            .content_frame > div {
                flex: 0 0 96%;
                order: 2;
            }
            section:nth-child(odd) .hero {
                right: 0;
                margin-bottom: 20px;

            }
            section:nth-child(even) .hero {
                left: 0;
                margin-bottom: 20px;
            
        }
    }