@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: "Montserrat", sans-serif;
    /* background-color: #eaeaea; */

}

::selection {
    color: #fff;
    background: #0aa045;
}

::-moz-selection {
    color: #fff;
    background: #0aa045;
}

/* menu */

@media only screen and (min-width: 751px) {

    .navMenu {
        position: fixed;
        top: 0%;
        left: auto;
        right: 0;
        color: black;
    }

    .navMenu {
        border-radius: 15px;
        transition: 0.4s;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 28px;
        margin-right: 60px;
        color: white;
    }

    .navMenu a {
        color: black;
        text-decoration: none;
        font-size: 1.2em;
        text-transform: uppercase;
        font-weight: 500;
        display: inline-block;
        position: relative;
    }

    .margin {
        margin-right: 20px;
    }

    .navMenu a::before {
        content: "";
        width: 6px;
        height: 6px;
        background: #0aa045;
        border-radius: 50%;
        position: absolute;
        bottom: -5px;
        left: 50%;
        top: 0px;
        transform: translateX(-50%);
        transition: top 0.2s ease-in-out, opacity 0.2s ease-in-out;
        opacity: 0;
    }

    .navMenu a:hover::before {
        top: 120%;
        opacity: 1;
    }

    .navMenu a:hover {
        color: #0aa045;
    }
}


/* menu */

h1 {
    color: #0aa045;
    font-size: 3.5em;
    font-weight: 800;
    padding-bottom: 20px;
    word-wrap: break-word;
}

h2 {
    color: #0aa045;
    font-size: 3em;
    font-weight: 800;
}

h3 {
    color: #000;
    font-size: 2em;
    font-weight: 600;
}





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

    #menuToggle {
        display: block;
        position: fixed;
        top: 50px;
        left: 50px;

        z-index: 1;

        -webkit-user-select: none;
        user-select: none;
    }

    #menuToggle a {
        text-decoration: none;
        color: #232323;

        transition: color 0.3s ease;
    }

    #menuToggle a:hover {
        color: #0aa045;
    }

    #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;

        cursor: pointer;

        opacity: 0;
        /* hide this */
        z-index: 2;
        /* and place it over the hamburger */

        -webkit-touch-callout: none;
    }


    #menuToggle span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;

        background: #cdcdcd;
        border-radius: 3px;

        z-index: 1;

        transform-origin: 4px 0px;

        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
            background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
    }

    #menuToggle span:first-child {
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%;
    }

    /* 
       * Transform all the slices of hamburger
       * into a crossmark.
       */
    #menuToggle input:checked~span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
    }

    /*
       * But let's hide the middle one.
       */
    #menuToggle input:checked~span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
       * Ohyeah and the last one should go the other direction
       */
    #menuToggle input:checked~span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px);
    }

    /*
       * Make this absolute positioned
       * at the top left of the screen
       */
    #menu {
        position: fixed;
        width: 300px;
        margin: -100px 0 0 -50px;
        /*   padding: 50px; */
        padding-top: 125px;
        height: 100vh;

        background: #ededed;
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */

        transform-origin: 0% 0%;
        transform: translate(-100%, 0);

        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    }

    #menu li {
        padding: 10px 0 20px 50px;
        font-size: 22px;
    }

    /*
       * And let's slide it in from the left
       */
    #menuToggle input:checked~ul {
        transform: none;
    }
}