
* {cursor: crosshair;}
html {
    font-size: 16px;
    min-height: 100%; /* Ensures the html element is at least the height of the viewport */
}

body {
    font-family:monospace;
    background-image: radial-gradient(circle,#000000 0%, #000000 50%, #111724 100%);
    margin:10px;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}
#version {color:#c7eaff; font-size:.6em;}
#version::before{content: "ver. 2025.10.25";}

#title, #subtitle, #version, #footer{font-weight:normal; font-family: "Press Start 2P", system-ui;}
#title {text-align: center;color:#c7eaff;font-size: 2em;margin:20px 0px 20px 0px}

#footer {text-align: center;
    color:#c7eaff;
    font-size: .75em;
    padding:10px 0px 0px 0px;
    clear:both;
    text-transform: uppercase;}

#subtitle{color:#c7eaff; font-size:.75em; text-align:center; margin: 0px 0px 5px 0px;}
#navbody {border: 1px solid #c7eaff; align-content: center; display:block;}
#navtitle {
    margin: 0px;
    padding: 5px 0px 5px 0px;
    font-family: "Press Start 2P", system-ui;
    font-size: .75em;
    font-weight: normal;
    background: #c7eaff;
}
#navbuttons, #navbuttons a{
    text-decoration: none;
    font-weight: none;
    font-family: "Press Start 2P", system-ui;
    font-size: .8rem;
    display:flex;
    justify-content:space-evenly;
    list-style-type: none;
}
.navbutton a, #navbuttoncurrent a{padding-top:5px; padding-bottom:5px; color:#c7eaff;}
.navbutton a:before{content:"\00a0\00a0"}
.navbutton a:after{content:"\00a0\00a0"}
#navbuttoncurrent a:before {content:"\005B\00a0";}
#navbuttoncurrent a:after{content:"\00a0\005D"}
#navbuttoncurrent a {color:black;background:#c7eaff;}
.navbutton a:hover{background:#c7eaff9a; color: black; text-decoration: none;}
.navbutton a:hover:before{content:"[\00a0"}
.navbutton a:hover:after{content:"\00a0]"}
#page {
    border: 1px solid #84c3ff;
    align-content: center;
    width:calc(100% - 195px);
    float:left;
    margin:10px 0px 0px 0px;
    background-color:#00001e;
}
#pagetitle {
    color:#84c3ff;
    margin: 0px;
    padding: 5px 0px 5px 0px;
    font-family: "Press Start 2P", system-ui;
    font-size: .75em;
    font-weight:normal;
    line-height: 20px;
    background: #0e1b39;
}
#pagecontent {color:#84c3ff;margin: 10px 10px 10px 10px; padding-left:90px;}
#pagetext {margin-top:0; margin-bottom:0px;}

.pagelinkheader{
    color:#84c3ff;
    margin: 0px;
    padding: 10px 0px 10px 0px;
    text-align: center;
    font-family: "Press Start 2P", system-ui;
    font-size: .7em;
    margin-bottom:-10px;
    font-weight: normal;
}
.update {border:2px solid #0e1b39; margin:10px 0px 0px 0px;}
.article {border:1px solid #66c4ff; padding-bottom:10px;}
.update, .article {
    align-content: center;
    width:calc(100% - 196px);
    float:left;
    margin:10px 0px 0px 0px;
    background-color:#00001e;
}
.updateicon, .articleicon, .contacticon, .supporticon, .multi_icon {
    float:left;
    display:block;
}
.updatetitle, .articletitle, .contacttitle, .supporttitle, .multi_title {
    line-height: 20px;
    color:#84c3ff;
    margin: 0px;
    padding: 5px 0px 5px 0px;
    font-family: "Press Start 2P", system-ui;
    font-size: .75em; font-weight:normal;
    background: #0e1b39;
}
.updateh3, .articleh3 {
    color:#c7eaff;
    text-align: center;
    margin-left: 85px;
    line-height: 20px;
    font-family: "Press Start 2P", system-ui;
    font-size: .7em;
    font-weight:normal;
}
.updatep, .articlep {
    color:#84c3ff;
    hyphens: auto;
    margin: 10px;
    padding-left:90px;
}
.updateul, .articleul {
    color:#c7eaff;
    hyphens: auto;
    margin: 10px;
    list-style-type: '> ';
    padding-left:150px;
}
.updatelink a, .articlelink a{
    text-decoration: none;
    float:right;
    text-align: center;
    font-family: "Press Start 2P", system-ui; font-size: .65rem;
    padding: 10px 20px 10px 20px;
    color:#84c3ff;
    background: #0e1b39;
}
.updatelink a:link, .updatelink a:visited, .articlelink a:link, .articlelink a:visited {text-decoration: none;}
.updatelink a:hover, .articlelink a:hover {background:#84c3ff; color: black; text-decoration: none}
.updatelink a:before, .articlelink a:before {content:"\00a0\00a0"}
.updatelink a:after, .articlelink a:after {content:"\00a0\00a0"}
.updatelink a:hover:before, .articlelink a:hover:before{content:"[ "}
.updatelink a:hover:after, .articlelink a:hover:after {content:" ]"}

.folder, .multi, .support{margin-left:100px; margin-right:10px}
.foldertitle {
    display:inline-block;
    text-align: left;
    font-family: "Press Start 2P", system-ui;
    font-size: .7rem;
    font-weight:normal;
    color: #0e1b39;
    background:#84c3ff;
    padding:5px 5% 5px 5%;
    margin-top: 10px;
    margin-left: 50px;
    margin-bottom:0px;
}
.folderbox, .multi_box {
    border: #84c3ff 1px solid;
    margin-right:10px;
}
.folderlink a, .multi_link a{
    text-decoration: none;
    display:inline-block;
    text-align: left;
    font-family: "Press Start 2P", system-ui; font-size: .65rem;
    color: #84c3ff;
    background:#0e1b39;
    padding:10px 00px 10px 0px;
    width:100%;
}
.folderlink a:before, .contactlink a:before, .supportlink a:before, .multi_link a:before{content:"\00a0\00a0"}
.folderlink a:after, .contactlink a:after, .supportlink a:after, .multi_link a:after{content:"\00a0\00a0"}
.folderlink a:hover:before, .contactlink a:hover:before, .supportlink a:hover:before, .multi_link a:hover:before{content:"[\00a0"}
.folderlink a:hover:after, .contactlink a:hover:after, .supportlink a:hover:after, .multi_link a:hover:after{content:"\00a0]"}
.folderlink a:hover, .contactlink a:hover, .supportlink a:hover, .multi_link a:hover{text-decoration:none; background-color:#84c3ff; color: #00001e;}

.contactlink a, .supportlink a, .multi_link a{
    text-decoration: none;
    display:inline-block;
    text-align: left;
    font-family: "Press Start 2P", system-ui; font-size: .65rem;
    color: #84c3ff;
    background:#0e1b39;
    padding:10px 00px 10px 0px;
    width:100%;
}

.contact, .support .multi{margin-left:100px; margin-right:10px;}
.contacth3, .supporth3, .multi_h3 {
    color:#c7eaff;
    text-align: center;
    /*margin-left: 85px;*/
    line-height: 20px;
    font-family: "Press Start 2P", system-ui;
    font-size: .7em;
    font-weight:normal;
}

#pagelink a{
    text-decoration: none;
    display:inline-block;
    text-align: left;
    font-family: "Press Start 2P", system-ui; font-size: .65rem;
    color: #84c3ff;
    background:#0e1b39;
    padding:10px 00px 10px 0px;
    margin-top: 10px;
    width:100%;
}
#pagelink a:before{content:"\00a0\00a0"}
#pagelink a:after{content:"\00a0\00a0"}
#pagelink a:hover:before{content:"[\00a0"}
#pagelink a:hover:after{content:"\00a0] "}
#pagelink a:hover{text-decoration:none; background-color:#84c3ff; color: #00001e;}

#sociallinkgroup {
     display: flex;
     justify-content: center;
     padding:10px;
}
#sociallink a{
    text-decoration: none;
    text-align: center;
    font-family: "Press Start 2P", system-ui; font-size: .75rem;
    color:#c7eaff;
    border: 1px solid #c7eaff;
    padding:10px 20px 10px 20px;
    margin-left: 10px;
    margin-right:10px;
}
#sociallink a:before{content:"\00a0\00a0"}
#sociallink a:after{content:"\00a0\00a0"}
#sociallink a:hover:before{content:"[\00a0"}
#sociallink a:hover:after{content:"\00a0]"}
#sociallink a:hover{text-decoration:none; background-color:#c7eaff; color: #00001e;}

#adsense{
    width:auto;
    position:sticky;
    top: 0;
    /*bottom:0;*/
    border: 1px solid #84c3ff;
    float:right;
    align-self: flex-start;
    margin:10px 0px 0px 0px;
    background-color:#121926;
    z-index:-1;  
}
.adsbygoogle {border: 1px solid #84c3ff; margin-top: 10px; margin-left:10px; margin-right:10px; margin-bottom:10px}

#bottomad {
    visibility:hidden;
    width:100%;
    color:#c7eaff;
    text-decoration: none;
    text-align: center;
    font-family: "Press Start 2P", system-ui; font-size: .75rem;
    border: 1px solid #84c3ff;
    display: grid;
    margin:-100px 0px 0px 0px;
    background-color:#121926;
    position:sticky;
}

#imagegallery {
  display: inline-block;
  margin: -10px;
text-align: center;
}

a #instastoryimg {height:auto; border: 1px solid #66c4ff; max-width: 20%; margin-top:10px;}
 a[href] #instastoryimg {max-width:20%;}

#supportimage, #adsenseimage {display:flex; margin: 10px; height:auto; float:center; border: 1px solid #66c4ff;}



/*#galleryimagecontainer {
    width:20%;
    margin:10px 10px 10px 10px;
}
#galleryimage {
    border: 1px solid #84c3ff;
    margin:0px 0px 0px 0px;
    max-width: 100%;
    height: auto;
    display: block;
}
.gallerylink a {
    color:#84c3ff;
    border: 1px solid #84c3ff;
    float:right;
    padding: 10px 10px 10px 10px;
    font-family: "Press Start 2P", system-ui;
    font-size: .75em;
    font-weight:normal;
    background: #132347;
    max-width:fit-content;
}*/

@media screen and (max-width: 770px) {
#navbuttons {
    margin:0 0 0 0;
    padding: 0 0 0 0;
    display:table;
    width:100%;
    text-align:center;
    padding-top:0px;
    padding-bottom:0px;
    justify-content:center;
}
#navtitle {font-size: 1em;}
#pagetitle {font-size:.85em;}
#navbuttons a{justify-content:center; font-size: .9rem;}
.navbutton a:before{content:"  "}
.navbutton a:after{content:"  "}
#navbuttoncurrent a:before {content:"\005B\00a0";}
#navbuttoncurrent a:after{content:"\00a0\005D";}
.navbutton a:hover:before{content:"\005B\00a0";}
.navbutton a:hover:after{content:"\00a0\005D";}

#adsense {display:none;}

#bottomad {
    visibility:visible;
        margin:10px 0px 0px 0px; 
}
#page {width: 100%;}
.pagelinkheader, #pagelink a {
    display:table;
    text-align:center;
}
#pagelink a {text-align:center;
}
.pagelinkheader{margin-bottom:0px;}

#pagelink a {
    padding:10px 0px 10px 0px;
    margin:0px 0px 10px 0px;
}

#instastoryimg {max-width: 27%}
 a[href] #instastoryimg {max-width:85%;}

.update, .article {width: 100%;}

.adsbygoogle {
    border: 1px solid #84c3ff;
    margin-top: 10px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px}
.contacth3, .supporth3, .multi_h3 {text-align: left; margin-left:0px;}
.contact, .support, .multi {margin-left:90px;}

.multi_link a {
text-align:center;
line-height: 15px;
}
}
