/*
=Dynamic Hamburger
============================================= */

/*
=Checkbox
============================================= */
.ins-wrapper input {
    display: none;
}

/*
=Hamburger Container
============================================= */
.hamburger {
    /* background-color: gold; */
    width: 26px; height: 26px;
    display: flex;
    
    justify-content: center; /* centers rotate wrapper inside hamburger */
    align-items: center;
    transform: translateX(4px);
    
    position: relative;
    z-index: 5;
}

/*
=Rotate Wrapper
============================================= */
.hamburger .rotate-wrapper {
    /* background-color: white; */
    width: 18px; height: 18px; /* margin: auto; */ /* another way to center the rotate wrapper */

    display: flex;
    align-items: center;
    transition: 0.35s ease-in-out;
}

input:checked + .hamburger .rotate-wrapper {
    transform: rotate(135deg);
}

input:checked:hover + .hamburger .rotate-wrapper {
    transform: rotate(225deg);
}
/*
=Hamburger Lines
============================================= */
.hamburger .line,
.hamburger .line::before,
.hamburger .line::after {
    background-color: rgb(255, 92, 163);
    height: 1.5px;
    width: 100%;
}

.hamburger .line {
    position: relative;
}

.hamburger .line::before,
.hamburger .line::after {
    content: "";
    position: absolute;
    transition: 0.35s ease-in-out;
}

.hamburger .line::before { top: -5px; }
.hamburger .line::after { top: 5px; }

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

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

/*
=Hamburger Label
============================================= */
.hamburger label {
    /* background-color: lightskyblue; */
    width: 26px; height: 26px;
    position: absolute;
    cursor: pointer;
}