@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
/* CSS Document */

/* NOTES 
The site structure is based completely on bootstrap.
I then used this style sheet to make modifications, e.g. changed color of navbar.
The most important modification to note is .container: max-width:1160px;
*/ 

* {
    font-family: 'Noto Sans JP', sans-serif;
}

:root {
    --primary:#1f4086;
    --secondary:#9f0022;
}

#main {
    min-height:550px;
}

h1 {
    color:#111;
}

a {
    cursor:pointer;
    color:#1e4087;
}

.text-primary {
    color:var(--primary) !important;
}
.bg-primary {
    background-color:var(--primary) !important;
    color:#FFF !important;
}
.border-primary {
    border-color:var(--primary) !important;
}
.btn-primary {
    background-color:var(--primary) !important;
    border-color:var(--primary) !important;
    color:#FFF !important;
}
.btn-outline-primary {
    border-color:var(--primary) !important;
    color:var(--primary) !important;
    background-color:#FFF;
}
.btn-outline-primary:hover  {
    color:#FFF !important;
    background-color:var(--primary) !important;
}

.text-secondary {
    color:var(--secondary) !important;
}
.bg-secondary {
    background-color:var(--secondary) !important;
    color:#FFF !important;
}
.btn-secondary {
    background-color:var(--secondary) !important;
    border-color:var(--secondary) !important;
    color:#FFF !important;
}
.border-secondary {
    border-color:var(--secondary) !important;
}
.btn-outline-secondary {
    border-color:var(--secondary) !important;
    color:var(--secondary) !important;
    background-color:#FFF;
}
.btn-outline-secondary:hover  {
    color:#FFF !important;
    background-color:var(--secondary) !important;
}

/* extra */

.novelny {
    color:#aa1e36;
    font-weight:bold;
}

.novelny_white {
    color:#FFF;
    font-weight:bold;
}

.bg-warning {
    background-color:#d15e24 !important;
}
.bg-danger {
    background-color:#a50024 !important;
}
.btn-danger {
    background-color:#a50024 !important;
    border-color:#a50024 !important;
}

.border-primary {
   border-color:#1f4086 !important; 
}

.border-secondary {
   border-color:#a50024 !important; 
}

.filter-option-inner-inner {
    color:#FFF !important;
}

.text-primary {
    color:#1f4086 !important;
}
.text-secondary {
    color:#a50024 !important;
}

.btn-outline-primary {
    border-color:#1f4086 !important;
    color:#1f4086 !important;
}
.btn-outline-primary:hover {
    background-color:#FFF;
    text-decoration:underline;
}

.border-danger {
    border-color:#a50024 !important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color:#1f4086 !important;
    color:#FFF !important;
}

.input-group .btn {
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}

#header #novelny {
    max-height:50px;
}

#top {
    font-size:13px;
}

#home {
    background-color:#1f4086;
}
    
.stem {
    font-size:18px;
}

.card .bg-danger {
    border-color:#a50024;
}
.card .bg-danger .card-text {
    background-color:#a50024;
}

.carousel-item {
    max-height:200px;
}
.carousel-item img {
    max-height:150px;
}
.carousel-item a:hover {
    text-decoration:underline !important;
}

.carousel-head {
    font-size:24px;
    line-height:27px;
}

.carousel-p {
    font-size:18px;
    line-height:20px;
}

#home-browse a:hover .card-header {
    text-decoration:underline !important;
    background-color:#244a9c !important;
}

.link {
    text-decoration:underline !important;
}

#status p {
    font-size:14px !important;
}

.home-list {
    height:180px;
    overflow-y:auto;
}

.home-list img {
    max-width:25px;
    max-height:25px;
}

.home-list > div:hover {
    background-color:#EEE !important;
}

#home-extra img {
    max-width:164px;
}

#home-more img {
    width:30px;
    height:30px;
}

#home-more a:hover {
    text-decoration:underline !important;
}

#products img {
    max-width:180px;
}
#products p {
    font-size:14px;
}

.products-stem p {
    font-size:18px !important;
}

#cred {
    border:1px solid #111;
    color:#000;
}
#footer img {
    max-height:60px;
}