a {
  display: block;
  text-decoration: none;
  color: currentColor;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

.btn {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 15px;
  margin-bottom: 30px;
  border: none;
  background-color: lightblue;
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 250ms linear;
}

.btn:hover {
  background-color: bisque;
}

.btn::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  /* background-color: pink; */
  transition: transform 250ms linear;
  background-image: url(../images/icons/instagram-svgrepo-com.svg);
  background-size: contain;
}

.btn::after {
  position: absolute;
  top: 15px;
  left: 15px;
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  /* background-color: teal; */
  transform: translateY(38px);
  transition: transform 250ms linear;
  background-image: url(../images/icons/telegram-svgrepo-com.svg);
  background-size: contain;
}

.btn:hover::before {
  transform: translateY(-37px);
}

.btn:hover::after {
  transform: translateY(0);
}

.menu {
  display: flex;
  align-items: center;
  gap: 20px;
}

.menu-link {
  position: relative;
  display: block;
  padding: 15px;
  /* outline: 1px solid tomato; */
}

.menu-link::after {
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  display: block;
  width: 100%;
  height: 5px;
  background-color: lightskyblue;
  border-radius: 5px;
  transform: scaleX(0);
  transition: transform 300ms linear;
}

.menu-link:hover::after {
  transform: scaleX(1);
}

.thumb {
  position: relative;
  width: 300px;
  overflow: hidden;
}

.thumb:hover .overlay {
  transform: translateY(0);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 15px 0;
  width: 100%;
  height: 100%;
  background-color: rgba(214, 60, 231, 0.4);
  /* outline: 1px solid tomato; */
  transform: translateY(100%);
  transition: transform 300ms linear;
  text-align: center;
}

.container {
  position: relative;
  width: 400px;
  height: 300px;
  perspective: 400px;

  outline: 1px solid black;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 150px;
  transform: translate(-50%, -50%) rotateY(45deg);

  /* transform: translate(-50%, -50%) scale(0.3) rotateZ(-360deg);
  opacity: 0;
  transition:
    transform 300ms ease-out,
    opacity 300ms ease-out; */
  /* animation: change-color 2000ms linear infinite; */
  background-color: lightblue;
}

/* .container:hover .box {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotateZ(0);
} */

/* @keyframes change-color {
  0% {
    background-color: brown;
  }
  50% {
    background-color: greenyellow;
    transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    background-color: deepskyblue;
    transform: translate(-50%, -50%) rotate(0);
  }
} */