body {
    margin: 0px;
    background-image: url(assets/bolec.jpg);
    background-size: cover;
}


a {
    text-decoration: none;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

/*--------------------------------------------------------------*/

#container { /* Główny div w ktorym bedzie wszystko */
    width: 100%;
    z-index: 10;
}

/*--------------------------------------------------------------*/

#site_name { /* Div z nazwa strony */
    width: 20%;
    height: 4vw;
    font-size: 1.5vw;
    font-family: Oswald;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(12, 12, 12, 0.8);
}

#site_name_link {
    color: white;
}

/*--------------------------------------------------------------*/

#top_extend {
    width: 4%;
    background-color: rgba(95, 132, 95, 0.5);
    height: 4vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: Oswald;
    font-size: 3vw;
    float: left;
}

#top_extend:hover {
    cursor: pointer;
    transition: color 150ms;
    color: darkgreen;
    user-select: none;
}

#top_select {
    float: left;
    width: 0%;
}

.top_select_option {
    width: 33.33%;
    height: 4vw;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(95, 132, 95, 0.6);
    color: white;
    user-select: none;
    font-size: 1vw;
    font-family: Roboto;
}

.top_select_option:hover {
    cursor: pointer;
    background-color: rgba(95, 132, 95, 0.5);
}

/*--------------------------------------------------------------*/

#topbar { /* Pasek u góry z opcjami wyboru (wyplac, logowanie itd) */
    width: 80%;
    height: 4vw;
    background-color: rgba(12, 12, 12, 0.8);
    float: left;
}

.topbar_option {
    float: right;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 10%;
    font-size: 1vw;
    font-family: Roboto;
    height: 100%;
    padding-left: 0.2vw;
    padding-right: 0.2vw;
}

.topbar_option:hover {
    transition: background-color 750ms ease;
    transition: font-size 150ms linear;
    font-size: 1.2vw;
    background-color: rgba(0, 0, 0, 0.25);
}

/*--------------------------------------------------------------*/

#maincontent { /* Główna zawartość strony - skrzynki do otwierania, ruletka, losowanie itp*/
    width: 100%;
    z-index: 1;
    height: 700px;
    color: #dbdbdb;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
}

#maincontent_panel { /* Główna zawartość strony - skrzynki do otwierania, ruletka, losowanie itp*/
    width: 100%;
    z-index: 1;
    height: 700px;
    color: #dbdbdb;
    float: right;
    overflow: hidden;
}

#reg_maincontent {
    width: 100%;
    height: 700px;
    color: #dbdbdb;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.1);
}

#reg_alert {
    width: 60%;
    height: 20vw;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;

}

#reg_alert_title {
    width: 100%;
    height: 2.5vw;
    font-size: 1.4vw;
    font-family: Oswald;
    background-color: rgba(59, 89, 46, 0.5);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-align: center;
}

#reg_alert_content {
    width: 100%;
    height: 17.5vw;
    font-family: Oswald;
    font-size: 1.2vw;
    text-align: center;
}

#reg_alert_error {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 8.75vw;
}

#reg_alert_counter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 8.75vw;
}

.maincontent_account_title {
    width: 100%;
    height: 30%;
    font-size: 2.5vw;
    font-family: Oswald;
    background-color: rgba(59, 89, 46, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    clear: both;
    border-radius: 15px;
    margin-bottom: 30px;
}

.php_div {
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.maincontent_account {
    min-width: 30%;
    height: 80%;
    float: left;
    background-color: rgba(12, 12, 12, 0.5);
    margin: 2vw;
}

.php_account_form {
    text-align: center;
    color: #dbdbdb;
}

#mc_register {
    border-radius: 15px;
}

#mc_login {
    border-radius: 15px;
}

label {
    font-size: 2vw;
    font-family: Oswald;
    line-height: 5vw;
}

.inputBox {
    background-color: rgba(255, 255, 255, 0.3);         /*   rgba(36, 62, 25, 0.7)     rgba(95, 132, 95, 0.8);        59, 89, 46  */
    border: 0.5px solid #212121;
    box-shadow: 0.5px 0.5px 20px #212121;
    text-indent: 0.5vw;
    width: 15vw;
    height: 2vw;
    font-size: 1.5vw;
    font-family: Roboto;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.5);
}

.buttonBox {
    background-color: rgba(255, 255, 255, 0.4);
    border: none;
    font-size: 1vw;
    font-family: Roboto;
    box-shadow: 1px 1px 10px black;
    color: rgb(230, 230, 230);
    text-shadow: 0.5px 0.5px 0.5px black, 
                    0.5px 0.5px 0.5px black,
                    0.5px 0.5px 0.5px black,
                    0.5px 0.5px 0.5px black;
    font-weight: bold;
    width: 9vw;
    height: 2.5vw;
    border-radius: 0.4vw;
}

.buttonBox:active {
    background-color: rgba(255, 255, 255, 0.6);
    text-shadow: 1px 1px 1px black, 
                    1px 1px 1px black,
                    1px 1px 1px black,
                    1px 1px 1px black;
}

.buttonBox:hover {
    cursor: pointer;
}

#panel_status {
    background-color: #161616;
    width: 100%;
    height: 10vw;
    margin-top: 0vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

#panel_money {
    background-color: rgba(0, 0, 0, 0.45);
    width: 30%;
    height: 8vw;
    float: left;
    font-family: Oswald;
    font-size: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

#panel_deposit {
    background-color: rgba(0, 0, 0, 0.3);
    width: 30%;
    height: 8vw;
    float: left;
    margin-left: 1vw;
    margin-right: 1vw;
    font-family: Oswald;
    font-size: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

#panel_withdraw {
    background-color: rgba(0, 0, 0, 0.3);
    width: 30%;
    height: 8vw;
    float: left;
    font-family: Oswald;
    font-size: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

#panel_money_img {
    width: 7vw;
    height: 7vw;
    margin-right: 0.8vw;
}

#inventory {
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    border-bottom: 2px solid #161616;
}

#inventory_centerer {
    width: 71.6%;
    margin-left: auto;
    margin-right: auto
}

.inventory_item {
    width: 8vw;
    height: 8vw;
    background-color: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    float: left;
    margin-left: 1vw;
    margin-right: 1vw;
    margin-top: 1vw;
    border: 0.6px solid #161616;
}

.item_img {
    margin-top: 1vw;
    margin-left: 2vw;
    margin-right: 2vw;
    background-size: cover;
    width: 4vw;
    height: 4vw;

}

.item_name {
    margin-top: 0.5vw;
    font-size: 1vw;
    text-align: center;
    font-family: Roboto;
}

.item_ammount {
    font-size: 0.9vw;
    text-align: right;
    margin-right: 0.4vw;
    margin-bottom: 0.4vw;
    font-family: sans-serif;
}
/*--------------------------------------------------------------*/

#bottombar { /* Stopka, informacje itd */
    width: 100%;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.5);
    clear: both;
    font-size: 1.5vw;
    font-family: Roboto;
    color: grey;
    display: flex;
    justify-content: center;
    align-items: center;
}