@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300,400,500,700&display=swap");



.myprofil {
position: fixed;
top: 150px;
right: 20px;
width: 120px;
height: 60px;
box-shadow: 0 25px 35px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
transition: height 0.5s, width 0.5s;
transition-delay: 0s, 0.75s;
overflow: hidden;
background: rgba(255, 255, 255, 0.6); border: 1px solid #fff; padding:9px; -webkit-border-top-right-radius:9px; -webkit-border-bottom-left-radius:9px; -moz-border-radius-topright:9px; -moz-border-radius-bottomleft:9px; border-top-right-radius:9px; border-bottom-left-radius:9px;
}

.myprofils {
display: flex;
background: rgba(255, 255, 255, 0.6); border: 1px solid #fff; padding:9px; -webkit-border-top-right-radius:9px; -webkit-border-bottom-left-radius:9px; -moz-border-radius-topright:9px; -moz-border-radius-bottomleft:9px; border-top-right-radius:9px; border-bottom-left-radius:9px;
}


.myprofil.active {
width: 300px;
height: 350px;
transition: width 0.5s, height 0.5s;
transition-delay: 0s, 0.75s;
background: rgba(255, 255, 255, 0.6); border:0px; -webkit-border-top-right-radius:9px;-webkit-border-bottom-left-radius:9px;-moz-border-radius-topright:9px; -moz-border-radius-bottomleft:9px; border-top-right-radius:9px; border-bottom-left-radius:9px;
padding-right:9px;
}

.myprofil .userBx {
position: relative;
width: 60px;
height: 60px;
display: flex;
align-items: center;
overflow: hidden;
transition: 0.5s;
transition-delay: 0.5s;
}

.myprofil.active .userBx {
width: calc(100% - 60px);
transition-delay: 0s;
}

.myprofil .userBx .username {
margin-bottom: 20px;
white-space: nowrap;
color: #555;
font-size: 1.1em;
}

.myprofil .userBx .imgBx {
margin-bottom: 20px;
position: relative;
min-width: 40px;
height: 40px;
overflow: hidden;
border-radius: 50%;
border: 3px solid #fff;
}

.myprofil .userBx .imgBx img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hamburguer toggle menu */

.myprofil .menuToggle {
  position: relative;
  width: 60px;
  height: 60px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.myprofil .menuToggle::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 2px;
  background: #555;
  transform: translateY(-10px);
  box-shadow: 0 10px #555;
  transition: 0.5s;
}

.myprofil .menuToggle::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 2px;
  background: #555;
  transform: translateY(10px);
  transition: 0.5s;
}

.myprofil.active .menuToggle::before {
  transform: translateY(0px) rotate(45deg);
  box-shadow: 0 0 #555;
}

.myprofil.active .menuToggle::after {
  transform: translateY(0px) rotate(-45deg);
}

.menu {
  position: absolute;
  width: 100%;
  height: calc(100% - 60px);
  margin-top: 60px;
  padding: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.menu li {
  list-style: none;
}

.menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  font-size: 1em;
  text-decoration: none;
  color: #555;
}

.menu li a:hover {
  color: #4e65ff;
}

.menu li a ion-icon {
  font-size: 1.5em;
}