body{
    background-color: black;
    color: #ddd;
    margin-bottom: 100px;
}

footer a{
    text-decoration: none;
    color: #ccc;
    cursor: default;
}

@font-face {
    font-family: 'UnifrakturCook';
    src: url('/font/UnifrakturCook.woff2') format('woff2'),
         url('/font/UnifrakturCook.woff') format('woff'),
         url('/font/UnifrakturCook.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.bg-brand{
    background-color: black;
}

/* btn-art */
.btn-art {
    color: #000;
    background-color: #ee3f97;
    border: 1px solid #ee3f97;
    border-radius: 0;
    transition: all 0.3s ease;
}

.btn-art:hover {
    color: #ee3f97;
    background-color: transparent;
    border: 1px solid #ee3f97;
}

.btn-art:active {
    color: #e6a3aa !important;  /* #ee3f97보다 약간 어두운 색상 */
    background-color: transparent !important;
    border-color: #e6a3aa !important;
}

.btn-art:focus {
    box-shadow: 0 0 0 0.25rem rgba(249, 192, 199, 0.2);
}

/* outline 버전 */
.btn-outline-art {
    color: #ee3f97;
    background-color: transparent;
    border: 1px solid #ee3f97;
    border-radius: 0;
    transition: all 0.3s ease;
}

.btn-outline-art:hover {
    color: #000;
    background-color: #ee3f97;
}

.btn-outline-art:active {
    color: #000 !important;
    background-color: #e6a3aa !important;
    border-color: #e6a3aa !important;
}

.btn-outline-art:focus {
    box-shadow: 0 0 0 0.25rem rgba(249, 192, 199, 0.2);
}

/* 비활성화된 상태 - 두 버전 모두에 적용 */
.btn-art:disabled, 
.btn-art.disabled,
.btn-outline-art:disabled,
.btn-outline-art.disabled {
    color: #9e7b80;
    border-color: #9e7b80;
    background-color: transparent;
    opacity: 0.65;
}

/* btn-fiction */
.btn-fiction {
    color: #000;
    background-color: #71c16e;
    border: 1px solid #71c16e;
    border-radius: 0;
    transition: all 0.3s ease;
}

.btn-fiction:hover {
    color: #71c16e;
    background-color: transparent;
    border: 1px solid #71c16e;
}

.btn-fiction:active {
    color: #e6e09c !important;  /* #71c16e보다 약간 어두운 색상 */
    background-color: transparent !important;
    border-color: #e6e09c !important;
}

.btn-fiction:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 249, 174, 0.2);
}

/* outline 버전 */
.btn-outline-fiction {
    color: #71c16e;
    background-color: transparent;
    border: 1px solid #71c16e;
    border-radius: 0;
    transition: all 0.3s ease;
}

.btn-outline-fiction:hover {
    color: #000;
    background-color: #71c16e;
}

.btn-outline-fiction:active {
    color: #000 !important;
    background-color: #e6e09c !important;
    border-color: #e6e09c !important;
}

.btn-outline-fiction:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 249, 174, 0.2);
}

/* 비활성화된 상태 - 두 버전 모두에 적용 */
.btn-fiction:disabled, 
.btn-fiction.disabled,
.btn-outline-fiction:disabled,
.btn-outline-fiction.disabled {
    color: #a9a46b;
    border-color: #a9a46b;
    background-color: transparent;
    opacity: 0.65;
}

.bg-art {
    color: #fff;
    background-color: #e6a3aa;
}

.bg-fiction {
    color: #fff;
    background-color: #71c16e;
}


/* navbar */
#brand {
    width: 160px;
}
#symbol{
    width: 50px;
}
.navbar.bg-dark {
    background-color: #343a40 !important; /* 원하는 색상 */
    width: 100%;
}

.container {
    max-width: 600px;
}

.nav-item{
    font-size: 1.2rem;
}

.nav-link{
    color: #ddd;
}

.nav-link:hover{
    color: #9bd3ae;
}

/* brand */
.text-art{
    color: #9bd3ae;
}
.text-fiction{
    color: #71c16e;
}

.bmc{
    width: 300px;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 35px;
    background-color: #9bd3ae;
    border-radius: 10px;
}