body, .modal{
    overflow: scroll;
    touch-action: manipulation; /* or none */
    overscroll-behavior: none;
}

.title{
    color: white;
    text-shadow: 2px 2px 2px #652295;
}

.hidden{
   display: none !important;
}

.custom-navbar{
    background-color: rgba(26, 26, 55, 0.87) !important;
    height: 6rem !important;
    padding: 0;
}

.search-bar-theme{
    border: #8080e3;
    border-radius: 1rem;
    background: #373767;
    color: white;
    height: 2.5rem;
}

@media (max-width: 575.98px) {
    .search-bar-theme{
        height: 1.75rem;
    }
}

.page-container{
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 6rem);
}

.view-deck{
    height: calc(100dvh - 10.5rem);
}

#search-results{
    margin-bottom: 14rem;
}

@media (max-width: 767.98px){
    .view-deck{
        height: calc(100dvh - 7.5rem);
    }
    
    .page-container{
        height: calc(100dvh - 3rem);
    }
}

.search-bar-theme::placeholder{
    color: white;
}

#search-deck-result{
    width: 100%;
    overflow-y: scroll;
    min-height: 30%;
    max-height: 80%;
    background-color: rgba(255, 255, 255, 0.67);
    padding: .25rem;
    border-radius: .5rem;
}

.left-panel{
    background-color: transparent;
}

.right-panel{
    background-color: transparent;
}

.align-items-last-baseline{
    align-items: last baseline;
}

.deck-result-group{
    justify-items: center;
}

.deck-result-title{
    width: 100%;
}

.deck-result-collapse{
    height: auto;
    min-height: 300px;
    background-color: rgba(181, 181, 181, 0.67);
}

.deck-card-choose-preview-btn{
    background-color: transparent;
    border-color: transparent;
    padding: 0;
}

.clickable:hover{
    cursor: pointer !important;
}

.nonclickable:hover{
    cursor: pointer !important;
}

.more-info-btn{
    background-color: rgba(181, 181, 181, 0.67);
    border-color: transparent;
    font-size: 1.5rem;
}

.choose-preview-inactive{
    color: #656565;
}

.choose-preview-active{
    color: #440e91;
}

.deck-info-caption{
    width: auto;
    font-size: 1.25rem;
    font-style: italic;
    color:rgb(76, 76, 76);
}

.deck-info-name{
    font-size: 2rem;
    width: auto;
}

.deck-info-author{
    font-size: 1.25rem;
}

.deck-info-desc{
    font-size: 1rem;
    text-wrap: wrap;
    word-break: break-all;
}

@media (max-width: 575.98px) {
    .deck-info-name{
        font-size: 1.5rem;
    }

    .deck-info-author{
        font-size: 1rem;
    }

    .deck-info-desc{
        font-size: .8rem;
    }
}

.deck-card-plate, .deck-card-preview{
    align-items: center;
    max-width: 12.5%;
    font-size: 1.5rem;
}

@media (max-width: 767.98px) {
    .deck-card-plate{
        max-width: 20%;
        font-size: 1.25rem;
    }
}

@media (max-width: 575.98px) {
    .deck-card-plate{
        max-width: 25%;
        font-size: 1rem;
    }
}

.card-plate-btn{
    padding: 0;
    background-color: transparent;
    border: 0px;
}

.card-plate-monster{
    background-color: #e5825b;
    border: 4px solid #a4a4a4;
}

.card-plate-magic{
    background-color: #009a97;
    border: 4px solid #a4a4a4;
}

.card-plate-trap{
    background-color: #c85fb2;
    border: 4px solid #a4a4a4;
}

.card-plate-img{
    width: 100%;

}

.card-plate-amount{
    margin-left: .5rem;
    color: black;
}

.deck-switch-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 2px 2px 2px #652295;
    border: 0.2rem solid #ffffffbb;
    padding: 5px 10px;
    font-size: 1.25rem;
    text-decoration: none;
    vertical-align: middle;
}

@media (max-width: 575.98px) {
    .deck-switch-btn{
        font-size: 1rem;
    }
}

.deck-switch-btn-active{
    background: #363684;
}

.deck-switch-btn-inactive{
    background: #1b1b3e;
}

.deck-switch-btn-active:hover{
    cursor: default;
    background: #363684;
}

.deck-switch-btn-inactive:hover{
    cursor: pointer;
    background: #363684;
}

.deck-page-label{
    font-size: 1.5rem;
    color: white;
    text-shadow: 2px 2px 2px #652295;
}

.deck-page-tag{
    background-color: #363684;
    display: flex;
    width: auto;
    align-items: center;
    justify-content: start;
    padding: .35rem;
    border: .2rem solid rgba(255, 255, 255, 0.73);
    border-radius: 1rem;
    gap: .25rem;
}

.tag-race{
    background-color: #dc6ccd;
}

.deck-info-function-non-btn, .deck-info-function-btn{
    background-color: #d2d2d2;
    display: flex;
    width: auto;
    align-items: center;
    justify-content: start;
    padding: .35rem;
    border: .2rem solid rgba(255, 255, 255, 0.73);
    border-radius: .5rem;
    gap: .25rem;
}

@media (max-width: 575.98px) {
    .deck-info-function-non-btn, .deck-info-function-btn{
        padding: .2rem;
        gap: .15rem;
        font-size: .8rem;
    }
}

.deck-info-function-btn:hover{
    background-color: #929292;
}

.deck-info-function-btn-txt{
    font-weight: bold;
    color: black;
}

.deck-likes{
    display: flex;
    width: auto;
    height: 1.5rem;
    align-self: center;
    align-items: center;
    background-color: #444;
    border-radius: 1rem;
    gap: 0.25rem;
    font-size: 1rem;
}

.deck-likes-amount{
    color: white;
}

.page-btn{
    font-size: 1rem;
    width: 3rem;
    height: 3rem;
    border: 0.2rem solid rgba(255, 255, 255, 0.73);
    border-radius: 50%;
    background-color: #363684; /* Set a background color */
}

.page-btn:hover{
    background-color: #4f4fbd;
}

.page-txt{
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    background-color: rgba(68, 68, 68, 0.8);
    border-radius: 1rem;
}

.last-upload-time{
    font-size: 1rem;
    width: auto;
    align-self: flex-end;
    color: white;
    background-color: #444;
    border-radius: 1rem;
}

.deck-page-tag-text{
    font-size: 1rem;
    color: white;
}

@media (max-width: 575.98px){
    .page-btn{
        width: 2.5rem;
        height: 2.5rem;
    }
    .page-txt{
        font-size: 1rem;
    }
    .deck-page-tag-text{
        font-size: .8rem;
    }
    .last-upload-time{
        font-size: .8rem;
    }
    .deck-likes{
        font-size: .8rem;
    }
}

.navbar-toggler{
    border-color: rgba(255, 255, 255, 0.53)
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24' /%3E%3C/svg%3E");
}

.navbar-nav{
    width: auto;
}

.nav-link{
    height: 100%;
}

.nav-item{
    width: 8rem;
    margin: 0 0rem;;
}

.brand{
    height: 5rem;
}

.nav-offset{
    width: 100%;
    height: 6rem;
}

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}


@media (max-width: 991.98px) {
    .navbar-nav{
        width: 100%;
    }

    .navbar-nav > .nav-link{
        margin: 0 auto;
        padding: 0;
    }
    
}

@media (max-width: 767.98px){
    .navbar-collapse{
        background-color: rgba(26, 26, 55, 0.67) !important;
    }
    
    .custom-navbar{
        height: 3rem !important;
    }

    .brand{
        height: 3rem;
    }

    .nav-offset{
        height: 3rem;
    }
}

.background-1{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:url("/images/bg1920x1080a.webp");    
    background-color: rgba(255, 255, 255, 0.53);
    background-blend-mode: overlay; /* Or other blend modes like overlay, screen, etc. */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: -1;
}

@media (max-aspect-ratio:1.25) {
    .background-1{
        background-image:url("/images/bg1024x1366a.webp");    
    }
}

@media (max-aspect-ratio:0.6) {
    .background-1{
        background-image:url("/images/bg430x932a.webp");    
    }
}

body {
    font-family: "Noto Sans TC", sans-serif;
    font-optical-sizing: auto;
}

.search-result{
    width: 10rem;
    font-size: 1rem;
    position: relative;
}

.search-content{
    color: white;
    text-shadow: 2px 2px 2px #652295;
    border: 0.2rem solid 363684bb;
    background: #1a1a37bb;
}

.search-content:active{
    border-color: #f2f51b;
    background-color: rgba(78, 186, 28, 0.53);
}

.search-content:hover{
    border-color: #f2f51b;
    background-color: rgba(78, 186, 28, 0.53);
}

.tag-style{
    font-size: .875rem;
    color: white;
    text-shadow: 2px 2px 2px #652295;
    border: #8080e3;
    background: #373767;
}

.rule{
    border: none;
    height: 2px;
    background-color: #111;
    opacity: 1;
}

#card-detail-modal{
    font-size: .85rem
}

.card-detail{
    width: 100%;
    background-color: transparent;
    padding-right: 1rem;
}

.result-name{
    font-size: .75rem;
    height: 2rem;
    text-align: center;
}

#detail-name, #detail-type, #detail-race, #detail-stages{
    text-align: center;
    font-size: 1.75rem;
    font-weight: bold;
    color: black;
    text-shadow:
                0 0 5px #fff,
                0 0 10px #fff,
                0 0 20px #fff,
                0 0 40px #fff,
                0 0 80px #fff;
}

#detail-type, #detail-race, #detail-stages{
    text-wrap: nowrap;
}

#detail-race, #detail-ero, #detail-end{
    font-size: .75rem;
}

#detail-star, #detail-type, #detail-deck-limit, #detail-remarks{
    font-size: .75rem;     
}

#detail-id{
    font-size: .75rem;
    font-style: italic;
    color: #fff;
}


#detail-remarks{
    font-size: .65rem;
    font-weight: bold;
}

#detail-desc, #detail-special-card, #detail-deck-limit{
    font-weight: bold;
    font-size: .5rem;
    color: #000;
}

#detail-ero{
    color: #af5879;
    font-weight: bold;
}

#detail-end{
    color: #78a1b9;
    font-weight: bold;
}

.desc-popover{
    text-decoration: underline;
}

#btn-back-to-top {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 10rem; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 100; /* Make sure it does not overlap */
    width: 4rem;
    height: 4rem;
    border: 0.2rem solid rgba(255, 255, 255, 0.73);
    outline: none; /* Remove outline */
    background-color: #363684; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    border-radius: 50%; /* Rounded corners */
    font-size: 1.5rem; /* Increase font size */
}
  
#btn-back-to-top:hover {
    background-color: #4f4fbd;
}

.left-side-function-menu{
    position: fixed;
    left: 0px;
    bottom: 8rem; /* Place the button at the bottom of the page */
    z-index: 99;
    width: 100%;
}

.left-side-function-btn{
    position: absolute;
    color: white;
    text-shadow: 2px 2px 2px #652295;
    border: 0.2rem solid rgba(255, 255, 255, 0.73);
    background: #363684;
    border-radius: 0px .5rem .5rem 0px;
    padding: 5px 15px;
    font-size: 1.5rem;
}

#btn-new-deck{
    bottom: 4rem;
}


#btn-view-deck{
    bottom: 0rem;
}

@media (max-width: 575.98px) {
    #btn-back-to-top {
        width: 3rem;
        height: 3rem;
        font-size: 1.25rem; /* Increase font size */
    }
    .left-side-function-btn{
        font-size: 1rem;
    }
    .left-side-function-menu{
        bottom: 12rem;
    }
}


.search-option-dropdown{
    position: relative;
    display: inline-block;
    font-size: 1.25rem;
}

.search-option-dropdown-content {
    display: none;
    position: absolute;
    flex-direction: column;
    background: #363684;
    border: 0.2rem solid rgba(255, 255, 255, 0.73);
    border-radius: 1rem;
    z-index: 1;
    width: 9.5rem;
    margin-left: .25rem;
}

.search-option-dropdown:hover .search-option-dropdown-content{
    display: flex;
}

.search-option-dropdown-select{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    text-shadow: 2px 2px 2px #652295;
    border: 0.2rem solid rgba(255, 255, 255, 0.73);
    background: #363684;
    border-radius: 2rem;
    padding: 5px 15px;
    text-decoration: none;
    vertical-align: middle;
    width: 10rem;
}

@media (max-width: 575.98px) {
    .search-option-dropdown {
        font-size: 1rem;
    }
    .search-option-dropdown-select{
        width: 8rem;
    }
    .search-option-dropdown-content {
        width: 7.5rem;
    }
}

.search-option-dropdown-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    text-shadow: 2px 2px 2px #652295;
    border: none;
    background: transparent;
    padding: 5px 15px;
    text-decoration: none;
    vertical-align: middle;
    border-radius: 1rem;
}

.search-option-dropdown-item:hover{
    background: #5252b3;
}

.search-option-btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    text-shadow: 2px 2px 2px #652295;
    border: 0.2rem solid rgba(255, 255, 255, 0.73);
    background: #363684;
    border-radius: 2rem;
    padding: 5px 15px;
    font-size: 1.25rem;
    text-decoration: none;
    vertical-align: middle;
}

#total-results{
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 2px #652295;
    background: #3c3c3cdd;
    padding: 5px 20px;
    border-radius: 2rem;
}

@media (max-width: 575.98px) {
    .search-option-btn{
        font-size: 1rem;
        padding: 4px 10px;
    }
    #total-results{
        font-size: 1rem;
        padding: 4px 12.5px;
    }

}

.create-deck-btn{
    color: white;
    text-shadow: 2px 2px 2px #652295;
    border: 0.2rem solid rgba(255, 255, 255, 0.73);
    background: #dcba33;
    border-radius: 1.5rem;
    font-size: 1.25rem;
    padding: 0rem .5rem;
}

.create-deck-btn:hover{
    background: #f5d761;
}

@media (max-width: 575.98px) {
    .create-deck-btn{
        font-size: 1rem;
    }
}

.search-btn{
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1;
    color: white;
    text-shadow: 2px 2px 2px #652295;
    border: 0.2rem solid rgba(255, 255, 255, 0.73);
    background: #363684;
    border-radius: 1.5rem;
    font-size: 1.1rem;
    padding: .25rem;
}

@media (max-width: 575.98px) {
    .search-btn{
        width: 2.25rem;
        height: 2.25rem;
        aspect-ratio: 1;
        font-size: .9rem;
    }
}

.search-btn:hover{
    background-color: #5252b3;
}

.search-distinct{
    background-color: #d8ad3d;
}

.search-distinct:hover{
    background-color: #927428;
}

.left-side-function-btn, .search-option-btn:hover{
    background: #5252b3;
}


#totalCloudDeck, #totalBookmarkedDeck{
    width: 2rem;
    height: 2rem;
    background-color: rgba(255, 255, 255, 0.73);
    border-radius: 2rem;
    margin-left: .25rem;
}

.realtime-edit-deck-info{
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    width: 100vw;
    height: 6rem;
    z-index: 99;
    background: linear-gradient(#dadada 25%, #797979 95%);
    display: flex;
    font-size: 1.25rem;
    font-weight: bold;
    align-items: center;
}

.realtime-edit-name-group{
    min-width: 30vw;
}

@media (max-width: 575.98px) {
    .realtime-edit-deck-info{
        height: 10rem;
    }
}

.deck-result-group{
    font-weight: bold;
    align-items: center;
}

.edit-deck-rename, .edit-deck-input{
    min-width: 1rem;
}

.edit-input-btn{
    border: rgba(36, 36, 36, 0.67) solid .15rem;
}

.card-background{
    background-color: rgb(255, 255, 255, 0.4);
    background-blend-mode: overlay;
    background-size: 150%;
    background-repeat: no-repeat;
    background-position: center 30%;
}

.edit-deck-btn{
    display: flex;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    background-color: #eee;
}

.edit-deck-btn:hover{
    background-color: #fff;
}

.edit-deck-input{
    max-width: 100%;
}

.function-circle, .function-circle-dark{
    display: flex;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.function-circle-dark{
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    background-color: rgba(114, 59, 190, 0.67);
}

.deck-info-circle-mobile-group{
    position: absolute;
    display: flex;
    background-color: white;
    border: #797979 solid 0.25rem;
    border-radius: .5rem;
    padding: .25rem;
    gap: .25rem;
    top: 3rem;
    left: 0rem;
    width: auto;
}

@media (max-width: 302.98px) {
    .function-circle, .function-circle-dark{
        width: 3rem;
        height: 3rem;
    }
}

.arc {
    background: conic-gradient(var(--color) var(--progress), gray 0deg);
    font-size: 0;
}

.arc::after{
    white-space: pre;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin: .25rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: white;
    font-size: .95rem;
    text-align: center;
}

@media (max-width: 302.98px) {
    .arc::after{
        font-size: .75rem;
    }
}

.monster-arc::after{
    content: "淫獸\a"attr(data-progress)"張";
    background: #e5825b;
    color: black;
    text-shadow: 1px 1px 1px white;
}

.magic-arc::after{
    content: "一般\a"attr(data-progress)"張";
    background: #009a97;
    color: black;
    text-shadow: 1px 1px 1px white;
}

.trap-arc::after{
    content: "反擊\a"attr(data-progress)"張";
    background: #c85fb2;
    color: black;
    text-shadow: 1px 1px 1px white;
}

.race-arc::after{
    content: attr(data-progress);
    background: #e977b7;
    color: white;
}

.stars-arc::after{
    content: "星數\a" attr(data-progress);
    background: #444;
    color: white;
}

.deck-arc::after {
    content: "牌組\a" attr(data-progress);
}

.spares-arc::after {
    content: "備用\a" attr(data-progress);
    background: rgb(76, 147, 239);
    color: white;
}

.hint-auto-save{
    position: absolute;
    text-wrap: nowrap;
    left: -.85rem;
    top: -1.25rem;
    font-size: 0.75rem;
    color: white;
    background: rgba(68, 68, 68, 0.93);
    padding: 0.1rem;
    border-radius: 0.5rem;
}

.select-card-function-btn{
    position: absolute;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    line-height: 1rem;
}

.edit-deck-function-group{
    position: relative;
    text-align: center;
}

.add-to-deck-btn{
    z-index: 99;
    bottom: 0rem;
    right: -2rem;
    background-color: #eee;
    border: rgba(36, 36, 36, 0.67) solid .15rem;
    color: black;
    font-weight: bold;
}

.add-to-deck-btn:hover{
    background-color: #fff;
}

.add-to-spares-btn{
    z-index: 99;
    bottom: 4rem;
    right: -1.75rem;
    background-color: rgb(76, 147, 239);
    border: rgba(36, 36, 36, 0.67) solid .15rem;
    color: white;
    font-weight: bold;
    width: 3rem;
    height: 3rem;
}

.add-to-spares-btn:hover{
    background-color: rgb(96, 167, 229);
}

.reset-card-btn{
    z-index: 99;
    bottom: 8rem;
    right: -2rem;
    background-color: rgb(252, 81, 81);
    border: rgba(36, 36, 36, 0.67) solid .15rem;
    color: white;
    font-weight: bold;
}

.reset-card-btn:hover{
    background-color: rgb(255, 141, 141);
}

.hint-limit-reached{
    position: absolute;
    bottom: 18rem;
    right: -2rem;
    color: white;
    background-color: red;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: .8rem;
    border-radius: .25rem;
    font-weight: bold;
    padding-left: .25rem;
    padding-right: .25rem;
}

@media (max-width: 1199.98px){
    .hint-limit-reached{
        bottom: 15rem;
    }
}

@media (max-width: 991.98px){
    .hint-limit-reached{
        bottom: 16rem;
    }
}


@media (max-width: 767.98px){
    .add-to-spares-btn{
        bottom: 4rem;
    }
    .reset-card-btn{
        bottom: 7.5rem;
    }
    .hint-limit-reached{
        bottom: 15rem;
    }
}


@media (max-width: 575.98px){
    .add-to-deck-btn{
        font-size: .8rem;
        width: 3rem;
        height: 3rem;
    }
    .add-to-spares-btn{
        font-size: .8rem;
        width: 2.5rem;
        height: 2.5rem;
        bottom: 3.25rem;
    }
    .reset-card-btn{
        font-size: .8rem;
        width: 3rem;
        height: 3rem;      
        bottom: 6rem;
    }
    .hint-limit-reached{
        font-size: .6rem;
        bottom: 10rem;
    }
}

.deck-amount{
    position: absolute;
    top: -.25rem;
    right: -.25rem;
    color: white;
    background-color: red;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    padding: .2rem;
    font-weight: bold;
}
.justify-self-start{
    justify-self: start !important;
}

.justify-self-center{
    justify-self: center !important;
}

.justify-self-end{
    justify-self: end !important;
}

#detail-gender{
    width: 1.2rem;
    height: 1.2rem;
}

.card-content{
    background-color: rgba(255, 255, 255, 0.87);
    border-radius: 1rem;
}

.footer{
    background-color: #652295;
}

@media (max-width: 575.98px) {

    #detail-name{
        font-size: 1.15rem;
    }

    #detail-race, #detail-ero, #detail-end{
        font-size: .95rem;
    }

    #detail-star, #detail-type, #detail-stages, #detail-remarks{
        font-size: .95rem;     
    }

    #detail-special-card, #detail-deck-limit, #detail-desc{
        font-size: .85rem;    
    }

    .tag-style {
        font-size: .65rem;
    }

    .search-result{
        width: 9rem;
    }

    .result-name{
        font-size: .75rem;
        height: 2rem;
    }

    #detail-gender{
        width: 1.5rem;
        height: 1.5rem;
    }

    .card-holder{
        height: 45dvh;
        width: auto;
    }

    .card-content{
        height: 50dvh;
        width: 100%;
        padding-right: 0rem;
    }

}

@media (min-width: 576px) {

    #detail-race, #detail-ero, #detail-end{
        font-size: 1rem;
    }

    #detail-star, #detail-type, #detail-stages, #detail-desc, #detail-remarks{
        font-size: 1rem;     
    }

    #detail-special-card, #detail-deck-limit{
        font-size: .85rem;    
    }

    .search-result{
        width: 12rem;
    }

    .result-name{
        font-size: .75rem;
        height: 2rem;
    }

    #detail-gender{
        width: 1.6rem;
        height: 1.6rem;
    }

    .card-holder{
        height: 22rem;
    }

    .card-content{
        width: 50%;
        padding-right: 2rem;
    }

}

@media (min-width: 768px) {

    #detail-race, #detail-ero, #detail-end{
        font-size: 1.15rem;
    }

    #detail-star, #detail-type, #detail-stages, #detail-desc, #detail-remarks{
        font-size: 1.15rem;     
    }

    #detail-special-card, #detail-deck-limit{
        font-size: 1rem;    
    }

    .search-result{
        width: 12rem;
    }

    .result-name{
        font-size: .9rem;
        height: 2.5rem;
    }

    #detail-gender{
        width: 1.6rem;
        height: 1.6rem;
    }

    .card-holder{
        height: 26rem;
    }

    .card-content{
        width: 50%;
        padding-right: 4rem;
    }
}

@media (min-width: 992px) {

    #detail-race, #detail-ero, #detail-end{
        font-size: 1rem;
    }

    #detail-star, #detail-type, #detail-stages, #detail-desc, #detail-remarks{
        font-size: 1rem;     
    }

    #detail-special-card, #detail-deck-limit{
        font-size: 1rem;    
    }

    .search-result{
        width: 12rem;
    }

    .result-name{
        font-size: 1rem;
        height: 3rem;
    }
    .card-detail{
        padding: 2rem;
    }

    #detail-gender{
        width: 1.6rem;
        height: 1.6rem;
    }

    .card-holder{
        height: 32rem;
    }

    .card-content{
        width: 50%;
        padding-right: 6rem;
    }

}

@media (min-width: 1200px) {

    #detail-race, #detail-ero, #detail-end{
        font-size: 1.15rem;
    }

    #detail-star, #detail-type, #detail-stages, #detail-desc, #detail-remarks{
        font-size: 1.15rem;     
    }

    #detail-special-card, #detail-deck-limit{
        font-size: 1rem;    
    }

    .search-result{
        width: 14rem;
    }

    .result-name{
        font-size: 1rem;
        height: 3rem;
    }

    .card-detail{
        padding: 2rem;
    }

    #detail-gender{
        width: 1.7rem;
        height: 1.7rem;
    }

    .card-holder{
        height: 38rem;
    }

    .card-content{
        width: 50%;
        padding-right: 10rem;
    }

}

@media (min-width: 1400px) {

    #detail-race, #detail-ero, #detail-end{
        font-size: 1.3rem;
    }

    #detail-star, #detail-type, #detail-stages, #detail-desc, #detail-remarks{
        font-size: 1.3rem;     
    }
    
    #detail-special-card, #detail-deck-limit{
        font-size: 1.15rem;    
    }

    .search-result{
        width: 15rem;
    }

    .result-name{
        font-size: 1rem;
        height: 3rem;
    }

    .card-detail{
        padding: 2rem;
    }
    
    #detail-gender{
        width: 1.8rem;
        height: 1.8rem;
    }

    .card-holder{
        height: 42rem;
    }

    .card-content{
        width: 50%;
        padding-right: 12rem;
    }

}