* {
        padding: 0;
        margin: 0;
    }

    body {
        background: #111111;
    }

    /* Header start*/

    header {
        position: fixed;
        width: 50px;
        background: linear-gradient(to bottom, #ffffff2a, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.014));
        box-sizing: content-box;
        left: 10px;
        top: 10px;
        padding: 10px; 
        backdrop-filter: blur(5px);
        border-top: 1px solid rgba(245, 245, 245, 0.4);
        border-right: 1px solid rgba(245, 245, 245, 0.2);
        box-shadow: 0 5px 45px rgba(0, 0, 0, 0.123);
        border-radius: 10px;
        z-index: 500;
        transition: 1s;
        overflow: hidden;
        display: flex;
    }

    .img {
        width: 50px;
        height: 50px;
        border-radius: 10%;
        transform: scale(1.5);
        transition: .5s;
    }

    .logo_original {
        opacity: 100;
    }


    .logo_flat {
        position: absolute;
        opacity: 100;
        transition: .5s linear;
    }

    header nav {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        flex-direction: column;
        transition: .2s;

    }

    header nav ul {
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        text-transform:uppercase;
        list-style: none;
    }

    header nav li {
        position: relative;
        margin: 0 20px;
        display: inline;
        background: linear-gradient(to top, #ffffff2a, rgba(255, 255, 255, 0.014));
        border-top: 1px solid rgba(245, 245, 245, 0.4);
        border-right: 1px solid rgba(245, 245, 245, 0.2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.048);
        padding: 5px 15px;
        border-radius: 50px;
        font-size: small;
        left: 20px;
    }

    .here {
        color: yellow;
    }

    header nav ul a{
        text-decoration: none;
        color: whitesmoke;
        /* outline: 1px solid red; */
        line-height: 0;
        
        
    }

    .light__wide{
        position: absolute;
        width: 70px;
        height: 100px;
        left: 50px;
        background: #ffffff20;
        filter: blur(1px);
        transform: skewX(45deg);
        transition: 2s ease-out;
    }

    .light__slim{
        position: absolute;
        width: 10px;
        height: 100px;
        background: #ffffff20;
        filter: blur(1px);
        transform: skewX(45deg);
    }

    .light {
        position: absolute;
        margin: 0;
        padding: 0;
        top: -10px;
        left: -200px;
        transition: 1s ease-in;
        z-index: 450;
    }

    /* hovers */

    header:hover nav {
        transition-delay: .5s;
        opacity: 100%;
    }

    header:hover .img {
        animation-name: img_breath;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
        animation-duration: 3s;
    }

    header:hover .logo_flat {
        opacity: 0;
    }

    header:hover > .light  {
        left: 110%;
    }

    header:hover {
        width: 500px;
    }

    header nav li:hover {
        background: rgba(245, 245, 245, 0.288);
    }

    /* hovers end  */

    /* header end */

    

@keyframes img_breath {
    0% { 
        transform: scale(1.5);
    }
    50% { 
        transform: scale(1.6);
    }
    100% {
        transform: scale(1.5);
    }

 }

.logo__img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
}

.logo__img-blur {
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgb(24, 24, 24);
    border-radius: 9999px;
    opacity: 0%;
    z-index: -1;

}

.logo__img-shine {
    width: 200px;
    height: 200px;
    background: white;
}