body{
        /* https://timelessmoon.getarchive.net/amp/media/wood-desk-wallpaper-backgrounds-textures-bea895 */
        /* https://cdn12.picryl.com/photo/2016/12/31/wood-desk-wallpaper-backgrounds-textures-bea895-1024.jpg */
        background-image: url("images/wood-desk-wallpaper-backgrounds-textures-bea895-1024.jpg");

        background-repeat: no-repeat;
        background-size: cover;
        background-color:  #B43E0E;
        /*         color: #caf0f8; */
        /* margin: 10px; */
        cursor: crosshair;
        overflow-x: unset;
        -webkit-overflow-scrolling: touch;
    }
    header{
        /* i can't with today 12/5/2025 */
        margin: 0%;
        padding: 0%;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: middle;
        font-family: "Jacquarda Bastarda 9", serif;
    }
    header, img{
        display: flex;
        justify-content: start;
        align-items: start;

        height: 62px;
    }
    header a{
        display: flex;
        justify-content: start;
        align-items: start;

        height: 62px;
    }
    header .menuIcon a img{
        display: flex;
        justify-content: end;
        align-items: middle;
        height: 30px;
    }

    main{
        display: flex;
        justify-content: center;
        align-items: center;

        flex-wrap: wrap;
        flex-direction: column;

        margin:auto;
        padding:2em;
    }

    .mainPanel{
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        background-color: rgb(0, 0, 0, 0.5);
        
        outline-color: #a9a9a9;
        outline-style: ridge;
        outline-width: 5px;
        outline-offset: 0;

        color: white;
        margin: 5px;
        /* padding: 3px */
    }
    .mainPanel img{
        height: 325px;
    }
    #mainPlayer, #otherPlayer{
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: column;
        margin: 5px;
    }
    .consoleHolder{
        display: flex;
        justify-content: start;
        align-items: middle;
        flex-wrap: wrap;
        flex-direction: column;
    }
    #hand_2, #hand_1{
        display: flex;
        justify-content: start;
        align-items: center;
        /* flex-wrap: wrap; */
        flex-direction: row;

        width: 450px;
        overflow-x: auto;

        background-color: rgba(199, 255, 125, 0.4);
        outline-color: #a9a9a9;
        outline-style: double;
        outline-width: 5px;
        outline-offset: 0;

        margin: 5px;
        margin-left: 10px;
    }
    #hand_2 img , #hand_1 img{
        padding: 3px;
        height: 250px;
    }
    #hand_2 img:hover, #hand_1 img:hover{
        background-color: yellow;
    }

    #board_1, #board_2{
        display: flex;
        justify-content: center;
        align-items: center;
         /* flex-wrap: wrap; */
        /* flex-direction: row; */
        /* max-width: 400px; */

        background-image: url('images/chest_Tray2.png');
        background-size:contain;
        height: 310px;
        width: 455px;
        
        /* margin: 3px; */

        font-family: "Jacquarda Bastarda 9", serif;
        font-size: 15pt;
    }
    #board_1 .slot:hover, #board_2 .slot:hover{
        background-color: antiquewhite;
    }
    #board_1 {
        transform: rotate(180deg);
    }
    #board_2 .slot{
        height: 75px;
    }

    .row1, .row2, .row3, .row4{
        display: flex;
        display: inline-block;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        /* margin-top: 0px; */
        /* margin-left: 15px; */
        /* margin-right: 20px; */
        margin: 13px;
    }
    .slot{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;

        color: black;
        margin: 0px;
        margin-top: 25px;
        margin-bottom: 20px;
        /* outline-style: double;
        outline-color: white; */

        height: 80px;
        width: 80px;
    }
    .slot img{
        height: 50px;
        width: auto;
        margin:0%;
    }

    .sideDock{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: row;
    }
    .zoomPanel{
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;

        height: 320px;
        width: 630px;
        overflow-y: hidden;
        overflow-x: auto;

        background-color: rgb(255, 125, 0, 0.5);
        outline-color: #a9a9a9;
        outline-style:groove;
        outline-width: 5px;
        outline-offset: 0;

        margin: 10px;
    }
    .zoomPanel img{
        padding: 5px;
        height: 300px;
    }
    .zoomPanel text{
        display: flex;
        display: inline-block;
        flex-wrap: wrap;
        flex-direction: column;
        padding: 3px;
        margin: 5px;

        font-size: 15pt;
        width: 300px;
        height: 150px;
    }
    #buildView{
        display: flex;
        flex-direction: row;
    }

    textarea{
        height: 300px;
        width: 280px;
    }

    #exchangeTable{
        display: flex;

        justify-content: center;
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;

        margin: 3px;
        margin-top: 6px;

        height: auto;
        max-height: 50px;
        width: 100%;
        font-family: "Jacquarda Bastarda 9", serif;
        /* outline-style: double;
        outline-color: #a9a9a9; */
    }
    #eLeft, #eRight{
        display: flex;
        /* justify-content: center; */
        /* align-content: center; */
        flex-direction: row;

        height: auto;
        max-height:50px;
        margin: 3px;
        /* width: 43%; */

        background-color: black;
        color:antiquewhite;
        border-style: double;
        font-family: "Jacquarda Bastarda 9", serif;
        /* background-image: url("https://cdn.iconscout.com/icon/free/png-256/free-upload-file-2-470383.png"); */
    }
    #eRight{
        justify-content: start;
    }
    #eLeft img, #eRight img{
        height: 10px;
        width:auto;
    }

    .pop:hover{
        display              : flex;
        position             : absolute;

        padding              : 5px;
        background           : #f5cf13;
        border               : 1px solid antiquewhite;

        -webkit-border-radius: 20px;
        margin               : 0px;
    }
     *::-webkit-scrollbar {
        width: 10px;
    }
    *::-webkit-scrollbar-track {
        background: #c0c0c0;
    }
    *::-webkit-scrollbar-thumb {
        background-color: #ffd700;
        border-radius: 5px;
        border: 3px double #aa9064;
    }
    
    .primary-button {
        font-family: 'Ropa Sans', sans-serif;
        /* font-family: 'Valorant', sans-serif; */
        color: white;
        cursor: pointer;
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 0.05rem;
        border: 1px solid #0E1822;
        padding: 0.8rem 2.1rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 531.28 200'%3E%3Cdefs%3E%3Cstyle%3E .shape %7B fill: %23FF4655 /* fill: %230E1822; */ %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='shape' points='415.81 200 0 200 115.47 0 531.28 0 415.81 200' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
        background-color: #0E1822;
        background-size: 200%;
        background-position: 200%;
        background-repeat: no-repeat;
        transition: 0.3s ease-in-out;
        transition-property: background-position, border, color;
        position: relative;
        z-index: 1;
    }
    
    .primary-button:hover {
    border: 1px solid #FBC246;
    color: white;
    background-position: 40%;
    }
    
    .primary-button:before {
    content: "";
    position: absolute;
    background-color: #0E1822;
    width: 0.2rem;
    height: 0.2rem;
    top: -1px;
    left: -1px;
    transition: background-color 0.15s ease-in-out;
    }
    
    .primary-button:hover:before {
    background-color: white;
    }
    
    .primary-button:hover:after {
    background-color: white;
    }
    
    .primary-button:after {
    content: "";
    position: absolute;
    background-color: #E05F1D;
    width: 0.3rem;
    height: 0.3rem;
    bottom: -1px;
    right: -1px;
    transition: background-color 0.15s ease-in-out;
    }
    
    .button-borders {
    position: relative;
    width: fit-content;
    height: fit-content;
    }
    
    .button-borders:before {
    content: "";
    position: absolute;
    width: calc(100% + 0.5em);
    height: 50%;
    left: -0.3em;
    top: -0.3em;
    border: 1px solid #0E1822;
    border-bottom: 0px;
        /* opacity: 0.3; */
    }
    
    .button-borders:after {
    content: "";
    position: absolute;
    width: calc(100% + 0.5em);
    height: 50%;
    left: -0.3em;
    bottom: -0.3em;
    border: 1px solid #0E1822;
    border-top: 0px;
        /* opacity: 0.3; */
    z-index: 0;
    }
    
    .shape {
    fill: #0E1822;
    }
        
    
    .jacquarda-bastarda {
        font-family: "Jacquarda Bastarda 9", serif;
        font-weight: 400;
        font-style: normal;
    }

    footer{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:#ffd700;
        font-family: "Jacquarda Bastarda 9", serif;
    }