html, body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, a, article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
    /* Cancel out some differences between browser defaults */
    margin: 0px;
    padding: 0px;
    border: 0px;
    font: inherit;
    vertical-align: baseline;
}

/* Functional Classes */

._hide{
    display: none !important;
}

._greyout{
    filter:grayscale(100%)
}

._noselect{
    filter:opacity(0.1)
}

._menuhover:hover{
    background-color: rgb(27, 27, 27);
    user-select: none;
}

/* Standard text classes */

.descriptortext{
    color:white;
    font-size: 16px;
}

.descriptortext_secondary{
    color:rgb(137, 137, 137);
    font-size: 16px;
}

/* Index */

#index-body{
    width:100%;
    height:100dvh;
    background-color:black;
}

#index-gamewindow{
    width:800px;
    height:600px;

    position: absolute;
    z-index: 100;

    left:50dvw;
    top:45dvh;

    transform:translate(-50%, -50%);
    
    border:10px solid rgb(244, 244, 244);
}


/* = = BOTTOM MENU = = --------------------------------------------------------------------------------------- */


#index-bottom-menucontainer{
    position:absolute;
    left:50dvw;
    top:calc(45dvh + 320px);
    z-index: 50;
    transform:translate(-405px, -10px);
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

#index-bottom-menu{
    width:800px;
    height:130px;

    display: flex;
    flex-direction: row;

    border:5px solid white;
    border-top:none;

    background-color: black;
}

#index-bottom-menuopener{
    width:700px;
    height:30px;

    padding-top:5px;
    color:rgb(122, 122, 122);
    font-size: 15px;
    text-align: center;

}

#index-bottom-menucont{
    height:110px;
}


#index-bottom-buttoncont{
    height:100px;
    width:410px;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;

    justify-content: space-around;
    align-items: center;

    padding:5px;
}


#index-bottom-infocont{
    width: 390px;
    height: 115px;
    margin: 5px;
    margin-top: 5px;

    color:white;
}

.index_bottom_button{
    height: 45px;
    width:202px;

    display:flex;
    flex-direction: row;

    background-color: rgb(255, 255, 255);
}


.index_bottom_buttonicon{
    height: 45px;
    width: 45px;
    flex-shrink:0;

    background-size:450px 450px;
}

.index_bottom_buttontextcont{
    width:100%;
    padding-bottom:6px;
    padding-right:10px;
    padding-left:10px;
}

.index_bottom_buttontext{
    font-size:20px;
}

.index_bottom_buttonprice{
    font-size:12px;
    color:red;
    font-weight: bold;
    text-align:right;
}

#index-bottom-verticaldivide{
    width:2px;
    height:100px;
    background-color:rgb(29, 29, 29);
}




#index-botom-infoconttop{
   display:flex;
    flex-direction: row;

    margin-left:5px;
}

#index-bottom-infoconticon{
    width:40px;
    height:40px;
    margin-right:8px;
    margin-bottom:3px;
    margin-top:10px;

    flex-shrink: 0;

    background-size: 400px 400px;

    filter:drop-shadow(0px 0px 5px white)
}

#index-bottom-infotitle{
    font-size:22px;
    font-weight: bold;
}

#index-bottom-infotext{
    max-height:66px;
    overflow:scroll;
}

#index-bottom-infocontbottom{
    margin-top:7px;
    margin-left: 50px;
    display: flex;
    flex-direction: row;
}



#index-bottom-bottominfostats{
    display: flex;
    flex-direction: row;

    column-gap: 5px;
    margin-left:8px;

    font-size: 16px;
}

.stat_square, .stat_circle, .stat_triange, .stat_star{
    font-weight: bold;
}

.stat_square{
    color:#00FFFF;
}

.stat_circle{
    color:#FFFF00;
}

.stat_triangle{
    color:#FF00FF;
}

.stat_star{
    color:#000000;
}

/* I didn't chose CMYK as a reference to corru.observer, I was gonna use RYB but I already had a red yellow and blue OC */


#index-bottom-arrowbar{
    height:20px;
    

    display:flex;
    flex-direction: row;
}


#index-bottom-titlebar-leftselector, #index-bottom-titlebar-rightselector{
    width:50%;
    color:rgb(122, 122, 122);
    text-align: center;
    
    user-select: none;
}



/* = = LEFT MENU = = ----------------------------------------------------------------*/

#index-left-menucontainer{
    position: absolute;
    z-index: 51;
    top:calc(45dvh);
    transform:translate(-145px, -305px);
    left:calc(50dvw - 454px);

    display:flex;
    flex-direction: row-reverse;
    align-items: center;
}

#index-left-menu{
    border:5px solid white;
    border-right:none;

    background-color: black;

    height: 600px;
    width:150px;

    display:flex;
    flex-direction: column;
}

#index-left-menuopener{
    height:500px;
    width:40px;
    color:rgb(122, 122, 122);
    font-size: 15px;

    display:flex;
    justify-content: center;
    align-items: center;
}

#index-left-buttons{
    flex-grow:10;
    padding-top:15px;
    padding-left:5px;
}

#index-left-horizontaldivide{
    border:4px;
    height:4px;
    width:80%;
    margin-right:20px;

    background-color: rgb(29, 29, 29)
}

#index-left-button{
    height:40px;

    font-size:20px;
    color:white;

    display:flex;
    align-items: center;

    padding-left:5px;
}

#index-left-buttonicon{
    height:25px;
}

#index-left-descriptor{
    height:300px;

    padding:10px;
}

#index-left-about{
    padding:10px;
}




#index-right-menucontainer{
    position: absolute;
    z-index: 51;
    top:calc(45dvh);
    transform:translate(145px, -305px);
    right:calc(50dvw - 454px);

    display:flex;

    align-items: center;
}

#index-right-menu{
    border:5px solid white;
    border-left:none;

    background-color: black;

    height: 600px;
    width:150px;

    display:flex;
    flex-direction: column;

}

#index-right-menuopener{
    height:500px;
    width:40px;
    color:rgb(122, 122, 122);
    font-size: 15px;

    display:flex;
    justify-content: center;
    align-items: center;
}

#index-right-inventoryheader{
    font-size:20px;

    margin-left:15px;
    margin-top:5px;

    color:rgb(122, 122, 122);
}

#index-right-inventorycont{
    max-height:350px;

    margin-left:14px;
    margin-top:10px;

    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 8px;

    overflow-y: scroll;
}

#index-right-invitem{
    height:37px;
    width:37px;
    border-radius: 6px;

    background-size:370px 370px;

    position:relative;
}

.index_right_invcounter{
    position:absolute;

    top: 16px;
    left: 4px;

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: right;
    font-size: 16px;
    font-weight: bold;
    color:black;
    filter:drop-shadow(1px 1px 0px rgb(255, 255, 255)) drop-shadow(-1px -1px 0px rgb(255, 255, 255))
}

#index-right-horizontaldivide{
    border:4px;
    height:4px;
    width:80%;
    margin-left:17px;

    background-color: rgb(29, 29, 29)
}

#index-right-infobox{
    color:white;
    font-size:16px;
    
    padding-left:14px;
    padding-left:14px;
    margin-right:3px;

    color:rgb(137, 137, 137);
}

#index-right-infotitle{
    padding-left:14px;
    font-size: 17px;
    font-weight: bold;
    color:rgb(137, 137, 137);
}

#index-right-bottominfostats{
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;

    margin-left:16px;
    margin-right:20px;
    font-size: 16px;

    margin-bottom:10px;
}

#index-right-bottominfostats p{
    text-align: center;
}

#index-right-bottominfosquare{
    margin-left:4px;
}














#crazutext{
    background: #ff0000;
background: linear-gradient(90deg,rgba(255, 0, 0, 1) 0%, rgba(255, 200, 0, 1) 20%, rgba(77, 255, 0, 1) 37%, rgba(5, 243, 239, 1) 56%, rgba(88, 83, 237, 1) 75%, rgba(195, 0, 255, 1) 91%, rgba(195, 0, 255, 1) 100%);
background-clip:text;
-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-weight: bold;
  text-decoration: none;
}

#crazutext:hover{
    background: linear-gradient(270deg,rgba(255, 0, 0, 1) 0%, rgba(255, 200, 0, 1) 20%, rgba(77, 255, 0, 1) 37%, rgba(5, 243, 239, 1) 56%, rgba(88, 83, 237, 1) 75%, rgba(195, 0, 255, 1) 91%, rgba(195, 0, 255, 1) 100%);
-webkit-background-clip: text;
background-clip:text;
  -webkit-text-fill-color: transparent;
}