@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap');

/* // X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    h1 {
        padding-top: 10px !important;
        font-size: 23px !important;
    }

    h2 {
        font-size: 18px !important;
    }

    #mascot {
        background-image: url(/assets/images/new-mascot.gif) !important;
        width: 160px !important;
        height: 150px !important;
        right: 0px !important;
        bottom: 48px !important;
    }
}

/* // Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* // Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    h2 {
        font-size: 14px;
    }

    #mascot {
        width: 150px;
        height: 200px;
        right: 5px;
        bottom: 45px;
    }
}

/* // Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* // X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}

/* // XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width */
* {
    padding: 0px;
    margin: 0px;
    font-family: 'Prompt', sans-serif;
}

body {
    background-color: #0c0c0c;
    font-family: 'Prompt', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffbc00;
}

header {}

.navbar-expand-lg {
    border-bottom: 2px solid #ffbc00 !important;
}

footer {}

.logo {
    width: 140px;
}


.game {
    color: #ffbc00;
    background-color: #141414;
}

.game:hover {
    color: #e6e6e6;
    position: static;
    width: 100%;
    height: 100%;
    background-color: rgb(24, 24, 24);
}

.mobile-item {
    border: 1px solid #ffbc00;
    border-radius: 4px;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
        rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
        rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}

.m {
    color: #ffbc00;
    font-weight: bold;
    text-decoration: underline;
}

#mascot {
    position: fixed;
    background-image: url(/assets/images/new-mascot.webp);
    background-repeat: no-repeat;
    background-size: cover;
    width: 250px;
    height: 200px;
    right: 10px;
    bottom: 5px;
}

.i-click {
    cursor: pointer;
}

.text-gold {
    color: #ffbc00;
}

.bg-gold {
    background-color: #ffbc00;
}

.btn-gold {
    color: #ffffff;
    background-color: #ffbc00;
}

.btn-login,
.btn-register {
    border: 2px solid #ffbc00;
    color: #ffbc00 !important;
    border-radius: 5px;
}

.link-content {
    display: block;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #000;
}

.link-box {
    display: grid;
    grid-template-columns: 35% 65%;
    padding-bottom: 1rem;
    justify-items: center;
}

.link-detail {
    display: block;
}

.link-title {
    display: block;
    color: gold;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.link-image {
    display: block;
    margin-left: auto;
}

.link-btn {
    display: block;
    cursor: pointer;
    color: #fff !important;
    font-size: 1rem;
    font-weight: 600;
    border-color: #c71c1c;
    text-align: center;
    width: 175px;
    text-decoration: none;
    border-style: groove;
    border-radius: 29px 29px 29px 29px;
    background: linear-gradient(180deg, rgba(124, 31, 31, 1) 0%, rgba(134, 31, 31, 1) 21%, rgba(199, 28, 28, 1) 81%, rgba(231, 101, 101, 1) 100%);
    box-shadow: 3px 2px 5px 0px #c71c1c;
}