.keyFrame{
    width: 100vw;
    background-image:linear-gradient(rgba(93, 93, 93, 0.1),rgba(93, 93, 93, 0.1)), url('../img/index/cover.jpg') ;
    background-position: bottom center;
    background-size: cover;
}

.keyTitle{
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    animation-name: leftin;
    /* animation-duration: 4s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards */
}

@keyframes leftin {
    from {width: 0; opacity:0}
    to {width: 50%; opacity:1}
  }

  /*  Medium devices (tablets, 768px and up) */
  /* md = 大於 768 px 以上 */
@media (min-width: 768px) {
    .keyTitle{
        animation-duration: 4s;
        animation-delay: 0.5s;
        animation-fill-mode: forwards
    }
 }

.bubble-md{
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    top:-15%;
    right:10%;
}

.bubble-sm{
    position: absolute;
    background-color: #dc734c;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top:10%;
    right:5%;
}

.main-title{
    font-size: 60px;
    font-weight: 900;
    text-align: center;
}

.dark-link{
    cursor: pointer;
    color:rgb(65, 65, 65);
    text-decoration:none
}

.dark-link:hover{
    color: orange;
    font-size: 18px;
}

a:hover img{
    opacity: 0.7;
    /* transition: all ease 0.5s; */
    /* filter: brightness(70%); */
    /* transition: all 0.5s ease; */
}