#hwrapper{
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  box-sizing: border-box;
  background: transparent;
  background-size: 25%;
  user-select: none;
  position:fixed;
  top:10px;
  z-index: 1000;
}

.showonsmol{
  display:none;
}
@media(max-aspect-ratio:1/1){
  #main_body{
    grid-template-columns: 100vw;
    
  }
.showonsmol{
  display:unset;
}
.hideonsmol{
  display:none!important;
}
#main_body>div>div,#main_body>div, #main_body main{
  max-height:fit-content;
}
}

#header{
  height:160px;
}

#hwrap2{filter:drop-shadow(4px 8px 8px gray);
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#main_body{
  filter:drop-shadow(4px 8px 8px gray);
}
#main_body{
  height:calc(100vh - 140px - 32px);
  margin-top:140px;
  width:100vw;
  display:grid;
  padding:0 64px;
  grid-template-columns: 280px auto 280px;
  grid-gap:16px;
  box-sizing: border-box;
}
main{
    border-radius: 0!important;
}

#main_body>div {
    border: 20px solid transparent;
    border-image: url('/images/assets/border.png');
    border-image-slice: calc(320 / 1600 * 100%);
    border-image-repeat: repeat;
    border-image-width: 16px;
}
#main_body>div>div,
#main_body>div>main{
  margin:-9px;
  width:calc(100% + 18px);
  background:#fefefe;
  height:calc(100% + 18px);
  box-shadow: 0 0 2px 4px #fdfdfd;
}
#main_body>div>div,
#main_body>div>main{
  padding:12px 12px;
  box-sizing: border-box;
  color:var(--button-font-color);
}

#main_body>div>main h1{
  font-size:28pt;
  font-family: "CuteDino", Sans-Serif;
}
#main_body>div>main h1::after,
#main_body>div>main h1::before{
  padding-bottom:8px;
}
#main_body .panel_group h1::after,
#main_body .panel_group h1::before{
  display:none;
}

.panel_group{
  border:2px solid color-mix(in srgb,var(--button-font-color) 0%,var(--button-color));
  background:color-mix(in srgb,white 70%,var(--button-color));
  background: none;
  border:none;
  border-radius:8px;
  font-size:14pt;
  padding:4px 8px;
}

.panel_group>div{
  display:flex;
  flex-direction: column;
  grid-gap:2px;
}

.panel_group>div >span{
  position:relative;
  padding-left:18px;
  line-height:100%;
}
.panel_group>div >span::before{
  content:"♥";
  position:absolute;
  margin-left:-16px;
}

.panel_group .nav{
  display:grid;
  grid-template-columns:max-content auto;
  grid-gap:4px 16px;
  justify-content: center;
  text-align: center;
  padding-bottom:12px;
  font-size:14pt;
}


.panel_group .nav a{
  color:var(--button-font-color);
  text-decoration: none;
}
.panel_group .nav a:hover{
  color:var(--button-hover-font-color);
  
}
#main_body .panel_group h1{
  font-size:18pt;
  margin:0;
  padding:0;
  padding-top: 12px;
  font-family: "CuteDino",Sans-Serif;
}
#main_body>div>main{padding-top:12px;
  
}

#main_body #left_panel,
#main_body #right_panel{
  height:fit-content;
}
#main_body>div{
  max-height:fit-content
}
#main_body>div>main,
#main_body>div>div{
  max-height:calc(100vh - 220px);
  overflow:auto;
}
#hwrapper{
  position: absolute;
}

#top_panel .nav{
  flex-direction: row;
  display:flex;
  justify-content: center;
  align-items: center;
  margin:0!important;
  padding:0!important;
  overflow:clip;
  flex-wrap: wrap;
  
}
#top_panel .nav a{
  font-size:18pt;
  
}
#top_panel>div{
  padding:0px!important;
  
}
#top_panel{
  margin-top:48px;
}
#top_panel .nav h1{
  display:none;
}
@media(max-aspect-ratio:4/3){
  #main_body{
    grid-template-columns: 200px auto 200px;
    
  }
  .panel_group>div >span{
    font-size:12pt;
  }
}

@media(max-aspect-ratio:1/1){
  #main_body{
    height:fit-content;
    display:flex;
    flex-direction: column;
    
  }
  #main_body>div>main,
  #main_body>div>div{
    max-height:calc(60vh - 100px);
  }
  body{
    margin-bottom:12px;
  }
#left_panel #left_panel_nav h1{
  display:none;
}

}

@media(max-aspect-ratio:3/5){
  #main_body{
    padding:48px;
    padding-top:0;
  }
  #acct{
    margin-top:-48px;
  }
  #acct{font-size:36pt;}
}
@media(max-aspect-ratio:1/4){
}