body > *{
    line-height:normal;
}
body{
    margin: 0;
    line-height:0;
    background-color:bisque;
}
h1{
    font-size:43px;
    margin-top:0px;
    margin-bottom:10px;
    text-align:center;
}
#allcomplogin{
    display:block;
    position:relative;
}
#overgrid{
    position:absolute;
    display: grid;
    min-width: 560px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
}
#tableview{
    grid-area: 1/1;
    display: table;
    height: 100vh;
    width: 500px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    z-index: 2;
}
#loginBox{
    display: table-cell; 
    vertical-align: middle; 
}
#renderover{
    display:block;
    position:absolute;
    min-width: 560px;
    min-height: 860px;
    width:100vw;
    height:100vh;
    z-index:1;
}
#logCard{
    border-radius: 25px !important;
    border-width: 7px !important;
    border-color: #2A2622 !important;
    background-color:bisque;
    padding-top:0px;
    padding-bottom:0px;
    display:flex;
}
#render{
    z-index:0;
    grid-area: 1/1;
    min-width: 560px;
    min-height: 860px;
    width:100vw;
    height:100vh;
    border:0px;
}
#popic{
    margin-top: 2px;
}

#popbut{
    background-color:bisque;
    color:#2A2622;
    border: 0;
}
.countdown{
    margin-top: 10px;
    padding-left: 5px;
}

.loginput{
    width:500px;
    padding-bottom:0px;
    margin-left:auto;
    margin-right:auto;
    border-style: solid !important;
    border-radius: 8px !important;
    border-width: 7px !important;
    border-color: #2A2622 !important;
    background-color:#2A2622;
    display: flex!important;
    margin-bottom: 20px;
}
.allLine{
    font-size: 40px;
    background-color:#7F7262;
    width: 500px !important;
}
.final{
    margin-bottom: 0;
}
.onleft{
    margin-left: 1px !important;
    width: 416px !important;
}
.lineInput{
    width: 417px;
    float:right;
    height:75px;
    background-color:bisque;
    border-left-style:solid !important;
    display:block !important;
}
.lineIcon{
    border-style:none;
    width: 75px !important;
    height: 75px !important;
    background-color:#2A2622;
    color:bisque;
    border-right-style:solid;
    border-width: 7px !important;
    border-color: #2A2622 !important;
    display:block !important;
    
}
span{
    background-color:#2A2622;
}
.groupbut{
    background-color: transparent;
}
.lineButton{
    border-style:none;
    width: 82px !important;
    height: 75px !important;
    background-color:#2A2622;
    display:block !important;
    color:bisque;
    padding:0px;
    margin:0px;
    
}
.allLine{
    font-size: 40px;
    background-color:#7F7262;
    width: 500px !important;
}
.lineButton:hover{
    background-color:#2A2622;
}
#bgrender{
    position:absolute;
}

.buttonIcon{
    border-right-style:none;
    border-left-style:solid;
    background-color:#7F7262;
    border-width: 7px !important;
    border-color: #2A2622 !important;
}
.createCanvas{
    float:right;
    background-color: bisque;
    width: calc(100vw - 277px);
    min-width:200px;
    border-left: #2A2622;
    border-left-width: 7px;
    border-left-style: solid;
    height: 100vh;
    min-height:700px;
    overflow-y:scroll;
    overflow-x: scroll;
    scrollbar-width:none;
    display:flex;
        position:relative;

}
.leftsidecreate{
    height:100vh;
    background-color: bisque;
    display:inline-block;
    width:270px;
    min-height:700px;
}
.maincanv{
    display:block;
    min-width:477px;
}
.controlPenal{
    background-color: bisque;
    width: 270px;
    height:260px;
    position:relative; 
}
.colorPicker{
    background-color: bisque;
    width: 270px;
    height: calc(100vh - 277px);
    min-height:423px;
    border-bottom: #2A2622;
    border-bottom-width: 7px;
    border-bottom-style: solid;
    overflow: hidden;
    overflow-y:scroll;
    scrollbar-width: thin;
    scrollbar-color: #2A2622 bisque;
}
.selectcolor{
    height: 120px;
    width: 220px;
    margin: auto;
    margin-top: 20px;
    border-radius: 25px;
    border-width: 7px;
    border-style:solid;
    padding-top: 7px;
    border-color: #2A2622;
    margin-bottom: 20px;
}
p{
    margin: 0%;
}
.buttonIcon:hover{
    background-color:#2A2622;
}
.addcolor{
    height: 127px;
    width: 220px;
    margin: auto;
    margin-top: 20px;
    border-style: dashed;
    border-radius: 25px;
    border-width: 7px;
    margin-bottom: 20px;
    border-color: #7F7262;
}
.addcolor:hover{
    border-style:solid;
    border-color: #2A2622;
}
.addcolor:hover #add{
    color: #2A2622;
}
#add{
    width: 100px !important;
    height: 100px !important;
    color: #7F7262;
    margin-left:60px;
    margin-right:60px;
    margin-top:10px;
}
.mark{
    display: inline;
    margin-left: 7px;
    font-size: 30px;
}
.colorButton{
    width: 134px !important;
    height: 30px !important;
    margin-left: 7px;
    font-size: 15px;
    border-radius: 10px;
    border-width: 4px;
    border-style:solid;
    margin-top: 7px;
    border-color: #2A2622;
    color:bisque;
    background-color: #7F7262;
}
.colorButton:hover{
    background-color: #2A2622;
}
.ui{
    width:145px;
    display: inline;
}
.colpre{
    float: inline-start;
    width:58px;
    overflow: hidden;
    margin-left:7px;
    height:105px;
    border-radius: 10px;
    border-width: 4px;
    border-style:solid;
    display: inline;
    margin-bottom:px;
    border-color: #2A2622;
}

.color{
    height: 127px !important;
    width: 220px;
    margin: auto;
    background-color:#2A2622;
    margin-top: 20px;
    border-radius: 25px;
    border-width: 7px;
    border-style:solid;
    border-color: #2A2622;
    padding-bottom:0px;
    overflow:hidden;
}
.listcolorname{
    margin-top:0px;
    padding-top: 10px;
    margin-bottom: 8px;
    margin-left: 11px;
    color:#2A2622;
    font-size: 19px;
    text-transform: uppercase;
}
.colorinlist{
    width:90px !important;
    margin-top:0;
    margin-bottom:10px;
    margin-left: 8px;
}
.panelleftcolor{
    width:106px;
    background-color:bisque;
    border-right-width: 7px;
    border-right-color:#2A2622;
    border-right-style: solid;
    display: block;
    height: 127px;
}
.panelchangecolor{
    padding-top: 7px;
    height: 120px;
    width: 220px;
    visibility: visible;
    background-color: bisque;
}
.smalltop{
    height: 40px;
    margin-left:0px;
    border-radius: 0px;
    border-width: 0px;
    border-bottom-width: 4px;
}

.smallmid{
    height: 18px;
    margin-left:0px;
    border-radius: 0px;
    border-width: 0px;
    background-color: bisque;
    border-bottom-width: 4px;
}
.arrow{
    margin-left: 19px;
}

.panelright{
    margin-top:63px;
    background-color: #2A2622;
    float:right;
    width:107px;
    height:64px;
    padding-top:10px;
    display: none;
}
.panelright p{
    color:bisque;
    text-align:center;
    font-size:20px;
}

.cvgrid{
    display:table-cell;
    margin: 0;
    width:15vh;
    height:15vh ;
    background-color: #2A2622;
}

.canmove{
    min-height:100%;
    min-width:100%;
    display: grid;
    position:absolute;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    background-color: bisque;
}
.cancenter{
    grid-area: 1/1;
    margin-left:auto;
    margin-right:auto;
    display:table;
    position:relative;
    border-style: solid;
    border-color: #2A2622;
    border-width: 5%;
    background-color: #2A2622;
}

#buttonrow{
    grid-area: 1/1;
    display:flex;
    margin-bottom:90vh;
}
#buttonrow .groupbut{
    display:flex;
    
}
#buttonrow .groupbut span{
    width:7.5vh;
    background-color: transparent;
    height:7.5vh;
    display:flex;
}
.groupbut{
    background-color: transparent;
}
#buttoncol{
    grid-area: 1/1;
    margin-right:90vh;
}
#buttoncol .groupbut span{
    background-color: transparent;
    width:7.5vh;
    height:7.5vh;
    display:flex;
}
.innercolor{
    margin-left: 2%;
    margin-top: 2%;
    width:96%;
    height:96%;
}
.buttoncanv{
    color:#7F7262;
    width:100% !important;
    height:100% !important;
}
.buttoncanv:hover{
    color:#2A2622 !important;
}
.controlcont{
    width:240px;
    margin:auto;
    background-color:#2A2622;
    border-radius:10px;
    margin-top:10px;
    font-size:20px;
    color:bisque;
    
}
.controlcont p{
    display:inline;
}
.controlcont{
    width:240px;
    margin:auto;
    background-color:#2A2622;
    border-radius:10px;
    margin-top:10px;
    font-size:20px;
    color:bisque;
    height:30px;
}
.controlcont p{
    display:inline-block;
    margin-top:3px;
    margin-inline-start:10px;
}
#eraseron{
    width:233px;
    margin:auto;
    background-color:#2A2622;
    border-style: solid;
    border-color: #2A2622;
    border-width: 3.5px;
    border-radius:10px;
    margin-top:10px;
    font-size:20px;
    color:bisque;
    height:23px;
    overflow:hidden;
}
#eraserleft {
    display:inline-flex;
    padding-left:6px;
    width:60px;
    background-color:#2A2622;;
}
#eraserright {
    display:inline-flex;
    padding-right:6px;
    width:60px;
    float: right;
    background-color:#2A2622;;
}

.controlbutton{
    width:90px !important;
    height: 30px !important;
    margin-left: 7px;
    font-size: 15px;
    border-radius: 10px;
    border-width: 4px;
    border-style:solid;
    margin-top: 7px;
    border-color: #2A2622;
    color:bisque;
    background-color: #7F7262;
}
.controlbutton:hover{
    background-color: #2A2622;
}
.controlbutton{
    width:112.5px !important;
    height: 40px !important;
    margin-left: 15px;
    font-size: 15px;
    border-radius: 10px;
    border-width: 4px;
    border-style:solid;
    margin-top: 10px;
    border-color: #2A2622;
    color:bisque;
    background-color: #7F7262;
}
.controlbutton:hover{
    background-color: #2A2622;
}
.controlline{
    width:240px !important;
}
.all{
    display:flex;
    position:relative;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
}
.distance{
    width:100vw;
    min-width:477px;
    height:100vh;
    display:none;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    position:absolute
}
#savepanel{    
    display:none;
    width:430px;
    min-height:255px;
    vertical-align:center;
    border-radius: 30px;
    border-width: 10px;
    border-style:solid;
    border-color: #2A2622;
    background-color: bisque;
}
.saveconfirm{    
    display:none;
    width:430px;
    min-height:255px;
    vertical-align:center;
    border-radius: 30px;
    border-width: 10px;
    border-style:solid;
    border-color: #2A2622;
    background-color: bisque;
}
.savequit{    
    display:none;
    width:430px;
    min-height:255px;
    vertical-align:center;
    border-radius: 30px;
    border-width: 10px;
    border-style:solid;
    border-color: #2A2622;
    background-color: bisque;
}
#submit{    
    display:none;
    width:430px;
    min-height:255px;
    vertical-align:center;
    border-radius: 30px;
    border-width: 10px;
    border-style:solid;
    border-color: #2A2622;
    background-color: bisque;
}

.submitconfirm{    
    width:430px;
    min-height:255px;
    vertical-align:center;
    border-radius: 30px;
    border-width: 10px;
    border-style:solid;
    border-color: #2A2622;
    background-color: bisque;
}
.submitconfirm .savebutton{    
    width:380px !important;
}
#savepanel h1{
    margin-top:2VH;
    margin-bottom:2vh;
    font-size:50px;
}
#savepanel h1{
    margin-top:2VH;
    margin-bottom:2vh;
    font-size:50px;
}
.submitconfirm h1{
    margin-top:2VH;
    margin-bottom:2vh;
}
#submit h1{
    margin-top:2VH;
    margin-bottom:2vh;
}
.savebutton{
    width: 177px !important;
    height: 60px !important;
    margin-left: 25px;
    border-radius: 10px;
    border-width: 7px;
    border-style:solid;
    margin-top: 15px;
    margin-bottom: 15px;
    padding:0px;
    border-color: #2A2622;
    color:bisque;
    background-color: #7F7262;
    font-size:30px;
}
.saveconfirm h1{
    margin-top:2vh;
    margin-bottom:2vh;
}
.saveconfirm h1{
    margin-top:2VH;
    margin-bottom:2vh;
}
.savequit h1{
    margin-top:2VH;
    margin-bottom:2vh;
}
.saveconfirm .savebutton{
    margin-top:2VH;
    margin-bottom:2vh;
    width:380px !important;
}
#submit .savebutton{
    margin-top:2VH;
    margin-bottom:2vh;
}
.savebutton:hover{
    background-color: #2A2622;
}

#profile{
    background-color:#2A2622;
    height:100vh;
    min-height:800px;
    display:inline-block;
    width:200px;
}
#dash{
    display: inline-block;
    position: absolute;
    z-index:1;

}

#boardheader{
    width:calc(100vw - 200px);
    height:100px;
    min-width:1020px;
    display:inline-flex;
    position:relative;

    border-bottom-color:#2A2622;
    border-bottom-style:solid;
    border-bottom-width:7px;
    background-color:bisque;
    z-index:10;
}

#profpic{
    width:60%;
    height:calc(200px*0.6);
    border-color:#7F7262;
    border-style:solid;
    margin:auto;
    margin-top:25px;
    border-radius:100%;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    background-color:bisque;
    border-width:4px;
    overflow:hidden;
    display:grid;
    position:relative;
}
#profpic img{
    width:100%;
    height:calc(200px*0.6);
    margin:auto;
    background-color:#2A2622;
    border-radius:100%;
    position:absolute;
}
#profpic:hover > #imgfil{
    margin-top:50%;
    transition: margin-top 0.5s ease 0s;
}
#imgfil{
    margin-top:130%;
    transition: margin-top 0.5s ease 0s;
    width:100%;
    height:calc(50% - 8px);
    background-color:#2A2622;
    border-color:#2A2622;
    z-index:4;
    border-top-style:solid;
    border-top-width:8px;
    grid-area: 1/1;
}

#imgfil p{
    color:bisque;
    width:65%;
    font-size:18px;
    margin:auto;
    text-align:center;
}

#profusername{
    margin-top:29px;
    margin-bottom:29px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    height:60px;
    line-height: 60px;
    display:block;    
    width:calc(80% + 8px);
    margin:auto;
    text-align: center;
}
#profusername p{
    word-break:break-word;
    white-space: normal;
    color:bisque;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    text-align:left;
}
#nameicon{
    color:bisque;
    font-size:18px;
    bottom:0;
}
#namedisplay{
    max-width:calc(80% + 8px);
    color:bisque;
    font-size:18px;
    margin-left:auto;
    margin-right:auto;
}

#centericon{
    vertical-align:middle;
    height:18px;
    display:inline-block;
    margin-bottom:5px;
}
#displayscore{
    width:80%;
    height:109px;
    border-color:#7F7262;
    border-style:solid;
    border-width:4px;
    background-color:bisque;
    margin:auto;
    border-radius:10px;
    margin-bottom:20px;
    overflow:hidden;
}
#rankingcontrol{
    clip-path: xywh(0px 0px 100% 400% round 10px);
    width:calc(80% + 8px);
    margin:auto;
    padding:0;
    border-width:4px;
}
#showspan{
    width:calc(31% - 2px);
    height:100%;
    border-color:#7F7262;
    border-style:solid;
    border-radius:10px;
    font-size:16px;
    display:inline-block;
    background-color:bisque;
    padding-left:2px;
    padding-bottom:2px;
    border-top-right-radius:0px;
    border-bottom-right-radius:0px;
    border-width:4px;
    border-right-width:0px;
}
#showbut{
    display:inline-block;
    border-top-left-radius:0px !important;
    border-bottom-left-radius:0px !important;
    text-align:center;
    font-size:16px;
    border-top-right-radius:10px ;
    border-bottom-right-radius:10px ;
    z-index:1;
    padding-bottom:2px;
    border-color:#7F7262;
    border-style:solid;
    background-color:#7F7262 !important;
    width:100% !important;
    color:bisque;
    border-width:4px;

}
#selectpanelprof{
    width:calc(69% - 4px);
    position:relative;
    display:inline-flex;
    
}
.innercontent span{
    border-top-left-radius:0px !important;
    border-bottom-left-radius:0px !important;
    text-align:center;
    border-color:#7F7262;
    border-style:solid;
    font-size:13px;
    border-width:3px!important;
    display:block;
    background-color:bisque;
    border-bottom-width:0px !important;
    width:calc(100% - 6px) !important;
}
.innercontent span:hover{
    background-color:#7F7262;
    color:bisque;
}
#profselectfirst{
    border-top-width:12px!important;
}
#profselectend{
    border-bottom-width:3px!important;
    border-bottom-right-radius:10px !important;
    border-bottom-left-radius:10px !important;
}
.innercontent{
    position:absolute;
    width:100%;
    bottom:-0%;
    transition: bottom 0.5s ease 0s;
}
#rankingcontrol:hover>#selectpanelprof>.innercontent{
    bottom:-196%;
    transition: bottom 0.5s ease 0s;
}

#ranking{
    width:80%;
    height: calc(100% - 480px);
    border-color:#7F7262;
    border-style:solid;
    border-width:4px;
    background-color:bisque;
    margin:auto;
    border-radius:10px;
    margin-top:20px;
    margin-bottom:20px;
    overflow:hidden;
}
#catagory{
    display:inline-block;
    background-color:bisque;
    width:592px;    
}
.dashbutrow{
    width:5;
}
.dashbutrow span{
    display:inline-block;
    color:bisque;
    background-color:#7F7262;
    border-color:#2A2622;
    border-style:solid;
    border-width:4px;
    margin-left:14px;
    border-radius:10px;
    padding-top:2.5px;
    padding-bottom:2.5px;
    font-size:20px;
    text-align:center;
    height:25px;
    margin-top:8.5px;
    width:170px !important;
}
.dashbutrow span:hover{
    background-color:#2A2622;
}
#sort{
    display:inline-block;
    border-left-style:solid;
    border-left-color:#2A2622;
    border-left-width:4px;
    border-right-style:solid;
    border-right-color:#2A2622;
    border-right-width:4px;
    background-color:bisque;
    width:200px;
    min-width:135px;
    height:100%;    
}

#sortcell{
    
    z-index:0;
    display:block;
    margin-top:8.5px;
    width:80%;
    margin-left:10%;
    border-radius:10px;

    background-color:#2A2622;
}

#top{
    text-align:center;
    background-color:bisque;
    z-index: -0 !important;
    margin:auto;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    padding-bottom:5px;
    font-size:30px;
    border-style:solid;
    border-color:#2A2622;
    border-width:4px; 
}

#outter{
    position:relative;
    display:block;
    width:100%;
    background-color:green;
    color:bisque;
}

#bottom{
    position:absolute;
    display:inline-block;
    clip-path: xywh(0px 0px 100% 600%);
    z-index:2;
    display:block;
    border-bottom-left-radius:10px;
    background-color:#2A2622;
    width:calc(100% - 34px);
}
#sortnow{ 
    border-bottom-style:solid;
    border-bottom-color:#2A2622;
    border-bottom-width:4px;
    border-left-style:solid;
    border-left-color:#2A2622;
    border-left-width:4px;
    text-align:center;
    display:inline-block;;
    border-bottom-left-radius:10px;
    font-size:22px;
    height:30px;
    width:calc(100% - 8px);
    pointer-events: auto;
    background-color:#7F7262;   
}
#bottom .innercontent{
    z-index:-1;
    border-color:#2A2622 !important;
    bottom:10%;
    transition: bottom 0.5s ease 0s;
    width:calc(100%);
}

#bottom .innercontent span{
    z-index:-1;
    font-size:16px;
    border-width:4px!important;
    border-bottom-width:0px !important;
    padding-bottom:2px;
    border-color:#2A2622 !important;
    bottom:10%;
    transition: bottom 0.5s ease 0s;
    width:calc(100% - 8px) !important;
}
#bottom:hover > .innercontent{
    bottom:-288%;
    transition: bottom 0.5s ease 0s;
}

#listcontent span{
    color:#2A2622;
      border-color:#2A2622 !important;
}
#listcontent span:hover{
    color:bisque;
    background-color: #7F7262 !important;
}
#bottom .innercontent #cataselectfirst{
    border-top-width:14px!important;
}
#bottom .innercontent #cataselectend{
    border-bottom-width:4px!important;
    border-bottom-right-radius:10px !important;
    border-bottom-left-radius:10px !important;
}
#orderbutt .lineIcon{
    display:flex;
    background-color: #7F7262 !important;
    border-width:0!important;
    height:30px !important;
    width:30px !important;
}
#orderbutt {
    display:inline-flex;
    float:right;
    overflow:hidden;
    
    border-right-style:solid;
    border-right-color:#2A2622;
    border-right-width:4px;
    border-bottom-right-radius:10px !important;
    border-bottom-style:solid;
    border-bottom-color:#2A2622;
    border-bottom-width:4px;
    position:absolute;
    margin-left:126px;
    height:30px !important;
    width:30px !important;
}
#orderbutt .lineIcon:hover{
    background-color: #2A2622 !important;

}
#space{
    width:100vw;
    height:100vh;
    min-height:500px;
    min-width:1000px;
    display:none;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    position:absolute
}

#usernc{    
    padding-top:10px;
    display:none;
    z-index:2;
    width:430px;
    min-height:255px;
    vertical-align:center;
    border-radius: 30px;
    border-width: 10px;
    border-style:solid;
    border-color: #2A2622;
    background-color: bisque;
}
#usernameconfirm{    
    z-index:2;
    padding-top:10px;
    display:none;
    width:430px;
    min-height:255px;
    vertical-align:center;
    border-radius: 30px;
    border-width: 10px;
    border-style:solid;
    border-color: #2A2622;
    background-color: bisque;
}
#userpp{    
    padding-top:10px;
    display:none;
    width:430px;
    min-height:255px;
    vertical-align:center;
    border-radius: 30px;
    border-width: 10px;
    border-style:solid;
    z-index:2;
    border-color: #2A2622;
    background-color: bisque;
}
#ppconfirm{    
    z-index:2;
    padding-top:10px;
    display:none;
    width:430px;
    min-height:255px;
    vertical-align:center;
    border-radius: 30px;
    border-width: 10px;
    border-style:solid;
    border-color: #2A2622;
    background-color: bisque;
}
#usernameconfirm .savebutton{
    margin-left:125px !important;
}
#userpp .addcolor{
    width:300px;
}
#userpp .addcolor:hover{
    border-color:#7F7262;
    border-style:dashed;
}

#board{
    background-color: bisque;
    width: calc(100vw - 200px);
    min-width:1020px;
    min-height:693px;
    height:calc(100vh - 107px);
    overflow:hidden;
    overflow-y:scroll;
    scrollbar-width: thin;
    scrollbar-color: #2A2622 bisque;
}
#rightside{
    display:inline-block;
    position:absolute;
}
#detailspace{
    display:none;
}
.widthresizable{
    border-style: ridge;
    border-width: 7px;
    border-color: #7F7262;
    display:block;
    position:absolute;
    margin:auto;
    bottom:0;
    width:70%;
    transition: width 0.5s ease 0s;
    float:center;
    left: 0; 
    right: 0; 
    z-index:1;
    margin-left: auto; 
    margin-right: auto;
}
.widthresizable:hover{
    width:calc(100% - 14px);
    transition: width 0.5s ease 0s;
}
.heightresizable{
    z-index:1;
    border-style: ridge;
    border-width: 7px;
    border-color: #7F7262;
    display:block;
    margin:auto;
    position:absolute;
    bottom:0;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    height:calc(80%/1.65*1.5);
    transition: height 0.5s ease 0s;

}
.singleshelf{
    margin:auto;
    padding-bottom:10px;
    width:93%;
}
.heightresizable:hover{
    height:calc(100% - 14px);
    transition: height 0.5s ease 0s;
}
.top3d{
    position:relative;
    display:block;
    width:90%;
    margin:auto;

    background-image: linear-gradient();

}
.shelfspace{
    position:relative;
    display:inline-block;
    width:25%;
    height:calc(max(1020px,(100vw - 200px))*0.8/4*1.5);
}
.buttom3d{
    display:block;
    width:90%;
    height:40px;
    margin:auto;
    margin-bottom:40px;
    background-color:#2A2622;
}
.surface {
	border-bottom: 30px solid #555;
	border-left: 30px solid transparent;
	border-right: 30px solid transparent;
	height: 0;
	width: calc(100% - 60px);
    bottom:0;
    z-index:0;
    position:absolute;
}

#detail{
    width:100vw;
    height:100vh;
    min-width: 1220px !important;
    min-height: 800px !important;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    position:absolute;
    z-index:15;
    display: none;
}
#visiting #detail{
    min-width: 1020px !important;
}
#puzzlepenleft{
    overflow:hidden;
    display:inline-block;
    position:relative;
    display:none;
    height:430px;
    vertical-align:center;
    border-radius: 30px;
    border-width: 10px;
    border-style:solid;
    border-color: #2A2622;
    background-color: #2A2622;
}
#imageleft img{
    height:430px;
}
#imageleft{
    height:430px;
    display:inline-block;
    border-right-width: 10px;
    border-right-style:solid;
    border-right-color: #2A2622;
}
#contentright{
    height:430px;
    float:right;
    width:400px;
    background-color:#2A2622;
}

.title{
    display:block;
    width:400px;
    height:80px;
    line-height: 80px;
    background-color:#2A2622 ;
    border-bottom-width: 10px;
    border-bottom-style:solid;
    border-bottom-color: #2A2622;
}
.titletext {
    border-left-color:#2A2622;
    border-left-style:solid;
    border-left-width:10px;
    border-right-color:#2A2622;
    border-right-style:solid;
    border-right-width:10px;
    word-break:break-word;
    white-space: normal;
    width:380px;
    color:bisque;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    text-align:center;
}
.detailbutton{
    width: 140px !important;
    height: 50px !important;
    margin-left: 40px;
    bottom:0px;
    border-radius: 10px;
    border-width: 7px;
    border-style:solid;
    margin-top: 15px;
    margin-bottom: 15px;
    padding:0px;
    border-color: #2A2622;
    color:bisque;
    background-color: #7F7262;
    font-size:25px;
}
.detailbutton:hover{
    background-color: #2A2622;
}
.puzzledes{
    display:block;
    width:362px;
    border-radius: 10px;
    border-width: 7px;
    border-color: #2A2622;
    font-size:18px;
    padding-top:2px;
    padding-bottom:2px;
    overflow-y:scroll;
    padding:2px;
    border-style:solid;
    height:105px;
    margin-left:10px;
    margin-top:15px;
    word-break:break-word;
    white-space: normal;
}
.author img{
    height:40px;
}
.author span{
    border-style: solid;
    border-width: 7px;
    border-color: #2A2622;
    height:40px;
    border-radius:100px;
    overflow:hidden;
    display:inline-block;
    vertical-align:middle;
}
.author p{
    font-size:16px;
    max-width:136px;
    color:bisque;
    margin-top:auto;
    word-break:break-word;
    white-space: normal;
    line-height: 1;
    top:20px;
    display: inline-block;
    vertical-align:middle;
    text-align:left;
}
.author{
    padding-right:15px;
    height:54px !important;
    background-color:#2A2622 !important;
    border-radius:100px;
    overflow:hidden;
    display:inline-block;
    margin-top:10px; 
    margin-left:10px;
    max-width:190px;
}
.like{
    float:right;
    margin-right:10px;
    display:block;
    width:45px;
    height:44px;
    background-color:#2A2622 !important;
    text-align:center;
    border-radius:10px;
    overflow:hidden;
    margin-top:10px; 
    border-color:#2A2622;
    border-width:5px;
    border-style:solid;
}
.likeicon:hover{
    color:#2A2622 !important;
}
.like span{
    font-size:19px;
    color:bisque;
}
.likeicon{
    display:block !important;
    width:45px !important;
    color:#7F7262;
    background-color:bisque;
}
.titledate{
    float:right;
    margin-right:10px;
    height:49px !important;
    background-color:#2A2622 !important;
    text-align:center;
    border-radius:100px;
    overflow:hidden;
    width:100px !important;
    margin-top:10px; 
    padding-top:5px; 
}
.titledate p{
    margin-top:2px; 
    color:bisque;
}

.stat{
    display:block;
    width:380px;
    height:40px;
    background-color:#2A2622 !important;
    text-align:center;
    border-radius:100px;
    overflow:hidden;
    margin-top:5px; 
    padding-top:10px; 
    margin-left:10px;
}
.stat span{
    color:bisque;
    font-size:25px;
    background-color:#2A2622 !important;
}
.score{
    display:inline-block;
    width:calc(50% - 3px);
    border-right-color:bisque;
    border-right-width:6px;
    border-right-style:solid;
}
.started{
    display:inline-block;
    width:calc(50% - 3px);
}
.nottitle{
    display:block;
    width:100%;
    background-color:bisque;
}
#puzzlepentop{
    overflow:hidden;
    display:inline-block;
    position:relative;
    display:none;
    width:400px;
    vertical-align:center;
    border-radius: 30px;
    border-width: 10px;
    border-style:solid;
    border-color: #2A2622;
    background-color: #2A2622;
}
#imagetop img{
    width:400px;
}
#imagetop{
    width:400px;
    display:block;
    border-bottom-width: 10px;
    border-bottom-style:solid;
    border-bottom-color: #2A2622;
}
#contentbottom{
    width:400px;
    background-color:#2A2622;
}
.divtitle span{
    display:block;
    width:100% !important;
    text-align:center;
    font-size:19px;
    color:bisque
}
.spaninfo{
    border-right-width: 4px;
    border-right-style:solid;
    border-right-color: #7F7262;
    display:inline-block;
    width:calc(70% - 4px) !important;
    text-align:center;
    font-size:14px;
    color:bisque;
}
.spandata{
    display:inline-table;
    width:30% !important;
    text-align:center;
    font-size:14px;
    background-color:bisque;
}
#displayscore div{
    font-size: 0;
    display:block;
    padding-top:0;
    border-bottom-width: 4px;
    border-bottom-style:solid;
    border-bottom-color: #7F7262;
}
#searchbar{
    height:50px !important;
    margin-top:21px;
    margin-left:10px;
    min-width:calc(1020px - 592px - 208px - 62px - 20px);    
    padding-bottom:0px;
    border-style: solid !important;
    border-radius: 8px !important;
    border-width: 4px !important;
    border-color: #2A2622 !important;
    background-color:#2A2622;
    overflow:hidden !important;
    display: inline-flex!important;
}
#searchbar .lineInput{
    min-width:calc(1020px - 592px - 208px - 62px - 20px);
    height:50px;
    width:calc(100vw - 592px - 200px - 208px - 62px - 20px);
}
#searchbar span{
    height:0 !important;
}
#searchbar .lineButton{
    background-color:#7F7262;
    height:50px !important;
    width:50px !important;
    border-left-width: 4px;
    border-left-style:solid;
    border-left-color: #2A2622;
}

#searchbar .lineButton:hover{
    background-color:#2A2622;
}
.innerbottom3d{
    display:block;
    padding-top:5px;
    height:30px;
    margin:auto;
    width:93%;
    padding-bottom:5px;
    background-color:#2A2622;
}
.frametitle{
    display:inline-block;
    width:25%;
    height:30px;
}
.spacetitle{
    display:block;
    width:90%;
    height:30px;
    background-color:#555;
    margin:auto;
    line-height: 30px;
    padding:0;
}
.shelftitle{
    word-break:break-word;
    white-space: normal;
    width:100%;
    color:bisque;
    line-height: 1;
    display:inline-table;
    text-align:center;
    vertical-align:middle;
    margin-top: -3px;
}
.allLinesave{
    font-size:25px !important;
    width:380px !important;
}
#imageinput{
    display:none;
}
#imagenewprof{
    display:block;
    max-width:380px;
    max-height:380px;
}

#imagesection{
    display:flex;
    width:fit-content;
    margin:auto;
    border-color:#2A2622;
    background-color:#2A2622;
    border-style:solid;
    overflow:hidden;
    border-width:7px;
    padding-bottom:0px;
    border-radius:10px;

}
.ReactCrop__crop-selection {
    outline:0px !important;
    border-color:#7F7262;
    border-style:solid;
    border-width:7px;
}
.ReactCrop__drag-handle {
    opacity:1!important;
    border-color:#7F7262 !important;
    background-color:#2A2622 !important;
}
.ReactCrop__crop-selection::after{
    border-width:0px !important;
}
.ReactCrop__crop-mask rect{
    fill-opacity:0.8 !important;
    width: 400px !important;
    height: 400px !important;
}
#rankingtype{
    display:flex;
    width:160px;
}
#rankingtype span{
    padding-top:3.5px;
    text-align:center;
    display:inline-block;
    width:calc(50% - 1px);
    background-color:bisque;
    font-size:11px;
    height:16.5px;
    border-bottom-color:#7F7262;
    border-bottom-style:solid;
    border-bottom-width:2px;
}
#rankingtype :first-child{
    border-right-color:#7F7262;
    border-right-style:solid;
    border-right-width:2px;
}
#rankingtype span:hover{
    color:bisque;
    background-color:#2A2622;
}
#rankinglabel{
    display:flex;
    width:160px;
}
#rankinglabel span{
    padding-top:1px;
    text-align:center;
    display:inline-block;
    width:24px ;
    color:bisque;
    background-color:#2A2622;
    font-size:7px;
    height:10px;
    border-bottom-color:#7F7262;
    border-bottom-style:solid;
    border-bottom-width:2px;
    border-left-color:#7F7262;
    border-left-style:solid;
    border-left-width:2px;
}
#rankinglabel :first-child{
    width:82px;
    border-left-width:0px;
}

.rankingimg{
    width:14px;
    background-color:#2A2622;
    border-color:#7F7262;
    border-style:solid;
    border-width:2px;
    border-radius:100%;
}
.rankingimgspace{
    display:inline-flex;
    margin-top:2px;
    margin-left:22px;
    margin-right:2px;
    margin-bottom:2px;
    background-color:transparent;
}
.nameinranking{
    color:bisque;
    text-align:center;
    margin-top:2px;
    border-color:#7F7262;
    border-style:solid;
    border-width:2px;
    border-radius:5px;
    position:absolute;
    height:12px;
    display:inline-block;
    width:380px;
    color:bisque;
    line-height: 12px;
    height:14px;
    width:38px !important;
}

.nameinranking p{
    word-break:break-word;
    white-space: normal;
    color:bisque;
    line-height: 1;
    display: inline-flex;
    vertical-align: middle;
    text-align:center;
}
.scoreinranking{
    color:bisque;
    text-align:center;
    margin-top:3px;
    margin-left:44px;
    border-radius:5px;
    position:absolute;
    vertical-align:middle;
    padding-top:3.5px;
    height:12.5px;
    display:inline;
    font-size:8px;
    width:20px;
}
.createdinranking{
    margin-left:70px;
    color:bisque;
    text-align:center;
    margin-top:3px;
    border-radius:5px;
    position:absolute;
    vertical-align:middle;
    padding-top:3.5px;
    height:12.5px;
    display:inline;
    font-size:8px;
    width:20px;
}
.rankingelement{
    height:22px;
    background-color:bisque;
    border-bottom-color:#7F7262;
    border-bottom-style:solid;
    border-bottom-width:2px;
}
.rankingelement:hover{
    background-color:#2A2622;
}
.rankingelement:hover > .indexinranking{
    color:bisque;
}
.completedinranking{
    margin-left:96px;
    color:bisque;
    text-align:center;
    margin-top:3px;
    border-radius:5px;
    position:absolute;
    vertical-align:middle;
    padding-top:3.5px;
    height:12.5px;
    display:inline;
    font-size:8px;
    width:20px;
}
.indexinranking{
    display:inline;
    position:absolute;
    width:18px;
    font-size:8px;
    background-color:transparent;
    margin-top:6.5px;
    margin-left:2px;
    text-align:center;
}
#rankingcontent{
    position:relative;
    display:block;
    overflow:hidden;
    height:calc(100% - 33px);
    overflow:scroll;
    scrollbar-width:none;
    border-bottom-left-radius:5px !important;
    border-bottom-right-radius:5px !important; 
    padding-bottom:0px!important;
}
.moredown{
    display:flex;
    bottom:0;
    background-color:bisque;
    border-bottom-left-radius:5px;
    height:24px!important;
    border-bottom-right-radius:5px; 

}
.moredown :first-child{
    margin-left:66px;
    height:22px!important;
}
.moredown:hover{
    color:bisque!important;
    background-color:#2A2622;
}
.moreup{
    display:flex;
    bottom:0;
    background-color:bisque;
    border-bottom-color:#7F7262;
    border-bottom-style:solid;
    border-bottom-width:2px;
    height:22px!important;

}
.moreup :first-child{
    margin-left:66px;
    height:22px!important;

}
.moreup:hover{
    color:bisque !important;
    background-color:#2A2622;
}
.logbut{
    position:absolute;
    bottom:0;
    margin-bottom:20px;
    height:25.5px;
    border-color:#7F7262;
    color:#2A2622;
    border-style:solid;
    border-width:4px;
    text-align:center;
    width:160px;
    margin-left:16px;
    border-radius:10px;
    background-color:bisque;
    font-size:20px !important;
}
.logbut:hover{
    color:bisque !important;
    background-color:#7F7262;
}
#fadetransitionin{
    z-index:100;
    background-color:#7F7262;
    position: absolute;
    display:block;
    width:max(100%, 450px);
    height:max(100%,0px);
    transition:all 0.5s;
}
#transitionin{
    z-index:100;
    background-color:#7F7262;
    position: absolute;
    display:block;
    width:max(100%, 1220px);
    height:max(100%,800px);
    transition:all 0.5s;
}

#allcomplogin #transitionin{
    width:max(100%, 560px);
    height:max(100vh,860px);
    transition:all 0.5s;
}

#visiting #transitionin{
    width:max(100%, 1020px);
    height:max(100vh,800px);
    transition:all 0.5s;
}

.all #transitionin{
    width:max(100%, 477px);
    height:max(100vh, 700px);
    transition:all 0.5s;
}

.inswipe{
    width:0px !important;
}

#transitionout{
    z-index:100;
    margin-left:max(100%, 1220px);
    background-color:#7F7262;
    position: absolute;
    display:inline;
    width:0px;
    height:max(100%,800px);
    transition:all 0.5s;
}

#allcomplogin #transitionout{
    margin-left:max(100%, 560px);
    height:max(100vh,860px);
    transition:all 0.5s;
}

#visiting #transitionout{
    margin-left:max(100%, 1020px);
    height:max(100vh,800px);
    transition:all 0.5s;
}

.all #transitionout{
    margin-left:max(100%, 477px);
    height:max(100vh,700px);
    transition:all 0.5s;
}

#startallele #transitionout{
    margin-left:max(100%, 450px);
    height:max(100vh,450px);
    transition:all 0.5s;
}

.outswipe{
    margin-left:0px!important;
    width:max(100%, 1220px) !important;
}
#allcomplogin .outswipe{
    margin-left:0px!important;
    width:max(100%, 560px) !important;
}
.outtercolor{
    position:relative;
}
.paintinnercolor{
    position:absolute;
    user-select: none; 
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    
}
.paintinnercolor p{
    text-align:center;
    font-weight:bold;
    opacity:0.6;
    width:100%;
}
.taller{
    height: calc(100vh - 197px);
    min-height:503px;
}
.shorter{
    height:180px;
}
.numpenal{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    float:right;
    height:100%;
    width:40%;
    background-color:#2A2622;
    color:bisque;
}
.numpenal p{
    text-align:center;
    display:block;
    font-size:30px;
}

.curdiv p{
    font-size:20px;
    text-align:center;
}
.colorcolor{
    border-right-style:solid;
    border-width: 7px;
    border-color: #2A2622;
    display:inline-block;
    width:125px;
    height:100%;
}
#pagebar{
    margin-left:5%;
    width: calc(100vw - 200px);
    margin-bottom:40px;
    min-width:calc(1020px - 10%);
}
.pagebutton{
    font-size:38px;
    color:bisque;
    border-style:solid;
    border-width: 4px;
    border-radius: 10px;
    border-color: #2A2622;
    background-color:#7F7262;
    display:inline-grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;    width: calc((100vw - 200px)*0.9/13 - 12px);
    min-width:calc((918px)/13 - 12px);
    height: calc((100vw - 200px)*0.9/13 - 12px);
    min-height:calc((918px)/13 - 12px);
}
.pagebutton:hover{
    background-color:#2A2622;
}
.pageunshown{
    font-size:45px;
    color:#2A2622;
    border-style:solid;
    border-width: 4px;
    border-radius: 10px;
    border-color: bisque;
    background-color:bisque !important;
    margin-left:4px !important;
    display:inline-grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    width: calc((100vw - 200px)*0.9/13 - 12px);
    min-width:calc((918px)/13 - 12px);
    height: calc((100vw - 200px)*0.9/13 - 12px);
    min-height:calc((918px)/13 - 12px);
}
.total1{
    margin-left:max(calc((918px)/2 - ((918px)/13 - 4px)/2), calc((100vw - 200px)*0.9/2 - ((100vw - 200px)*0.9/13 - 4px)/2))
}
.total2{
    margin-left:max(calc(11*((1020px)*0.9/13 + 1px/3)/1 + 4px + 1px/3),calc(11*((100vw - 200px)*0.9/13 + 1px/3)/1 + 4px + 1px/3))!important;
}
.total3{
    margin-left:max(calc(10*((1020px)*0.9/13 + 1px/3)/2 + 4px + 1px/3),calc(10*((100vw - 200px)*0.9/13 + 1px/3)/2 + 4px + 1px/3))!important;
}
.total4{
    margin-left:max(calc(9*((1020px)*0.9/13 + 1px/3)/3 + 4px + 1px/3),calc(9*((100vw - 200px)*0.9/13 + 1px/3)/3 + 4px + 1px/3))!important;
}
.total5{
    margin-left:max(calc(8*((1020px)*0.9/13 + 1px/3)/4 + 4px + 1px/3),calc(8*((100vw - 200px)*0.9/13 + 1px/3)/4 + 4px + 1px/3)) !important;
}
.total6{
    margin-left:max(calc(7*((1020px)*0.9/13 + 1px/3)/5 + 4px + 1px/3),calc(7*((100vw - 200px)*0.9/13 + 1px/3)/5 + 4px + 1px/3))!important;
}
.total7{
    margin-left:max(calc(6*((1020px)*0.9/13 + 1px/3)/6 + 4px + 1px/3),calc(6*((100vw - 200px)*0.9/13 + 1px/3)/6 + 4px + 1px/3))!important;
}
.total8{
    margin-left:max(calc(5*((1020px)*0.9/13 + 1px/3)/7 + 4px + 1px/3),calc(5*((100vw - 200px)*0.9/13 + 1px/3)/7 + 4px + 1px/3))!important;
}
.total9{
    margin-left:max(calc(4*((1020px)*0.9/13 + 1px/3)/8 + 4px + 1px/3),calc(4*((100vw - 200px)*0.9/13 + 1px/3)/8 + 4px + 1px/3))!important;
}
.total10{
    margin-left:max(calc(3*((1020px)*0.9/13 + 1px/3)/9 + 4px + 1px/3),calc(3*((100vw - 200px)*0.9/13 + 1px/3)/9 + 4px + 1px/3))!important;
}
.total11{
    margin-left:max(calc(2*((1020px)*0.9/13 + 1px/3)/10 + 4px + 1px/3),calc(2*((100vw - 200px)*0.9/13 + 1px/3)/10 + 4px + 1px/3))!important;
}
.total12{
    margin-left:max(calc(1*((1020px)*0.9/13 + 1px/3)/11 + 4px + 1px/3),calc(1*((100vw - 200px)*0.9/13 + 1px/3)/11 + 4px + 1px/3))!important;
}
.total13{
    margin-left:max(calc(4px + 1px/3),calc(4px + 1px/3))!important;
}
#noreturn{
    opacity:0.7;
    margin-left:10%;
    width:80%;
    text-align:center;
    margin-top:10%;
    font-size:50px;
}
#addpuztab{
    background-color:#7F7262;
    display:block;
    width:100%!important;
    border-style:none;
    height:auto !important;
}
#addpuztab:hover{
    background-color:#2A2622 !important;
}
#visiting #board{
    position:relative;
    z-index:-10;
    height:calc(100vh - 107px - 174px);
    min-height:521px;
    width:100vw!important;
}
#visiting .rankingelement{
    width:100vw!important;
    min-width:1020px;
    background-color:#2A2622 !important;
    height:174px !important;
}
#visiting .rankingimg{
    width:120px!important;
    height:120px !important;
    border-width: 6px;
    margin-top:20px;
    display:inline;
    position:relative;
}
#visiting .nameinranking{
    display:inline-grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
    width:300px!important;
    height:120px !important;
    border-width: 6px;
    top:-52px !important;
    margin-left:10px;
    margin-right:10px;
    position:relative;
    border-color:#2A2622;
}
#visiting .nameinranking p{
    width:290px!important;
    font-size:38px;
}
#visiting .dashbutrow{
    height:100px;
    background-color:#2A2622 !important;
}
#visiting .dashbutrow span{
    width:calc(50% - 4px)!important;
    height:70px;
    margin-top:0;
    margin-left:0;
    border-radius:0;
    padding-top:30px;
    padding-bottom:0;
    font-size:30px;
    border-bottom-width:0;
    border-top-width:0;
    border-right-width:0;
}
#visiting #boardheader{
    border-bottom-width:5px;
    width:100vw;
}
#visiting #displayscore{
    width:300px;
    margin-bottom:10px;
    border-width:6px;
    display:inline-block;
    height:96.5px;
}
#visiting #displayscore span{
    font-size:25px;
}
#visiting .savebutton{
    float:right;
    margin-right:20px;
    margin-left:0px;
    display:inline;
    margin-top:60px;
    border-color:#7F7262;
    color:#2A2622;
    background-color:bisque;
}

#visiting .savebutton:hover{
    color:bisque !important;
    background-color:#7F7262;
}

#visiting #searchbar .lineInput{
    min-width:calc(1020px - 592px - 208px - 62px - 20px);
    height:50px;
    width:calc(100vw - 592px - 208px - 62px - 20px);
}
#visiting #loading{
    position:absolute;
    height:calc(100vh - 207px - 174px);
    min-height:400px;
    z-index:0;
    background-color:bisque;
    text-align:center;
    min-width:1020px;    
    padding-top:100px;
    width:100vw!important;
}
#loading span{
    margin-top:100px;
    opacity:0.7;
    margin-left:10%;
    width:80%;
    background-color:bisque;
    text-align:center;
    margin-top:10%;
    font-size:50px;
}
#loading{
    position:absolute;
    min-height:400px;
    background-color:bisque;
    text-align:center;
    min-width:1020px;    
    padding-top:100px;
    width:100vw!important;
    height:calc(100vh - 207px);
    z-index:3;
}
#titlecard{
    position:absolute;
    background-color:#2A2622;
    display:block;
    top: 7vh;
    transition: top 0.5s ease 0s;
    min-width:180px;
    width:40%;
    left:calc(50% - max(20%,90px) - 7px);
    border-radius: 25px;
    border-width: 7px;
    border-style:solid;
    border-color: #2A2622;
}
.startpbutton{
    border-radius: 10px;
    border-width: 7px;
    border-style:solid;
    padding:0px;
    border-color: #2A2622;
    color:bisque;
    background-color: #7F7262;
    font-size:max(20px, 4.5vw);
    padding:10px;
    position:absolute;
}
#bgstart{
    position:absolute;
    z-index:0;
    min-width: 450px;
    min-height: 450px;
    width:100vw;
    height:100vh;
    border:0px;
}
#startallele{
    position:absolute;
    z-index:0;
    min-width: 450px;
    min-height: 450px;
    width:100vw;
    height:100vh;
    border:0px;
}
#startbutton{
    left:5vw;
    transition: left 0.5s ease 0s;
    bottom:7vh;
    transition: bottom 0.5s ease 0s;
}
#loginbutton{
    right:5vw;
    transition: right 0.5s ease 0s;
    bottom:7vh;
    transition: bottom 0.5s ease 0s;
}
#startbutton:hover{
    background-color: #2A2622;
}
#loginbutton:hover{
    background-color: #2A2622;
}
.guestcata span{
    height:70px;
    font-size:30px;
}
.fade{
    pointer-events:none;
    opacity:0;
}
.guestline{
    border-width:0px;
    width:100% !important;
    background-color: bisque;
    color:#2A2622;
}
.guestline:hover{
    background-color: #2A2622;
    color:bisque;
}
.guestranking span{
    border-right-width:0px !important;
    width:100% !important;
}