:root {
  --transition: all .3s ease-in-out;
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-font-smoothing : antialiased;
  }

  .cls-1 {
    fill: #fff;
  }

  .cls-2 {
    fill: #ffff69;
  }

  .cls-3 {
    fill: #3a4642;
  }

  .responsive-iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
  }
  
  .responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  
.link-with-animation {
  height: fit-content;
  overflow: visible;
  display: block;
  padding: 0 0 2px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: var(--transition);
  width: -moz-fit-content;
  width: fit-content;
}

.link-with-animation::before {
  background-color: #ffff69;
  display: block;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  transition: var(--transition);
  width: 100%; 
}

.link-with-animation::after {
  background-image: url(../arrow.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  content: "";
  display: block;
  height: 8px;
  left: calc(100% - 1px);
  position: absolute;
  transform: translateY(47%);
  transition: var(--transition);
  width: 10px;
}

.link-with-animation:hover::before {
  width: calc(100% + 16px);
}

.link-with-animation:hover::after {
  left: calc(100% + 15px);
}

.inside-li {
  list-style-position: inside;
}

.position-li {
  margin-bottom: 0.5rem;
}

.text-padded {
  padding-left: 0.5rem;
}