@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* #################################################################################################### */
/* header and navbar */
/* #################################################################################################### */
* {
    font-family: 'Poppins', Tahoma ,sans-serif;
}
:root {
    --bg-1: radial-gradient(#0f172a, #0f1930, #0f1930);
    --bg-2: radial-gradient(#0f1930, #0f1930, #0f172a);
    --col-1: lavender;
    --op-1: 65%;
    --op-2: 80%;
    --op-3: 100%;
}
.navbar, .nav-icon, #check {
    display: none;
    z-index: 100;
}

/* #################################################################################################### */
/* media navbar mobile */
/* #################################################################################################### */
@media only screen and (max-width:700px) {
    /* where can i tap */
    /* #check {display: flex;} */

    #check {
        position: fixed;
    }
    .nav-icon {
        color: lavender;
        width: 15%;
        height: 50px;
        cursor: pointer;
        position: absolute;
        right: 1%;
        display: flex;
        justify-content: right;
        align-items: center;
        padding-right: 5%;
    } 
    .navbar {
        width: 99%;
        position: fixed;
        top: 50px;
        left: 0px;
        display: none;
        flex-wrap: wrap;
        backdrop-filter: blur(10px);
        background: var(--bg-2);
        text-align: center;
    }
    .navbar a {
        font-size: 1.2rem;
        margin: 5px 0;
    }

    /* checked menu icon*/
    #check:checked~.nav-icon #menu-icon {
        display: none;
    }
    #close-icon {
        display: none;
    }

    /* checked close icon*/
    #check:checked~.nav-icon #close-icon {
        display: block;
    }
    #check:checked~.navbar {
        display: flex;
    }
}