* {
  scrollbar-width: none;
}

/* content */
html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
}

html {
  overflow-y: hidden;
}


#page {
  overflow-y: auto;
}


html a {
  color: var(--text);
}

label:active {
  border: #ffffff59;
}

header {

  background-image: var(--banner);
  background-repeat: no-repeat;
  background-size:cover;
  min-height:350px;
  padding:20px;
}

nav {
  display:flex;
  flex-wrap: wrap;
  margin:15px;
  justify-content: center;

}
nav a {
  margin:5px;
  background: var(--div);
  padding:8px;
  border-radius:5px;
  border: 1px dashed;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.486);

  transition: transform 0.2s;
}
nav a:hover {
  transform: translateY(2px);
}

#page {
  color:var(--text);
  background:var(--background);
  background-image: url(images/asset/tile.png);
  font-family:MS gothic, monospace;
  font-size:1.2em;
  transition-property:background;
  min-width:100%;
  min-height:100%;
  padding-top:1vh;
}


/* color */
:root {
  /*dark mode*/
    --dark-text: #ff00aa;
    --dark-background: #0c0c13;
    --dark-icon: url('images/asset/darkmode.png');
    --dark-banner: url('images/asset/banner2.webp');
    --dark-div:#050208c4;
    --dark-bsky:url('images/asset/logos/bskydark.webp');
    --dark-artf:url('images/asset/logos/artfightdark.webp');
    --dark-ng:url('images/asset/logos/ngdark.webp');
    --dark-accent:rgba(16, 13, 26, 0.959);
  /*light mode*/
  --light-text: #ffffff;
    --light-background: #e6edff;
    --light-icon: url('images/asset/lightmode.png');
    --light-banner: url('images/asset/banner.webp');
    --light-div:#4036adce;
    --light-bsky:url('images/asset/logos/bskylight.webp');
    --light-artf:url('images/asset/logos/artfightlight.webp');
    --light-ng:url('images/asset/logos/nglight.webp');
    --light-accent:#6f67ce;
  /*default*/
  --text: var(--dark-text);
  --background:var(--dark-background);
  --switch-icon:var(--dark-icon);
  --banner:var(--dark-banner);
  --div:var(--dark-div);
  --bsky:var(--dark-bsky);
  --artf:var(--dark-artf);
  --ng:var(--dark-ng);
  --who:var(--dark-who);
  --accent:var(--dark-accent);
}
#theme-switch:checked ~ #page {
  --text: var(--light-text);
  --background: var(--light-background);
  --switch-icon:var(--light-icon);
  --banner:var(--light-banner);
  --div:var(--light-div);
  --bsky:var(--light-bsky);
  --artf:var(--light-artf);
  --ng:var(--light-ng);
  --who:var(--light-who);
  --accent:var(--light-accent);
}

#notice {
  border:1px dashed;
  background: var(--div);
  border-radius:10px;
  margin-top:20px;
  margin-left: auto;
  margin-right: auto;
  max-width:600px;
}
#notice p {
  padding:20px;
}


#notice > summary {
    border-radius:10px;
  padding:10px;
  background: var(--accent);
}

#notice:open > summary {
    border-radius:10px 10px 0 0;

}

.switch-label {
  margin: 10px;
  padding:10px;
  float: right;
  background:var(--div);
  border-radius:5px;
}

main {
  background:var(--div);
  max-width:1200px;
  margin: auto;
  padding:10px;
  border-radius: 5px;
  border:1px dashed;
}




#theme-switch { /* Hides the checkbox */
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.switch-label::before {
  content: var(--switch-icon);
}

#links {
  background-color: #000000;
  margin-top:20px;
  display: flex;
  align-items: center;
  column-gap:10px;
  padding: 5px;
  width:fit-content;
}

#bsky {
  content:var(--bsky);
  max-height:30px;
}

#ng {
  content:var(--ng);
  max-height:30px;
}
 #af {
  content:var(--artf);
  max-height:30px;
 }

.link {
  transition: 0.5s;
}

.link:hover {
  filter: drop-shadow(0 0 10px var(--text));
  transform: scale(1.2);
}




/* Mobile */


@media (max-width:700px) {




}


#s-m-t-tooltip{
/* basic */
 max-width: 220px;
 z-index: 10;
 margin: 24px 14px 7px 12px;
/* style and design */
 padding:5px;
 border-radius:5px;
 background-color:black;
 color: white;
  font-family:MS gothic, monospace;
}