.offcanvas,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm,
.offcanvas-xl,
.offcanvas-xxl {
  --bs-offcanvas-transition: transform 0.5s ease;
}

.logo img {
  width: 100%;
}

.logo img:first-child {
  max-width: 50px;
  animation: rotate-logo 16s linear infinite;
}

.logo img:last-child {
  max-width: 180px;
}

@keyframes rotate-logo {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

header {
  padding: 30px;
}

header .offcanvas {
  padding: 30px 0 0 0;
  background-color: var(--color-black);
}

.offcanvas,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm,
.offcanvas-xl,
.offcanvas-xxl {
  --bs-offcanvas-height: 100vh;
}

.offcanvas-nav ul {
  padding: 0;
  list-style: none;
}

.offcanvas-nav li:not(:last-child) {
  margin-bottom: 30px;
}

.offcanvas-nav a {
  text-decoration: none;
  color: var(--color-gray);
  font-weight: 400;
  font-size: 105px;
  line-height: 80px;
  font-family: "Larken", sans-serif;
  transition: color 0.2s ease-in-out;
}

.offcanvas-nav .selected {
  color: var(--purple);
}

.offcanvas-footer {
  color: var(--color-gray-light);
  font-weight: normal;
  font-size: 16px;
}

.offcanvas-footer p {
  margin-bottom: 0;
}

.offcanvas.offcanvas-top {
  border-bottom: 12px solid var(--color-black);
}

.offcanvas-body img {
  width: 100%;
  object-fit: cover;
  max-height: 570px;
  border-radius: 15px;
}

.offcanvas-body-content {
  margin-top: 60px;
}

.offcanvas-nav a:hover:not(.selected) {
  color: var(--color-white);
}

.header-gif {
  position: relative;
}

.header-gif img,
.header-gif video {
  width: 100%;
  border-radius: 15px;
}

@media (max-width: 992px) {
  .offcanvas-body img {
    margin-top: 30px;
    max-height: 100%;
  }

  .offcanvas-nav a {
    font-size: 100px;
    line-height: 70px;
  }

  .offcanvas-body-content {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  header .primary-button {
    display: none;
  }

  .header-gif {
    margin-top: 25px;
  }
}

@media (max-width: 428px) {
  .offcanvas-nav a {
    font-size: 74px;
    line-height: 25px;
  }

  .offcanvas-body,
  .offcanvas-body-content {
    height: 100%;
  }

  .offcanvas-body-content .col-lg-7 {
    align-items: end;
    display: flex;
    margin-bottom: 30px;
  }

  .offcanvas-body img {
    margin-top: 18px;
    max-height: 100%;
  }

  .offcanvas-body {
    padding-bottom: 0;
    overflow: hidden;
  }

  .header-gif img,
  .header-gif video {
    min-height: 220px;
    object-fit: cover;
    border-radius: 15px;
  }
}