@media (max-width: 1200px) {
    .container {
        max-width: 1088px;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 992px;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (max-width: 480px) {
    .container {
        max-width: 480px;
    }
}

html, body {
    overflow-x: hidden;
    width: 100%;
    background-color: #020306;
  }
.container {
    height: 100%;
    position: relative;
    margin: none;
}
#gifBlock {
    width: 100%;
    /*max-width: 1088px;*/
    margin: auto; 
    position: relative;
    z-index: 1;
}
#anim {
    width: 100%;
    /*max-width: 1088px;*/
    margin: auto;
    display: none;
    position: relative;
    z-index: 1;
}

.custom-input {
    border: none;
    outline: none;
    background: none;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 5rem;
    caret-color: white;
    color: white;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.custom-input::placeholder {
    color: white;
    opacity: 1;
}

/* 為了兼容不同瀏覽器，建議加上以下前綴 */
.custom-input::-webkit-input-placeholder {
    color: white;
}

.custom-input::-moz-placeholder {
    color: white;
}

.custom-input:-ms-input-placeholder {
    color: white;
}

#showUserName {
    font-family: 'Noto Sans TC', sans-serif;
    color: white;
    position: absolute;
    top: -1.7%;
    left: 0%;
    z-index: 3;
    transform-origin: right center;
    transform: rotate(-27deg);
}