.go-to-account {
    
    width: 3vw;
    height: 3vw;

    position: absolute;

    left: 5vw;

    background-color: $second-color;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 100%;

    .go-to-account-text {

        @include titleFont();
        
        font-size: 1vw;
        text-decoration: none;
        user-select: none;

        color: #ffffff;
    }
}

.close-session {
    width: 7vw;
    height: 3vw;

    position: absolute;

    left: 10vw;

    background-color: $second-color;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 5%;

    .close-session-text {

        @include titleFont();
        font-size: 1vw;

        text-decoration: none;

        user-select: none;

        color: #ffffff;
    }
}


@media (max-width: 991.98px) {
    //! I fucking hate make the responsive design
    .go-to-account, .close-session {
       position: initial;
       padding: 1vw;

    }

    .go-to-account {

        .go-to-account-text {
            font-size: 9pt;
            
        }

        margin-top: 10px;
        margin-bottom: 10px;
    }

    .close-session {

        .close-session-text {
            font-size: 9pt;
        }
    }
}

@media (max-width: 576px) {
    .go-to-account, .close-session {
        width: auto;
        height: auto;
    }

    .go-to-account-text, .close-session-text {
        position: initial;
        margin:10px 10px;
 
     }
}

.go-to-account.dark-mode-component, .close-session.dark-mode-component {
    background-color: $second-color-dark;
}