@import "fonts.css";

button {
  background: none;
  border: none;
}
button:focus {
  background: none;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: end;
  margin: 0 auto;
  height: 90vh;
  max-width: 1440px;
  overflow: hidden;
}

:root {
  --dark-blue: #1d2d44;
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: auto auto;
  font-family: "DOCKER";
  font-size: 40px;
  color: var(--dark-blue);
  transition: all 0.3s;
}
.main__one {
  opacity: 0;
  transition: all 0.9s;
}
.main__svg {
  opacity: 0;
  transition: all 0.9s;
}
.main__two {
  opacity: 0;
  transition: all 0.9s;
}

.like {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 15px;
  font-family: "Yanone Kaffeesatz";
  font-size: 48px;
  color: var(--dark-blue);
  opacity: 0;
  transition: all 0.9s;
  height: 60px;
  margin-right: 60px;
}

.like__svg {
  transition: all 0.3s;
}

.like__svg.out {
  right: 0px;
  top: -40px;
  position: absolute;
}

.like__svg.inOut {
  transform: translateY(0) translateX(0);
  fill: var(--dark-blue) !important;
}

.like .like__svg {
  fill: white;
}

.like.down .like__svg {
  fill: var(--dark-blue);
}

.active {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 500px) {
  .like {
    margin: 0 auto;
    font-size: 40px;
  }
  .like__text {
    display: none;
  }
  .main {
    flex-direction: column;
    font-size: 36px;
  }

  .main__svg {
    height: 60px;
  }
}