@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family: "Prompt", sans-serif;
    cursor: url('../cursor/point.cur'), auto !important;
}
::-webkit-scrollbar{
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-thumb{
    background: #A33838;
    border-radius: 9px;
}
::-webkit-scrollbar-thumb:hover{
    background: #850D0D;
}
.btn:hover, a:hover, .craft-item:hover, 
.drop-item > span, .monster-item > span { cursor: url('../cursor/link.cur'), auto !important; }
.content { padding-top: 100px; }
.wrapper {
    background-color: #1d1d1d !important;
    min-height: 100dvh;
}
.menubar-header { 
    background-color: #2a2a2a;
    border-radius: 0 0 20px 20px; 
}
.navbar-nav .nav-link { 
    font-size: 18px !important; 
    font-weight: 500;
    color: #fffaaf !important;
}
/* label { 
    color: #fffaaf;
    text-shadow: #ffe7a4 0px 0px 5px, #ffe7a4 0px 0px 5px, 3px -4px 2px rgba(206,160,128,0);  
} */
.navbar-nav .nav-link p:not(.dropdown-toggle) { display: none; }
.text-info {
    color: #19d1ff !important;
    text-shadow: #0e82c5 0px 0px 3px, #0e82c5 0px 0px 5px, 3px -4px 2px rgba(206,160,128,0);
}
.text-lime, .btn-select-job {
    color: #b3ff00 !important;
    text-shadow: #55b813 0px 0px 3px, #55b813 0px 0px 5px, 3px -4px 2px rgba(206,160,128,0);
}
.text-main, .navbar-nav .nav-link:hover, .item-detail > span,
.drop-item:hover > span, .craft-item, .monster-item:hover > span,
.form-control, .form-control::placeholder, .pagination .page-link:hover,
.btn-select-job:hover, .btn-select-job.active, .pagination .page-item.active .page-link { 
    color: #ffdb10 !important;
    text-shadow: #da721d 0px 0px 3px, #da721d 0px 0px 5px, 3px -4px 2px rgba(206,160,128,0);
}
.form-control, .input-group-text {
    background-color: rgb(58, 58, 58) !important;
    border: 0 !important;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}
.form-control:focus, .craft-item:hover, .drop-item:hover, .monster-item:hover {
    -webkit-box-shadow: 0px 0px 8px 0px rgb(255, 196, 0);
    box-shadow: 0px 0px 8px 0px rgb(255, 196, 0);
}
.input-group-text {
    background-color: rgb(44, 44, 44) !important;
    color: #ffffff;
}
.input-group .form-control {
    box-shadow: none;
}
.item-box {
    background: url('../images/bg-items.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 50% 50%;
    min-height: 100px;
    padding: 10%;
    padding-top: 12%;
    margin-bottom: 10px;
    width: 150px;
    height: 150px;
}
.item-detail {
    margin-bottom: 5px;
}
.infomation .item-detail > span {
    width: 77%;
}
.item-detail > span,
.drop-item > span,
.monster-item > span {
    float: right;
    background: #1e1e1e;
    border-radius: 5px;
    width: 50%;
    min-height: 30px;
    text-align: center;
    font-size: 14px;
    padding: 3px 0px;
    text-transform: none;
}
.drop-item, .monster-item { transition: 0.3s; }
.drop-item > span,
.monster-item > span { 
    float: none; 
    padding: 5px 15px;
    color: #b3ff00;
}
.craft-item {
    float: right;
    text-align: right;
    transition: 0.5s;
}
.craft-item:hover,
.drop-item:hover,
.monster-item:hover{
    transform: scale(1.1);
}
.monster-item img { height: 32px; }
.drop-items-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.item-box-monster {
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;
    padding: 50px;
    padding-top: 60px;
}
.skill-detail-container {
    width: 100%;
    border-radius: 10px;
    background: rgba(29, 29, 29, 0.65);
}
.item-container, .monster-container,
.skill-detail-container {
    -webkit-box-shadow: inset 3px 3px 10px 2px rgba(0, 0, 0, 0.7);
    box-shadow: inset 3px 3px 10px 2px rgba(0, 0, 0, 0.7);
}
.pagination .page-link {
    color: #ffffff;
    background: #313131 !important;
    border-color: transparent !important;
    height: 50px;
    display: flex;
    align-items: center;
}
.pagination .page-item.active .page-link {
    background-color: #242424 !important;
}
.btn-select-job {
    width: 100%;
    color: #ffffff;
    border: 2px solid #414141;
    transition: 0.5s;
}
.btn-select-job:hover, .btn-select-job.active {
    border-color: #ffdb10;
    -webkit-box-shadow: 0px 0px 8px 1px #da721d !important;
    box-shadow: 0px 0px 8px 1px #da721d !important;
    background: #414141;
}
.skill-img { height: 32px; }
.img-info-skill { 
    height: 64px; 
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 10px 1px #181818;
    box-shadow: 0px 0px 10px 1px #181818;
}

@media only screen and (min-width: 768px) {     /* Small Size */
    .banner { width: 75%; }
    .navbar-brand:hover { 
        transform: scale(1.1);
        transition: 0.3s;
    }
    .navbar-nav .nav-link { 
        padding-top: 0; 
        font-weight: 500;
    }
    .navbar-nav .nav-link:hover { 
        transition: 0.5s;
        padding-top: 10px;
    }
    .navbar-nav .nav-link p:not(.dropdown-toggle) {
        display: block;
        font-size: 12px;
        font-weight: 300;
        line-height: 12px;
    }
    .nav-item {
        text-align: center;
    }
    .infomation .item-detail > span {
        width: 70%;
    }
    .item-detail { text-transform: uppercase; }
}

@media only screen and (min-width: 992px) {    /* Medium Size */

}

@media only screen and (min-width: 1200px) {    /* Large Size */
    
}

@media only screen and (min-width: 1600px) {    /* Large Size */
    .section-2 { z-index: 0; }
}

@-webkit-keyframes logo {
	0%{transform:scale(1)}
	30%{transform:scale(.80)}
	60%{transform:scale(1)}
}

@keyframes logo {
	0%{transform:scale(1)}
	30%{transform:scale(.80)}
	60%{transform:scale(1)}
}

@-webkit-keyframes blink {
	0%   {
        filter: brightness(1);
        filter: contrast(1);
        -webkit-filter: brightness(1);
        -webkit-filter: contrast(1);
    }
    25%   {
        filter: brightness(2);
        filter: contrast(2);
        -webkit-filter: brightness(2);
        -webkit-filter: contrast(2);
    }
    50%  {
        filter: brightness(0.5);
        filter: contrast(0.5);
        -webkit-filter: brightness(0.5);
        -webkit-filter: contrast(0.5);
    }
    75%   {
        filter: brightness(2);
        filter: contrast(2);
        -webkit-filter: brightness(2);
        -webkit-filter: contrast(2);
    }
    100% {
        filter: brightness(1);
        filter: contrast(1);
        -webkit-filter: brightness(1);
        -webkit-filter: contrast(1);
    }
}

@keyframes blink {
    0%   {
        filter: brightness(1);
        filter: contrast(1);
        -webkit-filter: brightness(1);
        -webkit-filter: contrast(1);
    }
    25%   {
        filter: brightness(2);
        filter: contrast(2);
        -webkit-filter: brightness(2);
        -webkit-filter: contrast(2);
    }
    50%  {
        filter: brightness(0.5);
        filter: contrast(0.5);
        -webkit-filter: brightness(0.5);
        -webkit-filter: contrast(0.5);
    }
    75%   {
        filter: brightness(2);
        filter: contrast(2);
        -webkit-filter: brightness(2);
        -webkit-filter: contrast(2);
    }
    100% {
        filter: brightness(1);
        filter: contrast(1);
        -webkit-filter: brightness(1);
        -webkit-filter: contrast(1);
    }
}

@-webkit-keyframes rotate {
    0%   { transform: rotate(0deg); }
    50%  {  transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes rotate {
    0%   { transform: rotate(0deg); }
    50%  {  transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}