@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans+Expanded:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
  --pink: rgb(255, 121, 224);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Zalando Sans Expanded', sans-serif;
}

body {
  background: #fff;
}


header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  background: #111;
  color: white;
  position: sticky;
  top: 0;
  z-index: 1000;
}

img {
    align-items: center;
    border: #111;
    border-radius: .25%;
}

.menu {
  position: fixed;
  right: 0;
  top: 0;
  width: 250px;
  height: 100vh;
  background: white;
  transform: translateX(100%);
  transition: 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu.active {
  transform: translateX(0);
}

.menu ul {
  list-style: none;
}

.menu a {
  text-decoration: none;
  font-size: 20px;
  color: black;
}

.menu ul li a:hover {
    color: var(--overlay-color);
}

.menu {
  position: fixed;
  right: 0;
  top: 0;
  width: 250px;
  height: 100vh;
  background: white;
  transform: translateX(100%);
  transition: 0.4s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu.active {
  transform: translateX(0);
}

.menu ul {
  list-style: none;
}

.menu a {
  text-decoration: none;
  font-size: 20px;
  color: black;
}

.toggle {
  width: 40px;
  height: 40px;
  background: url('../web2/images/menu.png') center/contain no-repeat;
  cursor: pointer;
}

.toggle.active {
  background: url('../web2/images/icone-x-rose.png') center/contain no-repeat;
}