/*
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/ifj1g1.png");
    --bg: url("https://files.catbox.moe/ifj1g1.png");
    --head: url("https://files.catbox.moe/qp71hk.gif");
    --head-h:url("https://files.catbox.moe/u8q7sm.gif");
    --ac: #efff5a;


    --flavor: 
    0 0 0 5px #383050, /* dark grey */
    0 0 0 10px #efff5a, /* banana */
		0 0 0 12px #f7e8a8, /* white */
		0 0 0 15px #3d3c55; /* black */
    }
    
    .strawberry {
     --header: url("https://files.catbox.moe/xlwdd3.png");
     --bg: url("https://files.catbox.moe/xlwdd3.png");
     --head: url("https://files.catbox.moe/ec8m1e.gif");
     --head-h:url("https://files.catbox.moe/evocfx.gif");
     --ac: #ff94ad;


    --flavor: 
    0 0 0 5px #383050, /* dark grey */
    0 0 0 10px #ff94ad, /* strawberry */
		0 0 0 12px #f7e8a8, /* white */
		0 0 0 15px #3d3c55; /* black */
    }
    
    .banana {
    --header: url("https://files.catbox.moe/ifj1g1.png");
    --bg: url("https://files.catbox.moe/ifj1g1.png");
    --head: url("https://files.catbox.moe/qp71hk.gif");
    --head-h:url("https://files.catbox.moe/u8q7sm.gif");
    --ac: #efff5a;


    --flavor: 
    0 0 0 5px #383050, /* dark grey */
    0 0 0 10px #efff5a, /* banana */
		0 0 0 12px #f7e8a8, /* white */
		0 0 0 15px #3d3c55; /* black */
    }
    
    .peanut {
    --header: url("https://files.catbox.moe/bovzhu.png");
    --bg: url("https://files.catbox.moe/bovzhu.png");
    --head: url("https://files.catbox.moe/2q5ttu.gif");
    --head-h:url("https://files.catbox.moe/3nzsfo.gif");
    --ac: #e7a552;


    --flavor: 
    0 0 0 5px #383050, /* dark grey */
    0 0 0 10px #e7a552, /* peanut */
		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";
  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);
}

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;
}
/* 

-------------------------------------- SIDE 1 --------------------------------------

*/

/* NESS */

h3.ness::before {
content: url(https://files.catbox.moe/2zemus.gif);
    margin-right: 10px;

}

h3.ness:hover:before {
content: url("https://files.catbox.moe/o5udbh.gif");
    margin-right: 10px;
}

h3.ness::after {
content: url(https://files.catbox.moe/2zemus.gif);
    margin-left: 10px;

}

h3.ness:hover:after {
content: url("https://files.catbox.moe/o5udbh.gif");
    margin-left: 10px;
}

/* PAULA */


h3.paula::before {
content: url(https://files.catbox.moe/zx7lql.gif);
    margin-right: 10px;

}

h3.paula:hover:before {
content: url(https://files.catbox.moe/h8udio.gif);
    margin-right: 10px;
}

h3.paula::after {
content: url(https://files.catbox.moe/zx7lql.gif);
    margin-left: 10px;

}

h3.paula:hover:after {
content: url(https://files.catbox.moe/h8udio.gif);
    margin-left: 10px;
}

/* JEFF */


h3.jeff::before {
content: url(https://files.catbox.moe/b0mkrf.gif);
    margin-right: 10px;

}

h3.jeff:hover:before {
content: url(https://files.catbox.moe/v90xnl.gif);
    margin-right: 10px;
}

h3.jeff::after {
content: url(https://files.catbox.moe/b0mkrf.gif);
    margin-left: 10px;

}

h3.jeff:hover:after {
content: url(https://files.catbox.moe/v90xnl.gif);
    margin-left: 10px;
}

/* POO */


h3.poo::before {
content: url(https://files.catbox.moe/orgq2e.gif);
    margin-right: 10px;

}

h3.poo:hover:before {
content: url(https://files.catbox.moe/jzm2sj.gif);
    margin-right: 10px;
}

h3.poo::after {
content: url(https://files.catbox.moe/orgq2e.gif);
    margin-left: 10px;

}

h3.poo:hover:after {
content: url(https://files.catbox.moe/jzm2sj.gif);
    margin-left: 10px;
}

/* 

-------------------------------------- SIDE 2 --------------------------------------

*/

/* TONY */


h3.tony::before {
content: url(https://files.catbox.moe/fvkagk.gif);
    margin-right: 10px;

}

h3.tony:hover:before {
content: url(https://files.catbox.moe/0w8fh0.gif);
    margin-right: 10px;
}

h3.tony::after {
content: url(https://files.catbox.moe/fvkagk.gif);
    margin-left: 10px;

}

h3.tony:hover:after {
content: url(https://files.catbox.moe/0w8fh0.gif);
    margin-left: 10px;
}

/* ANDONUTS */


h3.andonuts::before {
content: url(https://files.catbox.moe/boq0ff.gif);
    margin-right: 10px;

}

h3.andonuts:hover:before {
content: url(https://files.catbox.moe/dntuim.gif);
    margin-right: 10px;
}

h3.andonuts::after {
content: url(https://files.catbox.moe/boq0ff.gif);
    margin-left: 10px;

}

h3.andonuts:hover:after {
content: url(https://files.catbox.moe/dntuim.gif);
    margin-left: 10px;
}

/* TRACY */


h3.tracy::before {
content: url(https://files.catbox.moe/7w9l0s.gif);
    margin-right: 10px;

}

h3.tracy:hover:before {
content: url(https://files.catbox.moe/8zjqev.gif);
    margin-right: 10px;
}

h3.tracy::after {
content: url(https://files.catbox.moe/7w9l0s.gif);
    margin-left: 10px;

}

h3.tracy:hover:after {
content: url(https://files.catbox.moe/8zjqev.gif);
    margin-left: 10px;
}

/* CAT */


h3.cat::before {
content: url(https://files.catbox.moe/4zqpa2.gif);
    margin-right: 10px;

}

h3.cat:hover:before {
content: url(https://files.catbox.moe/djiamw.gif);
    margin-right: 10px;
}

h3.cat::after {
content: url(https://files.catbox.moe/xg37q2.gif);
    margin-left: 10px;

}

h3.cat:hover:after {
content: url(https://files.catbox.moe/684a48.gif);
    margin-left: 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;
      }
      
      #title {
 Font-size:89px;
}


#title::before {
     display:none;
}
#title:hover:before {
   display:none;
}

#title::after {
  display:none;
}
#title:hover:after {
   display:none;
}

  }