/* FONT IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');
  
/* -------------------------------------------------------- */
/* VARIABLES */
/* -------------------------------------------------------- */

/* Variables are used like this: var(--text-color) */
:root {
  /* Background Colors: */
  --background-color: #eeeeee;
  --content-background-color: #ffffff;
  --sidebar-background-color: #ffffff;

  /* Text Colors: */
  --text-color: #000000;
  --sidebar-text-color: #000000;
  --link-color: #ef67a2;
  --link-color-hover: #000;

  /* Text: */
  --font: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ,
    Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic",
    "Noto Sans CJK JP", TakaoPGothic, sans-serif;
  --heading-font: "Cherry Bomb One", system-ui;
  --font-size: 13px;

  /* Other Settings: */
  --margin: 8px;
  --padding: 10px;
  --border: 1px solid #ef67a2;
  --round-borders: 0px;
  --sidebar-width: 190px;
}

/* -------------------------------------------------------- */
/* BASICS */
/* -------------------------------------------------------- */

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-size: var(--font-size);
  margin: 0;
  padding: var(--margin);
  color: var(--text-color);
  font-family: var(--font);
  line-height: 1.2;
  background: var(--background-color);
  background-image: url("./images/background.jpg");
  
}

::selection {
  /* (Text highlighted by the user) */
  background: rgba(0, 0, 0, 0.2);
}

mark {
  /* Text highlighted by using the <mark> element */
  text-shadow: 1px 1px 4px #ef67a2;
  background-color: inherit;
  color: var(--text-color);
}

/* Links: */
a {
  text-decoration: underline;
}

a,
a:visited {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-color-hover);
  text-decoration: none;
}

/* -------------------------------------------------------- */
/* LAYOUT */
/* -------------------------------------------------------- */

.layout {
  width: 1200px;
  display: grid;
  grid-gap: var(--margin);
  grid-template:
    "header header header" auto "leftSidebar main main" auto "footer footer footer" auto / var(
      --sidebar-width
    )
    auto var(--sidebar-width);
  /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
}

main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--padding);
  background: var(--content-background-color);
  border: var(--border);
  border-radius: 10px;
}

/* -------------------------------------------------------- */
/* HEADER */
/* -------------------------------------------------------- */

header {
  grid-area: header;
  height: 170px;
  font-size: 1.2em;
  border: var(--border);
  border-radius: 10px 10px 0px 0px;
  background-image: url("./images/V19 HEADER.png");
}

.header-content {
  padding: var(--padding);
}

.header-title {
  font-family: var(--heading-font);
  font-size: 4em;
  font-weight: bold;
  background-image: url("./images/button bg.png");
  background-size: 100% 100%;
  color: transparent;
  background-clip: text;
  -webkit-text-stroke-width: 0.05px;
  -webkit-text-stroke-color: #fff;
}

.header-image img {
  width: 100%;
  height: auto;
}

/* -------------------------------------------------------- */
/* SIDEBARS */
/* -------------------------------------------------------- */

aside {
  grid-area: aside;
  border: var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--sidebar-background-color);
  padding: var(--padding);
  color: var(--sidebar-text-color);
}

.left-sidebar {
  grid-area: leftSidebar;
}

.right-sidebar {
  grid-area: rightSidebar;
}

.sidebar-title {
  font-weight: bold;
  font-size: 1.2em;
  font-family: var(--heading-font);
}

.sidebar-section:not(:last-child) {
  margin-bottom: 3em;
}

.sidebar-section ul,
.sidebar-section ol {
  padding-left: 1.5em;
}

.sidebar-section > *:not(p):not(ul):not(ol):not(blockquote) {
  margin-top: 10px;
}

/* Sidebar Blockquote: */

.sidebar-section blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
  overflow: hidden;
}

.sidebar-section blockquote > *:first-child {
  margin-top: 0;
}

.sidebar-section blockquote > *:last-child {
  margin-bottom: 0;
}

/* Site Button: */

.site-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-button textarea {
  font-family: monospace;
  font-size: 0.7em;
}

/* -------------------------------------------------------- */
/* FOOTER */
/* -------------------------------------------------------- */

footer {
  grid-area: footer;
  border: var(--border);
  border-radius: 0px 0px 10px 10px;
  overflow: hidden;
  font-size: 0.75em;
  padding: 15px;
  background: var(--content-background-color);
  display: flex;
  justify-content: center;
}

footer a,
footer a:visited {
  color: var(--link-color);
}

footer a:hover,
footer a:focus {
  color: var(--link-color-hover);
}

/* -------------------------------------------------------- */
/* NAVIGATION */
/* -------------------------------------------------------- */

.navigation {
  border: 1px solid #eeeeee;
}

.navlist {
  display: block;
  width: 165px;
  color: #555555;
  line-height: 24px;
  margin-right: 0;
  margin-left: 0;
  padding-left: 20px;
  background-image: url(./images/cjtg8e.png);
  background-size: cover;
  background-color: #eeeeee;
  height: 24px;
}

.navlist:hover {
  background-image: url(https://file.garden/ZpAY23nXh1uz4OCJ/neocities/3g74f9.png);
  background-size: cover;
  --link-color: #000000;
}

/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */

main {
  line-height: 1.5;
}

main a,
main a:visited {
  color: var(--link-color);
}

main a:hover,
main a:focus {
  color: var(--link-color-hover);
  text-decoration-style: wavy;
}

main p,
main .image,
main .full-width-image,
main .two-columns {
  margin: 0.75em 0;
}

main ol,
main ul {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

main ol li,
main ul li {
  margin-bottom: 0.2em;
  line-height: 1.3;
}

main ol {
  padding-left: 2em;
}

main blockquote {
  background: rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin: 1em 0;
  border-radius: 10px;
}

main pre {
  margin: 1em 0 1.5em;
}

main code {
  text-transform: none;
}

main center {
  margin: 1em 0;
  padding: 0 1em;
}

main hr {
  border: 0;
  border-top: var(--border);
  margin: 1.5em 0;
}

.flex-container {
  display: flex;
  flex-direction: row;
  border-radius: 5px;
  padding: 3px;
}

/* HEADINGS: */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  font-family: var(--heading-font);
  margin-bottom: 0;
  line-height: 1.5;
}

main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
  margin-top: 0;
}

main h1 {
  font-size: 1.5em;
}

main h2 {
  font-size: 1.4em;
}

main h3 {
  font-size: 1.3em;
}

main h4 {
  font-size: 1.2em;
}

main h5 {
  font-size: 1.1em;
}

main h6 {
  font-size: 1em;
}

/* COLUMNS: */

.two-columns {
  display: flex;
}

.two-columns > * {
  flex: 1 1 0;
  margin: 0;
}

.two-columns > *:first-child {
  padding-right: 0.75em;
}

.two-columns > *:last-child {
  padding-left: 0.75em;
}

/* -------------------------------------------------------- */
/* CONTENT */
/* -------------------------------------------------------- */

.image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.full-width-image {
  display: block;
  width: 100%;
  height: auto;
}

.images {
  display: flex;
  width: calc(100% + 5px + 5px);
  margin-left: -5px;
  margin-right: -5px;
}

.images img {
  width: 100%;
  height: auto;
  padding: 5px;
  margin: 0;
  overflow: hidden;
}

.aaa {
  border: 1px solid #ef67a2;
  border-radius: 5px;
  padding: 4px;
  margin: 5px;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.ueeee {
  border: 1px solid #ef67a2;
  border-radius: 5px;
  padding: 4px;
  margin: 5px;
  width: 100%;
  height: 100%;
  overflow: auto;
}

#statuscafe {
  padding: 0.5em;
  border: 1px solid #ef67a2;
  border-radius: 5px;
  background: white;
}
#statuscafe-username {
  margin-bottom: 0.5em;
}
#statuscafe-content {
  margin: 1 1em 1.5em 1em;
}

.bubble {
  background-image: url(https://file.garden/ZpAY23nXh1uz4OCJ/neocities/711bxf.png);
  background-size: 200px;
  width: 200px;
  height: 50px;
  line-height: 40px;
  padding: 0px 20px;
  margin: 0px;
}

.button {
  background-image: url(https://file.garden/ZpAY23nXh1uz4OCJ/neocities/gkjln1.gif);
  border: none;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  margin: 4px 1px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  width: 55px;
  background-size: 55px 25px;
  color: #000;
}
.button1:hover {
  background-image: url(./images/no657j.png);
  color: #000;
}

.button2 {
  width: 40px;
  background-size: 40px 25px;
  color: #000;
}

.button2:hover {
  background-image: url(./images/no657j.png);
  color: #000;
}

.button3 {
  width: 70px;
  background-size: 70px 25px;
  color: #000;
}

.button3:hover {
  background-image: url(./images/no657j.png);
  color: #000;
}

.center {
  border: 1px solid #adc1cf;
  border-radius: 10px;
  background: #ffffff;
  width: 150px;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
}
#phone {
  height: 90%;
}
#overlay {
  position: absolute;
  top: -20px;
  left: 0px;
  width: 100%;
}
#new {
  font-size: 25px;
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  -webkit-animation: pop 1s ease-in-out infinite alternate;
  -moz-animation: pop 1s ease-in-out infinite alternate;
  animation: pop 1s ease-in-out infinite alternate;
  filter: drop-shadow(0px 1px #666666) drop-shadow(0 -1px #666666)
    drop-shadow(1px 0 #666666) drop-shadow(-1px 0 #666666)
    drop-shadow(0px 1px #fff) drop-shadow(0 -1px #fff) drop-shadow(1px 0 #fff)
    drop-shadow(-1px 0 #fff);
}
#abt {
  font-size: 25px;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: fit-content;
  -webkit-animation: pop 1s ease-in-out infinite alternate;
  -moz-animation: pop 1s ease-in-out infinite alternate;
  animation: pop 1s ease-in-out infinite alternate;
  filter: drop-shadow(0px 1px #666666) drop-shadow(0 -1px #666666)
    drop-shadow(1px 0 #666666) drop-shadow(-1px 0 #666666)
    drop-shadow(0px 1px #fff) drop-shadow(0 -1px #fff) drop-shadow(1px 0 #fff)
    drop-shadow(-1px 0 #fff);
  
  #sticker {
  position: absolute;
  top: 100px;
  right: 13px;
  width: 35%;
  transform: rotate(20deg);
}
#sticker:hover {
  transform: rotate(35deg);
}

@keyframes pop {
  from {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1);
  }
  to {
    transform: scale(0.95);
  }
}

@-webkit-keyframes pop {
  from {
    -webkit-transform: scale(0.95);
  }
  50% {
    -webkit-transform: scale(1);
  }
  to {
    -webkit-transform: scale(0.95);
  }
}


/* -------------------------------------------------------- */
/* ACCESSIBILITY */
/* -------------------------------------------------------- */

/* please do not remove this. */

#skip-to-content-link {
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  padding: 0.375rem 0.75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: var(--content-background-color);
  color: var(--text-color);
  transform: translateY(-3rem);
  transition: transform 0.1s ease-in;
  z-index: 99999999999;
}

#skip-to-content-link:focus,
#skip-to-content-link:focus-within {
  transform: translateY(0);
}

/* -------------------------------------------------------- */
/* MOBILE RESPONSIVE */
/* -------------------------------------------------------- */

/* CSS Code for devices < 800px */
@media (max-width: 800px) {
  body {
    font-size: 14px;
  }

  .layout {
    width: 100%;
    grid-template: "header" auto  "leftSidebar" auto "main" auto "footer" auto / 1fr;
    /* Confused by the grid? Check out my tutorial: https://petrapixel.neocities.org/coding/positioning-tutorial#grid */
  }

  
  .right-sidebar { 
    display: none;
  }

  aside {
    border-bottom: 1px solid;
    padding: 9px;
    font-size: 0.9em;
  }

  
  nav {
    padding: 0;
  }

  nav > ul {
    padding-top: 0.5em;
  }

  nav > ul li > a,
  nav > ul li > details summary,
  nav > ul li > strong {
    padding: 0.5em;
  }

  main {
    max-height: none;
    padding: 15px;
  }

  .images {
    flex-wrap: wrap;
  }

  .images img {
    width: 100%;
  }

  #skip-to-content-link {
    font-size: 1rem;
  }
}

/*-- scroll --*/

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar:horizontal {
  height: 17px;
}

::-webkit-scrollbar-corner {
  background: #eee;
}

::-webkit-scrollbar-track:vertical {
  background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
}

::-webkit-scrollbar-track:horizontal {
  background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
}

::-webkit-scrollbar-thumb {
  border: 1.5px solid #888;
  border-radius: 3px;
  box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
  background-color: #eee;
}

::-webkit-scrollbar-thumb:vertical {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC")
      no-repeat 50%,
    linear-gradient(90deg, #eee 45%, #ddd 0, #bbb);
}

::-webkit-scrollbar-thumb:horizontal {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC")
      no-repeat 50%,
    linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
}

::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
  display: block;
}

::-webkit-scrollbar-button:vertical {
  height: 10px;
}

::-webkit-scrollbar-button:vertical:start:decrement {
  background: white;
  background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-radius: 5px;
}

::-webkit-scrollbar-button:vertical:start:increment {
  display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
  display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
  background: white;
  background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-radius: 5px;
}

/* Edward Elric - Fullmetal Alchemist 5 - https://www.cursors-4u.com/cursor/edward-elric-fullmetal-alchemist-5 */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/edward-elric-fullmetal-alchemist-5-7fe19a30-32.webp') 32 32, auto !important;
}
/* End www.Cursors-4U.com Code */