Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*
- __ __ ____ _______ _ _ ______ _____ _______ ____ ______ _____ _______ _ _
- | \/ |/ __ \__ __| | | | ____| __ \ |__ __/ __ \ | ____| /\ | __ \__ __| | | |
- | \ / | | | | | | | |__| | |__ | |__) | | | | | | | | |__ / \ | |__) | | | | |__| |
- | |\/| | | | | | | | __ | __| | _ / | | | | | | | __| / /\ \ | _ / | | | __ |
- | | | | |__| | | | | | | | |____| | \ \ | | | |__| | | |____ / ____ \| | \ \ | | | | | |
- |_| |_|\____/ |_| |_| |_|______|_| \_\ |_| \____/ |______/_/ \_\_| \_\ |_| |_| |_|
- 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 */
- }
- .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;
- }
- }
Add Comment
Please, Sign In to add comment