html{
  --entry-background:color-mix(in srgb, wheat, white 30%);  
  --entry-font:felix, georgia, times;
  --button-width:75%;
  --bio-bg:wheat;
  --bio-padding:4px 12px 64px 12px;
  --bio-font-color:black;
  --wrapper-mask:linear-gradient(to bottom,white,white 50%,#bbb 75%, black);
  --desktop-wrapper-mask:linear-gradient(to bottom,white,white 50%,#bbb 75%, black);
  --wrapper-mask-mode:luminance;
  --bio-text-align:center;
  --bio-font-size:14pt;
  --desktop-font-scaling:1.25;
  --accent-image-scaling:calc(22 / 30);
  --accent-image-width:30%;
  --accent-image-width-pfp:30%;
  --entry-border-color:color-mix(in srgb,var(--entry-background),black 10%);
  --entry-border-type:solid;
  --entry-border-width:2px;
  --entry-border-radius:12px;
  --entry-opacity:.8;
  --entry-border:var(--entry-border-color) var(--entry-border-type) var(--entry-border-width);
  --entry-border-image:none;
  --entry-border-image-slice:0;
  --entry-border-image-repeat:none;
  --hover-filter-effect:brightness(.8) contrast(1.16);  
  --select-filter-effect:brightness(.7) contrast(1.2);  
  --content-font-size:14pt;
}

#mainPanel::after{
  content:none!important;  
}
#mainPanel{
  margin:0;
}
#mainContentWrapper {
	height: fit-content;
	mask: var(--wrapper-mask);
	mask-mode: var(--wrapper-mask-mode);
}

#mainPanelFrame{
  width:100%;
  height:100%;  
  margin:0;
}

#mainContent{
  margin:0;padding:0;  
}

#bio{
 background:var(--bio-bg);
 margin:0;
 text-align:var(--bio-text-align); 
 padding:var(--bio-padding);
 color:var(--bio-font-color);
}
#bio>p{
  font-size:calc(var(--bio-font-size) * 1);  
  margin:0;
}

#mainContent .accent-image{
  width:var(--accent-image-width);
}
#mainContent .accent-image.ispfp{
  width:var(--accent-image-width-pfp);
}

#actual-content{
  display:none;  
}

#actual-content{
  display:none;
  flex-direction:column;  
  align-items:center;
  line-height:2;
  font-size:calc(var(--content-font-size) * 1);
}

#actual-content.mobile{
  display:flex;
}
.entry{
  width:var(--button-width);
  background-color:var(--entry-background);
  border-radius:var(--entry-border-radius);
  text-align:center;
  opacity:var(--entry-opacity);
  font-family:var(--entry-font);
  letter-spacing:.15rem;
  user-select:none;
}
.entry.link{
  border:var(--entry-border);
}
#mainContent h1{padding:0;margin:0;}
#mainContent {
  background:var(--bio-bg);
  
}
.accent-image-group{
  display:flex;grid-gap:10%;justify-content:center;padding:12px 0;margin-top:0;
}
#actual-content.image-borders .entry.link{
  border:var(--entry--image-border);
  border-width:var(--entry-border-width);
  border-image:var(--entry-border-image);
  border-image-slice:var(--entry-border-image-slice);
}

.entry.link:hover, .socials a:hover{
  filter:var(--hover-filter-effect)
}
.entry.link:active, .socials a:active{
  filter:var(--select-filter-effect);
}
.socials {
  margin-top:8px;  
}
.socials a img {
  filter:invert(1);  
}

.socials.noSocials{
  display:none;
}

@media(min-aspect-ratio:1/1)
{
  html{
    --button-width:40%;
    
  }
  #mainContentWrapper {
  	height: fit-content;
  	mask: var(--desktop-wrapper-mask);
  	mask-mode: var(--wrapper-mask-mode);
  }

  #mainContent .accent-image{
    width:calc(var(--accent-image-width) * var(--accent-image-scaling));
  }
  #bio>p{
      font-size:calc(var(--bio-font-size) * var(--desktop-font-scaling));  
  }
  #actual-content{
    font-size:calc(var(--content-font-size) * var(--desktop-font-scaling));
  }
  #actual-content:not(.mobile){
    display:flex;  
  }
  #actual-content.mobile{
    display:none;  
  }
}
@media(min-aspect-ratio:3/2)
{
  html{
    --button-width:30%;
    
  }
}