/*
=Input Button + Hamburger
============================================= */
/*
=style the input + hamburger */
.checkbox,
.hamburger {
  height: 10rem;
  width: 6rem;
  position: fixed;
  top: 5.5rem;
  right: 10%;

}

/*
=style the input element */
                .checkbox {
                    z-index: 20;
                    opacity: 0;
                    cursor: pointer;
                }



/*=style the hamburger container */

                .hamburger {
                    /* padding: 1rem; */
                    z-index: 10;
                }

/*
=Hamburger Wrapper
============================================= */

                /*=style the wrapper */
                .wrapper {
                    display: flex;
                    flex: 1 0 auto;
                    height: 100%;
                    align-items: center;
                    transition: .5s ease-in-out;
                }

/*=Hamburger Lines============================================= */

                /*=style the center + pseudo lines */
                .wrapper .line,
                .wrapper .line::before,
                .wrapper .line::after {
                    background-color: white;
                    height: 6px;
                    width: 100%;
                }

                /*=create a new positioning context for the top + bottom pseudo lines */
                .wrapper .line {
                    position: relative;
                }
                /*=position + transition the pseudo lines */
                .wrapper .line::before,
                .wrapper .line::after {
                    content: "";
                    position: absolute;
                    transition: .5s ease;
                }

                .wrapper .line::before{ top: -1.5rem; }
                .wrapper .line::after{ top: 1.5rem; }

                /*=rotate the wrapper 135° clockwise */
                .checkbox:checked + .hamburger .wrapper {
                    transform: rotate(135deg);
                }

                /*=rotate + reposition the pseudo lines */

                .checkbox:checked + .hamburger .wrapper .line::before,
                .checkbox:checked + .hamburger .wrapper .line::after {
                    transform: rotate(90deg);
                    top: 0;
                }

                /*=ensure the bottom line fades from view at the completion of the X */

                .checkbox:checked + .hamburger .wrapper .line::after {
                    opacity: 0;
                }

                /*=rotate the X on hover */
                /*.checkbox:checked:hover + .hamburger .wrapper{
                    transform: rotate(225deg);
                } */

        /*=Navbar Container + Links============================================= */

                /*=style the navbar */
                .navbar {
                    display: flex;
                    position:fixed;
                    top: 0; left: -50rem; bottom: 0;
                    width: 25rem;
                    flex-direction: column;
                    align-items: center;
                    transition: .85s ease;
                }

                /*=transition the navbar into view */
                .checkbox:checked ~ .navbar {
                    background-color: black;
                    left: 0;
                    min-width: 100%;
                }



                /*=style the navbar links */
                .navbar a {
                    width: 80%;
                    color: transparent;
                    padding: 2rem 0;
                    font-size: 5rem;
                }



                /*=add space between the links + the viewport's top edge */
                .navbar a:first-child {
                    margin-top: 10rem;
                }
                /*=transition the links' color to black */

                .checkbox:checked ~ .navbar a {
                    color: white;
                }