#header{
  height:200px;
  width:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top:12px;
}

main{
  margin:12px 15vw 5vh 15vw;
  padding:12px 48px;
  background-color:#ffffffca;
  border-radius: 24px;
  flex-grow:1;
  box-sizing: border-box;
  width: 60vw;
}

#header img{
  border-radius: 100%;
  box-shadow: 0px 0px 8px var(--acct-name-border-color);
  pointer-events: none;
}
main h1{
  text-align: center;
}
#acct{
  margin-top:-48px;
  font-size:48pt;
  color:var(--acct-name-text-color);
  font-family: CuteDino, Sans-Serif;
  text-shadow: 1px 1px 0 var(--acct-name-border-color),
    -1px 1px 0 var(--acct-name-border-color),
    1px -1px 0 var(--acct-name-border-color),
    -1px -1px 0 var(--acct-name-border-color),
    0px 1px 0 var(--acct-name-border-color),
    0px -1px 0 var(--acct-name-border-color),
    -1px 0px 0 var(--acct-name-border-color),
    1px 0px 0 var(--acct-name-border-color),
    2px 2px 0 var(--acct-name-border-color),
    -2px 2px 0 var(--acct-name-border-color),
    2px -2px 0 var(--acct-name-border-color),
    -2px -2px 0 var(--acct-name-border-color),
    0px 2px 0 var(--acct-name-border-color),
    0px -2px 0 var(--acct-name-border-color),
    -2px 0px 0 var(--acct-name-border-color),
    2px 0px 0 var(--acct-name-border-color),
    1px 2px 0 var(--acct-name-border-color),
    -1px 2px 0 var(--acct-name-border-color),
    1px -2px 0 var(--acct-name-border-color),
    -1px -2px 0 var(--acct-name-border-color),
    2px 1px 0 var(--acct-name-border-color),
    -2px 1px 0 var(--acct-name-border-color),
    2px -1px 0 var(--acct-name-border-color),
    -2px -1px 0 var(--acct-name-border-color);
}
.link-panel{
  width:100%;
  box-sizing: border-box;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.link-entry{
  width:100%;
  max-width:400px;
  margin:6px 0;
  background-color:var(--button-color);
  padding:8px 18px;
  box-sizing: border-box;
  display:flex;
  position:relative;
  border-radius:24px;
  align-items: center;
  color:var(--button-font-color);
}
.link-entry span{
  width:100%;
  position:absolute;
  text-align: center;
  font-size:18pt;
  user-select:none;
}
h1{
  display:flex;
  justify-content: center;
  align-items: center;
  color:var(--acct-name-border-color);
}
h1::after,h1::before{
  content:"❤️";
  font-size:16pt;
}
h1::after::after,h1::before::before{
  content:"❤️";
  font-size:16pt;
}
.link-entry .social-image{
  width:32px;
  height:32px;
  background-size:28px;
  background-repeat: no-repeat;
  background-position: 50%;
  
}
.link-panel a{
  display:contents;
}
.link-entry .social-image#patreon-image{
  background-image:url('/images/socials/patreon.png');
}

.link-entry .social-image#instagram-image{
  background-image:url('/images/socials/instagram.png');
}
.link-entry .social-image#reddit-image{
  background-image:url('/images/socials/reddit.png');
}

.link-entry .social-image#twitch-image{
  background-image:url('/images/socials/twitch.png');
}

.link-entry .social-image#kofi-image{
  background-image:url('/images/socials/kofi.png');
}
.link-entry .social-image#paypal-image{
  background-image:url('/images/socials/paypal.png');
}
.link-entry .social-image#github-image{
  background-image:url('/images/socials/github.png');
}
.link-entry .social-image#bandcamp-image{
  background-image:url('/images/socials/bandcamp.png');
}
.link-entry .social-image#substack-image{
  background-image:url('/images/socials/substack.png');
  background-size:22px;
}
.link-entry .social-image#fansly-image{
  background-image:url('/images/socials/fansly.png');
  background-size:22px;
}
.link-entry .social-image#throne-image{
  background-image:url('/images/socials/throne.png');
  background-size:22px;
}
.link-entry .social-image#spacehey-image{
  background-image:url('/images/socials/spacehey.png');
  background-size:22px;
}

.link-entry .social-image#discord-image{
  background-image:url('/images/socials/discord.png');
  background-size:22px;
}

.link-entry:hover{
  filter:brightness(0.9) contrast(1.1);
  background-color:var(--button-hover-color);
  color:var(--button-hover-font-color);
}

.link-entry:active,#info-button:active{
  filter:brightness(0.85) contrast(1.1) saturate(1.25);
}

#AdultCheckPopup{
  width:100vw;
  height:100vh;
  background:#fac0daa8;
  display:flex;
  justify-content: center;
  align-items: center;
  position:fixed;
  top:0;
  z-index:1000;
}

#AdultCheckPopup>div{
  display: flex;
  flex-direction: column;
  width:40vw;
  min-height:10vh;
  justify-content: center;
  align-items: center;
  background:white;
  padding:12px 36px;
  margin-bottom: 10vh;
  box-sizing: border-box;
  grid-gap:8px;
  border-radius: 12px;
  box-shadow: 8px 4px 6px gray;
}
#AdultCheckPopup>div span{
text-align: center;
  
}

#AdultCheckPopup>div>#title{
  font-size:24pt;
  color:var(--acct-name-border-color);
  font-family: "CuteDino", Sans-Serif;
  text-align: center;
  margin-top:8px;
}
#AdultCheckPopup #footer{
  display:grid;
  grid-template-columns: 50% 50%;
  width:90%;
  grid-gap:12px;
  margin-top:8px;
  margin-bottom:8px;
}

#AdultCheckPopup>div button{
  font-size:14pt;
  background:#ffdaec;
  border:color-mix(in srgb,#ffdaec,black 20%) solid 1px;
  border-radius: 18px!important;
  box-shadow: inset 0 0 8px color-mix(in srgb,#ffdaec,#550012 20%);
  padding:4px 8px;
  color:var(--text-color-dark);
}
#AdultCheckPopup>div button:last-child{
  background:color-mix(in srgb,var(--acct-name-border-color),#ffeded 20%);
  border:color-mix(in srgb,color-mix(in srgb,var(--acct-name-border-color),#ffdddd 20%),black 20%) solid 1px;
  box-shadow: inset 0 0 8px color-mix(in srgb,color-mix(in srgb,var(--acct-name-border-color),#ffdddd 20%),#550012 20%);
  
  color:var(--text-color-light);
  
}

#AdultCheckPopup>div button:hover{
  filter:brightness(.9) contrast(1.1) drop-shadow(0px 0px 4px var(--acct-name-border-color));
}
#AdultCheckPopup>div button:active{
  filter:brightness(.8) contrast(1.15) drop-shadow(0px 0px 4px var(--acct-name-border-color));
}

#about-panel{
  
  width:100vw;
  height:100vh;
  background:#fac0daa8;
  display:flex;
  justify-content: center;
  align-items: center;
  position:fixed;
  top:0;
  z-index:1000;
  
}
#about-panel>div{

  display: flex;
  flex-direction: column;
  width:40vw;
  min-height:10vh;
  justify-content: center;
  align-items: center;
  background:white;
  padding:12px 0 12px 36px;
  margin-bottom: 10vh;
  box-sizing: border-box;
  grid-gap:8px;
  border-radius: 12px;
  box-shadow: 8px 4px 6px gray;
  max-height:80vh;
  user-select: all;
  position:relative;
}
#about-panel>div button{
  position:absolute;
  top:4px;
  right:6px;
  background-color:var(--button-color);
  color:var(--button-font-color);
  border:2px solid var(--button-font-color);
  border-radius: 6px;
  font-size:16pt;
  user-select: none;
}
#about-panel>div button:hover{
  background-color:var(--button-hover-color);
  color:var(--button-hover-font-color);
  border:2px solid var(--button-hover-font-color);
}
#about-panel>div button:active{
  filter:brightness(0.85) contrast(1.1) saturate(1.25);
}

#about-panel>div #about-title{
  font-family: "CuteDino", Sans-Serif;
  color:var(--acct-name-border-color);
  font-size:24pt;
  padding-right:12px;
  padding-left:12px;
  margin-left:-24px;
  text-align: center;
  width:calc(100% - 24px);
  box-sizing: border-box;
  /*border-bottom: dotted 1px var(--button-hover-font-color);*/
}#about-panel>div #about-content{
  box-shadow: border-box;
  overflow:auto;
  padding-right:12px;
  color:var(--text-color-dark);
}
#about-divider,.popup-divider{
  background-image:radial-gradient(circle at 50%,var(--button-hover-font-color) 3px,var(--button-hover-font-color) 3px,transparent 3px, transparent);
  background-size:12px;
  background-repeat: repeat-x;
  height:12px;
  width:calc(100% - 24px);
  margin-left:-24px;
}
#info-button{
  position:absolute;
  right:8px;
  top:8px;
  background:var(--acct-name-text-color);
  border:2px solid var(--acct-name-border-color);
  border-radius: 8px;
  width:32px;
  height:32px;
  padding:4px;
}
#info-button>div{
  width:32px;
  height:32px;
  
  background-position: 50%;
  background-size:32px auto;
  background-repeat: no-repeat;
  background-image:url(/images/about.png);
}

#info-button:hover{
  background-color:var(--button-hover-color);
  border-color:var(--button-hover-font-color);
  
}
#info-button:hover>div{
  filter:hue-rotate(265deg) brightness(2.75) saturate(0.95) contrast(0.9);
  
}

.hidden{
  display:none!important;
}




/** MEDIA QUERIES **/

@media (max-aspect-ratio:1/1)
{
  main{
  margin:12px 5vw 5vh 5vw;
  width:80vw;
  
  }
  
  body{
  background-size:33.3%;
    
  }
  #AdultCheckPopup>div{
    width:60vw;
  }
  button{
    font-size:12pt;
  }
  #about-panel>div{
    width:60vw;
  }
}

@media (max-aspect-ratio:3/5)
{
  main{
    margin:12px 0vw 0vh 0vw;
    padding-bottom:5vh;
    border-radius: 0;
    background-color:#fff0eaca;
    width:100vw;
  }
  
  body{
  background-size:50%;
    
  }
  h1{
    font-size:18pt;
  }
  .link-entry span{
    width:100%;
    position:absolute;
    text-align: center;
    font-size:16pt;
  }
  h1::after,h1::before{
    content:"❤️";
    font-size:12pt;
  }
  
  #acct{
    margin-top:-100px;
  }
  #AdultCheckPopup>div{
    width:80vw;
  }
  
  #AdultCheckPopup>div button{
    font-size:10pt;
  }
  #about-panel>div{
    width:80vw;
  }
}

@media (max-width:400px){
  
  #AdultCheckPopup>div{
    width:95vw;
  }
  
  #about-panel>div{
    width:95vw;
  }
.link-entry .social-image{
  width:24px;
  height:24px;
  background-size:20px;
  
}
.link-entry span{
  width:100%;
  position:absolute;
  text-align: center;
  font-size:14pt;
  user-select:none;
}
h1{
  font-size:14pt;
}
h1::after,h1::before{
  content:"❤️";
  font-size:10pt;
}
}