/* 
  __  __  ____ _______ _    _ ______ _____    _______ ____    ______          _____ _______ _    _ 
 |  \/  |/ __ \__   __| |  | |  ____|  __ \  |__   __/ __ \  |  ____|   /\   |  __ \__   __| |  | |
 | \  / | |  | | | |  | |__| | |__  | |__) |    | | | |  | | | |__     /  \  | |__) | | |  | |__| |
 | |\/| | |  | | | |  |  __  |  __| |  _  /     | | | |  | | |  __|   / /\ \ |  _  /  | |  |  __  |
 | |  | | |__| | | |  | |  | | |____| | \ \     | | | |__| | | |____ / ____ \| | \ \  | |  | |  | |
 |_|  |_|\____/  |_|  |_|  |_|______|_|  \_\    |_|  \____/  |______/_/    \_\_|  \_\ |_|  |_|  |_|
 
By Pteri @pteri.neocities.org
 
Earthbound window style (mint) by Ryosuke @Codepen
Game backgrounds by fantasyanime.com
Theme switcher by squidknees @squidknees.net
Sprites obtained from videogamesprites.net
Typewriter css by Geoff Graham @Codepen
 
 */
 
   /* Theme variables */
   
    :root {
    --header: url("https://files.catbox.moe/qo9don.png"); /* main header*/
    --bg: url("https://files.catbox.moe/r3b6m7.gif"); /* main background */
    --head: url("https://files.catbox.moe/96l680.png"); /* header sprite */
    --head-h:url("https://files.catbox.moe/5nz2f0.png"); /* header sprite on hover */
    --ac: #68d0b8; /* link and select color */
 
    --flavor: 
    0 0 0 5px #383050, /* dark grey */
    0 0 0 10px #68d0b8, /* minty blue */
        0 0 0 12px #f7e8a8, /* white */
        0 0 0 15px #3d3c55; /* black */
    }
    

    
    
  
    
   body {
      background-image: var(--bg);
      background-position: center;
      background-size: cover;
      text-align: justify;
      font-family: Earthmoma;
      font-size: 12px;
      margin: auto;
 
    }
 
 
    ::-moz-selection {
      color:var(--ac);
      background: #280828;
    }
 
    ::selection {
     color:var(--ac);
      background: #280828;
    }
 
    ::-webkit-scrollbar {
      display: none;
    }
 
  @font-face {
      font-family: Earthbound;
      src: url(https://files.catbox.moe/erbyj2.ttf) format('truetype');
    }
        @font-face {
             font-family: Earthmoma;
      src: url(https://files.catbox.moe/5vhm6v.ttf) format('truetype');
  }
  
 
.container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 0.2fr;
  gap: 40px 40px;
  grid-auto-flow: row;
  grid-template-areas:
    "header header header header"
    "side1 main main side2"
    "side1 main main side2"
    "side1 main main side2"
    "footer footer footer footer"
    "side3 side3 side3 side3";
  margin: 0;
  padding:20px;
}
 
.header { grid-area: header; 
    background-color: #280828;
    background-image: var(--header);
    background-size:cover;
    color:#e7e6b3;
    padding:10px;
    border-radius:1px;
  box-shadow:
   var(--flavor);
}
 
.main { grid-area: main; 
  overflow:auto;
    background-color: #280828;
    color:#e7e6b3;
    padding:10px;
    height:600px;
    border-radius:1px;
  box-shadow:
    var(--flavor);
}
 
.footer { grid-area: footer; 
  text-align:center;
    background-color: #280828;
    color:#e7e6b3;
    padding:10px;
    border-radius:1px;
  box-shadow:
   var(--flavor);
}
 
.side1 { grid-area: side1; 
    background-color: #280828;
    color:#e7e6b3;
  text-align:center;
    border-radius:1px;
    height:auto;
  box-shadow:
     var(--flavor);
}
 
.side2 { grid-area: side2; 
    background-color: #280828;
    color:#e7e6b3;
  text-align:center;
  box-shadow:
   var(--flavor);
}

.side3 { grid-area: side3; 
    background-color: #280828;
    color:#e7e6b3;
  text-align:center;
  box-shadow:
   var(--flavor);
}
 
button {
    position:relative;
    cursor:pointer;
    background:transparent;
    border:0;
    color:#e7e6b3;
    font-size:1em;
    font-family: Earthmoma;
}
 
 button:hover::before {
    content:'';
    position:absolute;
    left:-0.3em;
    top:0.4em;
  width: 0; 
  height: 0; 
  border-top: 0.3rem solid transparent;
  border-bottom: 0.3rem solid transparent;
  border-left: 0.3rem solid #e7e6b3;
}
 
#title {
    Text-align:center;
      margin-top:20px;
 Font-family:Earthbound;
 Font-size:120px;
   background-image: linear-gradient(to bottom, #9c4abd, #ff7b31);
      background-size: cover;
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff700;
  
    
}
 
#title::before {
    content:var(--head);
    margin-right:20px;
    margin-top:20px;
}
#title:hover:before {
    content:var(--head-h);
    margin-right:20px;
    margin-top:20px;
}
 
#title::after {
    content:var(--head);
    margin-left:20px;
    margin-top:20px;
}
#title:hover:after {
    content:var(--head-h);
    margin-left:20px;
    margin-top:20px;
}
 
h1 {
    font-size:16px bold;
}
 
h2 {
    font-size:14px bold;
}
 
a {
  color:var(--ac);
}
select {
    background: #280828;
    color: #e7e6b3;
    border-radius: 5px;
    padding:5px;
    margin-bottom:10px;
}


 
.typewriter p {
          font-family: Earthmoma;
      font-size: 12px;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 6s steps(30, end),
    blink-caret .5s step-end infinite;
}
 
/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
 
@media only screen and (max-width: 640px) {
      body {
        font-size: 12px;
        overflow:auto;
      }
 
      .container {
        display: flex;
        flex-flow: column;
        width: 90%;
      }
      .header { grid-area: header;
          order :1;
      }
      .main { grid-area: main;
                order:2;
      }
            .side1 { grid-area: side1;
                order:3;
      }
          .side2 { grid-area: side2;
                order:4;
      }
              .footer { grid-area: footer;
                order:5;
      }
}
          .side3 { grid-area: side3;
                order:6;
      }
      
      #title {
 Font-size:89px;
}
 
 
#title::before {
     display:none;
}
#title:hover:before {
   display:none;
}
 
#title::after {
  display:none;
}
#title:hover:after {
   display:none;
}
 
  }