#sidebar_open {

    position: absolute;

    opacity: 0;

    height: 0px;

}



.sidebar {

    display: none;

}



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

    #sidebar_open:checked~.sidebar {

        display: flex;

        justify-content: center;



        position: fixed;

        z-index: 11;



        width: 100vw;

        height: 100vh;

        overflow-y: hidden;



        padding: 100px 0;



        background: var(--black);

    }



    #sidebar_open:checked~.sidebar ul:not(.sidebar_social) {

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;



        height: 100%;



        gap: 50px;

    }



    #sidebar_open:checked~.sidebar ul li a {

        color: var(--white);

        font-weight: 600;

        cursor: pointer;

    }



    #sidebar_open:checked~.sidebar ul li a:hover {

        filter: brightness(0.85);

    }



    #sidebar_open:checked~.sidebar ul .sidebar_close {

        position: fixed;

        top: 21px;

        right: 102.5px;



        color: var(--white);



        cursor: pointer;

    }



    #sidebar_open:checked~.sidebar ul li .sidebar_social {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 30px;



        padding-top: 50px;



        border-top: 1px solid var(--white);

    }

}



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

    #sidebar_open:checked~.sidebar ul .sidebar_close {

        right: 27.5px;

    }

}