@font-face{
  font-family: "Rubik";
  src: url("/local/fonts/Rubik.ttf") format ("truetype");
}

@font-face{
  font-family: "Piazzolla";
  src: url("/local/fonts/Piazzolla.ttf") format ("truetype");
}

@keyframes fade-in{
    from{opacity:0}
    to{opacity:1}
}
@keyframes fade-out{
    from{opacity:1}
    to{opacity:0}
}


body{
    overflow:auto hidden;
    box-sizing:border-box;
    
    margin:0;
    width:100%;
    height:100%;
    
    font-family:'Rubik', sans-serif;
    user-select: none;
    
    
    opacity:0;
    
}
body.loaded{
    opacity:1;
    animation-timing-function:ease-in;
    animation-iteration-count:1;
    animation-duration:500ms;
    animation-name:fade-in;
}


#_header{
    position:relative;
    width:100%;
    background-color:#5682a3;
    border-bottom:1px solid #ddd;
    padding: 0 7%;
    box-sizing: border-box;
}

#_settings-open{
    position:absolute;
    bottom:20px;
    right:20px;
    width:30px;
    height:30px;
    cursor:pointer;
}

#_settings-open img{
    width:100%;
    height:100%;
}

#_settings > * {
    display:block;
    margin-top:.5em;
}

#_settings-close {
    position:absolute;
    top:2vw;
    right:2vw;
    width:3vh;
    height:3vh;
    margin:0;
    cursor:pointer;
}

#_settings-close > img{
    width:100%;
    height:100%;
}

div.coin{
    background:center/100% 100% no-repeat url("/local/images/coin.png");
    display:inline-block;
}

#_coinswrap{
    box-sizing:border-box;
    margin:auto;
    width:100%;
    text-align:center;
    
    color:#eee;
    font-weight:bold;
    
    font-size:22px;
    line-height:45px;
    padding:15px 0 15px 0;
}

#_coinswrap::first-line{
    font-size:30px;
}

#_coinswrap > span{
    margin:0 2.5vw;
}

#_coinswrap > span > div.coin{
    height:1.4em;
    width:1.4em;
    vertical-align:-.34em;
    margin-right:.3em;
}

#_coinswrap > #_gpsnum{
    font-variant:small-caps;
}

#_wrapper{

    height:calc(100% - 76px);
    box-sizing:border-box;
    padding:0;
    background-color:#e7ebf0;
    display:flex;
}

#_main{
    box-sizing:border-box;
    height:100%;
    
    border:2px solid #dfe5ec;
    border-top-style:none;
    border-bottom-color:#d2dbe3;
    border-radius:0 0 .3em .3em;
    
    background-color:#ffffff;
    
    display:flex;
    flex-wrap:nowrap;
    min-width:93%;
    overflow:auto;
}
#_main{
    margin:0 3.5% 2% 3.5%;
}

#_west{
    flex:0 0 480px;
    min-width:480px;
    box-sizing:border-box;
}

#_west > ul{
    list-style:none;
    overflow-x:hidden;
    overflow-y:scroll;
    
    box-sizing:border-box;
    height:100%;
    width:100%;
    padding:2em 20px 0 20px;
    margin:0;
    
    
    border-right:1px solid #dfe5ec;
    user-select: none;
    position:relative;
}

#_west > ul > *:not(:last-child){
   
    margin-bottom: .5em
}
#_west > ul > #_join{
    text-decoration:none;
    line-height:68px;
    font-size:160%;
    font-weight:bold;
    font-variant:small-caps;
    text-align:center;
    padding-left:calc(4% + 68px);
    background-color:#5682a3;
    margin-bottom:1.2em;
    color:#fff;
    display:block;
}
#_west > ul > *{
    border:1px solid #dfe5ec;
    width:100%;
    height:88px;
    padding:10px 4% 10px 4%;
    box-sizing:border-box;
    
    color:#000;
    
    text-align:right;
    font-size:20px;
    position:relative;
    
    border-bottom:1px solid #dfe5ec;
}
#_west > ul > li.cache{
    display:none;
}
#_west > ul > li.couvert > .pfname{
    filter:blur(4px);
    overflow:hidden;
    position:relative;
    padding-right:4%;
    left:4%;
}
#_west > ul > li.couvert > .pfpic{
    filter:grayscale(1) blur(5px);
    background-color:transparent;
}
#_west > ul > li.couvert > .tooltip{
    display:none !important;
}
#_west > ul > li.couvert > .pfcnt{
    visibility:hidden;
}

#_west > ul > li{
    background-color:#fff;
}
#_west > ul > li:hover{
    background-color:#f2f6fa;
    cursor:pointer;
}
#_west > ul > li.poor, #_west > ul > li.poor:hover{
    background-color:#eee;
}
#_west > ul > li > .tooltip{
    position:absolute;
    display:none;
    left:-1px;
    top:-1.4em;
    width:calc(100% + 2px);
    padding:.2em;
    font-size:80%;
    line-height:140%;
    text-align:center;
    box-sizing:border-box;
    border-radius:5px 5px 0 0;
    background-color:#5682a3;
    color:white;
    pointer-events:none;
}
#_main.desktop #_west > ul > li:hover > .tooltip{
   display:block;
}
#_west > ul > * > .pfpic{
    height:64px;
    width:64px;
    border-radius:100%;
    float:left;
    position:absolute;
    left:4%;
    top:11px;
    background-color:white;
}
#_west > ul > li > div{
    text-align:right;
    line-height:160%;
}
#_west > ul > li > div.pfname{
    font-size:100%;
    font-weight:600;
    position:relative;
    padding-right:4%;
    left:4%;
}
#_west > ul > li > div.pfval{
    font-weight:400;
}
#_west > ul > li > div.pfval::after{
    height:1.1em;
    width:1.1em;
    background:center / 100% 100% no-repeat url(https://game.groyp.net/local/images/coin.png);
    display:inline-block;
    content:"";
    margin-left:.3em;
    vertical-align:-.2em;
}
#_west > ul > li.poor > div.pfval::after{
    filter:grayscale(1)
}
#_west > ul > li > div.pfcnt{
    position:absolute;
    opacity:.2;
    top:0;
    left:2.5em;
    
    line-height:90px;
    font-size:40px;
    font-weight:bold;
    font-family:'Piazzolla',serif;
}


#_centrist{
    flex:1 1 340px;
    min-width:340px;
    background-color:#eee;
    height:100%;
    
    display:flex;
    flex-direction:column-reverse;
    padding: 0 0 4em 0;
    box-sizing:border-box;
    position:relative;
}

#_centrist > * {
    z-index:1;
}

#_background {
    background:0px 0px / auto 30% repeat url("");
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
    z-index:0;
}

#_messages{
    
}

#_gbutton{
    margin:auto;
    width:60%;
    height:80px;
    line-height:80px;
    
    background-color:#5682a3;
    color:#eee;
    font-variant:small-caps;
    font-size:30px;
    box-shadow:0 0 1px 2px transparent;
    
    text-align:center;
}
#_gbutton:active{
    box-shadow:0 0 1px 2px #42637c;
}

#_groyp{
    vertical-align:middle;
    display:inline-block;
}

#_vishnu{
    position:relative;
    text-align:center;
    margin-top:1vh;
}

#_vishnu > div img{
    max-height:30vh;
    width:auto;
}

#_vishnu .naked{
    position:absolute;
    top:0;
    left:0;
}

#_vishnu .naked, #_vishnu .arm{
    
}

#_vishnu .arm{
    position:absolute;
    overflow:visible;
    background-image:url("/local/images/clicking_link");
    background-repeat: repeat-y;
    background-size: contain;
}

#_vishnu .arm img{
    position:absolute;
    width:220%;
    left:-118%;
}

#_east{
    flex:0 0 320px;
    min-width:320px;
    border-left:1px solid #dfe5ec;
}
#_east > .header{
    text-align:center;
    font-variant:small-caps;
    line-height:300%;
    font-weight:bold;
    font-size:200%;
    width:100%;
}
#_upgrades{
    display:flex;
    flex-wrap:wrap;
    justify-content:left;
    padding:0 13px;
    width:100%;
    box-sizing:border-box;
}
#_upgrades > div{
    flex:0 0 88px;
    height:88px;
    margin:0 5px 10px 5px;
    cursor:pointer;
}
#_upgrades > div.delete{
    animation-name:fade-out;
    opacity:0;
}
#_upgrades > div > svg{
    width:100%;
    height:100%;
    border:1px solid black;
    border-radius:5px;
}
#_upgrades > div.poor > svg{
    filter:grayscale(1) brightness(.8) !important;
}
#_upgrades > div > div{
    position:relative;
    width:100%;
    height:0;
}
#_upgrades > div > div > div{
    position:absolute;
    display:none;
    right:85%;
    bottom:-28px;
    padding:1em;
    text-align:center;
    box-sizing:border-box;
    border-radius:15px;
    background-color:#5682a3;
    color:white;
    z-index:1;
    pointer-events:none;
}

#_upgrades > div:hover > div > div{
    display:inline; 
}

.bling{
    position:fixed;
    pointer-events:none;
    color:black;
    font-size:130%;
    font-weight:bold;
    z-index:2;
}

.fade-in{
    animation-name:fade-in;
    animation-duration:500ms;
    animation-timing-function:ease-in;
}

#_landfill{
    width:0;
    height:0;
    overflow:hidden;
    position:fixed;
}

.popupicon{
    display:none;
    position:fixed;
    z-index:3;
}

@media (orientation: portrait) {
    
    .popupicon{
        display:block;
    }
    
    #_wrapper{
        padding:0;
    }
    
    #_upgrades > div > div > div{
        right:5px;
    }
    
    #_main{
        margin:0;
        overflow:hidden;
        width:100vw;
    }
    
    #_main > * {
        flex:0 0 100vw;
        min-width:0;
        position:relative;
    }
}

#_settings{
    display:block;
    position:absolute;
    top:2.5%;
    left:2.5%;
    height:92.5%;
    width:95%;
    padding:1em;
    overflow:hidden auto;
    border:1px solid black;
    border-radius:5px;
    background-color:#f2f6fa;
    color:#000;
    z-index:3;
    box-sizing:border-box;
}

/* tempfix */
@media (orientation: landscape) {
    body.mobile{
        visibility:hidden;
    }
}