@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&display=swap');

.bg-black{background:#333 !important;}
.bg-dim{background:#666 !important;}
.bg-light{background:#e6f2f1 !important;}
.bg-yellow{background:#ffeb99 !important;}
.bg-accent{background: #15F9CD !important;}
.bg-primary{background: #00b6ba !important;}
.bg-pink{background: #ff3e71 !important;}


.text-accent{color: #15F9CD}
.text-light{color: #e6f2f1}

.link-accent{color: #00B6BA}
a,a:hover{color:unset}

button:focus, input:focus{outline-color:transparent;}
.btn{border-radius:0;transition:none}
.btn-accent{background: #ff3e71;color: #e6f2f1;font-weight:bold;border:2px solid #333;padding:10px;
}
.btn-accent:hover, .btn-accent:focus{text-decoration:none;color:#333;}

body{font-family: 'Comfortaa','Noto Sans TC',  sans-serif;letter-spacing:2px;font-size:14px;}

.modal-dialog{margin-top:60px}

#navbar{background-image:linear-gradient(45deg, rgba(255,255,255,.8) 60px, #e6f2f1 60px);font-size:14px;padding:0 15px;}
#navbar .nav-link{padding:15px;transition:.2s;}

#navbar .nav-link:hover {background: #ff3e71;color:#fff;border-radius:0}

#navbar .nav-item.highlight{background:#333;color:#15F9CD}

#navbar .navbar-toggler{height:100%;width:24px;position:relative;padding:0}
#navbar .navbar-toggler>.navbar-toggler-icon, #navbar .navbar-toggler::before,#navbar .navbar-toggler::after{content:'';display:block;width:100%;height:2px;background: #00b6ba;position:absolute;top:50%;left:0;;animation-fill-mode: forwards;animation-duration:.2s;transform-origin:center}
#navbar .navbar-toggler::before{margin-top:-30%;}
#navbar .navbar-toggler::after{margin-top:30%;}

#navbar .navbar-toggler>.navbar-toggler-icon{animation-name:navTogglerCloseCenter}
#navbar .navbar-toggler::before{animation-name:navTogglerCloseFirst}
#navbar .navbar-toggler::after{animation-name:navTogglerCloseLast}

#navbar.active .navbar-toggler-icon{animation-name:navTogglerOpenCenter}
#navbar.active .navbar-toggler::before{animation-name:navTogglerOpenFirst}
#navbar.active .navbar-toggler::after{animation-name:navTogglerOpenLast}

.navbar-nav-container{display:flex;flex-direction: row}

#ranking-block .maker-thumbnail::before{content:'';position:absolute;top:-3px;left:20px;background:#333;color:#fff;font-size:18px;padding:5px;box-shadow:3px 3px 0 #00b6ba
}
#ranking-block .maker-thumbnail:first-child::before{content:'1'}
#ranking-block .maker-thumbnail:nth-child(2)::before{content:'2'}
#ranking-block .maker-thumbnail:nth-child(3)::before{content:'3'}

@media (max-width: 768px) {
    #navbar>.container{height:30px;}
    #navbar .navbar-brand{font-size:14px;color:#00b6ba;font-weight:bold}

    #navbar .navbar-nav-container{flex-direction: column;position:fixed;top:0;left:0;height:100%;z-index:-1;opacity:0;padding-top:60px;border-radius:50%;width:100%;visibility:hidden;transition:.2s ease-out;background:#fff;overflow:hidden}
    #navbar.active .navbar-nav-container{visibility:visible;background:#e6f2f1;border-radius:0;top:0;left:0;opacity:1;}
    #navbar .navbar-nav{height:100%;overflow:auto}
    #navbar .navbar-nav .nav-item{width:100%;text-align:left}
    #navbar .navbar-nav .nav-item.highlight{margin-top:auto;text-align:right;}
    #navbar .navbar-nav .nav-item.highlight>a{background:#00b6ba;color:#e6f2f1}
}

.inline-section{background:#333;color:#fff;padding:15px;overflow:hidden}
.inline-section-title{display:flex;flex-direction: row;align-items:center;word-break: keep-all}
.inline-section-title:after{content: '／';margin:0 5px;}
.inline-section .tag-container{white-space: nowrap}

.block{border: 3px solid #333;background:#fff;padding:0 30px 30px 30px;margin-bottom:30px;}
.block-title{background:#333;color: #15f9cd;padding:5px;transform: skewY(-5deg) translateY(-50%);display:inline-block;}

.modal{border-radius:0}
.modal-content.block>.modal-header,.modal-content.block>.modal-footer{padding:0;border:none}
.modal-header>[data-dismiss="modal"]{padding-top:30px;opacity:1}
.modal-header>[data-dismiss="modal"]:hover{color: #ff3e71}

.maker-container{overflow:auto;padding:15px}
.maker-container-v{white-space:nowrap}
.maker-container-v .maker-thumbnail{display:inline-block;width:150px;}
.maker-container-h .maker-thumbnail{display:block;width:100%;}
.maker-thumbnail{font-size:12px;padding:15px;position:relative;}
.maker-thumbnail>.maker-thumbnail-img{width:100%;height:0;padding-top:100%;background-size:cover;background-position: center}
.maker-thumbnail>.maker-thumbnail-title{color: #ff3e71;padding:5px 0;font-weight:bold;word-break: keep-all;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;transition:.2s}
.maker-thumbnail:hover .maker-thumbnail-title{background:#ff3e71;color:#fff;padding:5px;}

.carousel-function{display:flex;align-items:center}
.carousel-function>.carousel-indicators{position:relative;display:block;margin:0;flex-grow:1}
.carousel-function>.carousel-indicators>li{background-color:#333;width:10px;height:10px;opacity:1;transition:background-color .2s;display:inline-block;border:none;}
.carousel-function>.carousel-indicators>li.active{background-color:#00B6BA}
.carousel-function>.carousel-control>.carousel-control-prev, .carousel-function>.carousel-control>.carousel-control-next{position:relative;display:inline-block;color:#333;font-weight:bold;width:15px;opacity:1}
.carousel-function .carousel-control .carousel-control-prev:hover, .carousel-function .carousel-control .carousel-control-next:hover{opacity:.7}

.tag-container>.tag{display:inline-block;position:relative;padding:5px;margin:0 5px;font-size:12px;word-break: keep-all;white-space: nowrap;}
.tag-container>.tag:before{content:'#'}
.tag::after{content:'';position:absolute;top:0;left:-1px;height:100%;width:0;border-bottom:3px solid;transition: .2s;}
.tag:hover::after{width:100%}

@keyframes navTogglerOpenFirst {
    0%{margin-top:-30%}
    50%{margin-top:0}
    100%{margin-top:0;transform:rotate(45deg)}
}

@keyframes navTogglerOpenCenter {
    0%{opacity:1}
    50%, 100%{opacity:0}
}

@keyframes navTogglerOpenLast {
    0%{margin-top:30%}
    50%{margin-top:0}
    100%{margin-top:0;transform:rotate(-45deg)}
}

@keyframes navTogglerCloseFirst {
    0%{margin-top:0;transform:rotate(45deg)}
    50%{margin-top:0;transform:none;}
    100%{margin-top: -30%;}
}

@keyframes navTogglerCloseCenter {
    0%{opacity:0}
    50%, 100%{opacity:1}
}

@keyframes navTogglerCloseLast {
    0%{margin-top:0;transform:rotate(-45deg)}
    50%{margin-top:0;transform:none}
    100%{margin-top:30%;}
}
.nav-tabs .nav-link{padding:15px;transition: .2s;}
.tab-container{background: #e6f2f1;display:flex;flex-direction:column}

.tab-content{width:100%;height:100%;overflow:auto;position:relative;flex-grow:1}

.nav-tabs{background: #d7e5e5;width:100%;height:50px;overflow:auto;white-space: nowrap}
.nav-tabs>.nav-item{display:inline-block;margin:0;height:100%;}

.nav-tabs,.nav-tabs .nav-link,.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{border:none}
.nav-tabs .nav-link{background:#fff;color: #e6f2f1;border-radius:0;height:100%}
.nav-tabs .nav-link:hover,.nav-tabs .nav-link.active{padding:15px 30px}
.nav-tabs .nav-link.active,.tab-pane{background:#e6f2f1;color: #00b6ba}

.nav-tabs .nav-link.disabled{color: #e6f2f1;width:0;padding-left:0;padding-right:0;overflow:hidden;opacity:0;}

.tab-content>.tab-pane{opacity:0;display:block;padding:15px;visibility: hidden;transition: opacity .2s,visibility 0s .2s;position:absolute;top:0;left:0;width:100%;height:100%;overflow:auto}
.tab-pane.active{opacity:1;visibility:visible;transition: opacity .2s,visibility 0s;}