API tools faq
paste
Pteriw

Mother to Earth CSS

Pteriw
Aug 16th, 2024
186
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.95 KB | None | 0 0
raw download clone embed print report
  1.  /*
  2.   __  __  ____ _______ _    _ ______ _____    _______ ____    ______          _____ _______ _    _
  3.  |  \/  |/ __ \__   __| |  | |  ____|  __ \  |__   __/ __ \  |  ____|   /\   |  __ \__   __| |  | |
  4.  | \  / | |  | | | |  | |__| | |__  | |__) |    | | | |  | | | |__     /  \  | |__) | | |  | |__| |
  5.  | |\/| | |  | | | |  |  __  |  __| |  _  /     | | | |  | | |  __|   / /\ \ |  _  /  | |  |  __  |
  6.  | |  | | |__| | | |  | |  | | |____| | \ \     | | | |__| | | |____ / ____ \| | \ \  | |  | |  | |
  7.  |_|  |_|\____/  |_|  |_|  |_|______|_|  \_\    |_|  \____/  |______/_/    \_\_|  \_\ |_|  |_|  |_|
  8.  
  9. By Pteri @pteri.neocities.org
  10.  
  11. Earthbound window style (mint) by Ryosuke @Codepen
  12. Game backgrounds by fantasyanime.com
  13. Theme switcher by squidknees @squidknees.net
  14. Sprites obtained from videogamesprites.net
  15. Typewriter css by Geoff Graham @Codepen
  16.  
  17.  */
  18.  
  19.    /* Theme variables */
  20.    
  21.     :root {
  22.     --header: url("https://files.catbox.moe/qo9don.png"); /* main header*/
  23.     --bg: url("https://files.catbox.moe/r3b6m7.gif"); /* main background */
  24.     --head: url("https://files.catbox.moe/96l680.png"); /* header sprite */
  25.     --head-h:url("https://files.catbox.moe/5nz2f0.png"); /* header sprite on hover */
  26.     --ac: #68d0b8; /* link and select color */
  27.  
  28.     --flavor:
  29.     0 0 0 5px #383050, /* dark grey */
  30.     0 0 0 10px #68d0b8, /* minty blue */
  31.         0 0 0 12px #f7e8a8, /* white */
  32.         0 0 0 15px #3d3c55; /* black */
  33.     }
  34.    
  35.     .strawberry {
  36.      --header: url("https://files.catbox.moe/xlwdd3.png");
  37.      --bg: url("https://files.catbox.moe/xlwdd3.png");
  38.      --head: url("https://files.catbox.moe/ec8m1e.gif");
  39.      --head-h:url("https://files.catbox.moe/evocfx.gif");
  40.      --ac: #ff94ad;
  41.  
  42.  
  43.     --flavor:
  44.     0 0 0 5px #383050, /* dark grey */
  45.     0 0 0 10px #ff94ad, /* strawberry */
  46.         0 0 0 12px #f7e8a8, /* white */
  47.         0 0 0 15px #3d3c55; /* black */
  48.     }
  49.    
  50.     .banana {
  51.     --header: url("https://files.catbox.moe/ifj1g1.png");
  52.     --bg: url("https://files.catbox.moe/ifj1g1.png");
  53.     --head: url("https://files.catbox.moe/qp71hk.gif");
  54.     --head-h:url("https://files.catbox.moe/u8q7sm.gif");
  55.     --ac: #efff5a;
  56.  
  57.  
  58.     --flavor:
  59.     0 0 0 5px #383050, /* dark grey */
  60.     0 0 0 10px #efff5a, /* banana */
  61.         0 0 0 12px #f7e8a8, /* white */
  62.         0 0 0 15px #3d3c55; /* black */
  63.     }
  64.    
  65.     .peanut {
  66.     --header: url("https://files.catbox.moe/bovzhu.png");
  67.     --bg: url("https://files.catbox.moe/bovzhu.png");
  68.     --head: url("https://files.catbox.moe/2q5ttu.gif");
  69.     --head-h:url("https://files.catbox.moe/3nzsfo.gif");
  70.     --ac: #e7a552;
  71.  
  72.  
  73.     --flavor:
  74.     0 0 0 5px #383050, /* dark grey */
  75.     0 0 0 10px #e7a552, /* peanut */
  76.         0 0 0 12px #f7e8a8, /* white */
  77.         0 0 0 15px #3d3c55; /* black */
  78.     }
  79.    
  80.    
  81.  
  82.    
  83.    body {
  84.       background-image: var(--bg);
  85.       background-position: center;
  86.       background-size: cover;
  87.       text-align: justify;
  88.       font-family: Earthmoma;
  89.       font-size: 12px;
  90.       margin: auto;
  91.  
  92.     }
  93.  
  94.  
  95.     ::-moz-selection {
  96.       color:var(--ac);
  97.       background: #280828;
  98.     }
  99.  
  100.     ::selection {
  101.      color:var(--ac);
  102.       background: #280828;
  103.     }
  104.  
  105.     ::-webkit-scrollbar {
  106.       display: none;
  107.     }
  108.  
  109.   @font-face {
  110.       font-family: Earthbound;
  111.       src: url(https://files.catbox.moe/erbyj2.ttf) format('truetype');
  112.     }
  113.         @font-face {
  114.              font-family: Earthmoma;
  115.       src: url(https://files.catbox.moe/5vhm6v.ttf) format('truetype');
  116.   }
  117.  
  118.  
  119. .container {  display: grid;
  120.   grid-template-columns: 1fr 1fr 1fr 1fr;
  121.   grid-template-rows: 1fr 1fr 1fr 1fr 0.2fr;
  122.   gap: 40px 40px;
  123.   grid-auto-flow: row;
  124.   grid-template-areas:
  125.     "header header header header"
  126.     "side1 main main side2"
  127.     "side1 main main side2"
  128.     "side1 main main side2"
  129.     "footer footer footer footer";
  130.   margin: 0;
  131.   padding:20px;
  132. }
  133.  
  134. .header { grid-area: header;
  135.     background-color: #280828;
  136.     background-image: var(--header);
  137.     background-size:cover;
  138.     color:#e7e6b3;
  139.     padding:10px;
  140.     border-radius:1px;
  141.   box-shadow:
  142.    var(--flavor);
  143. }
  144.  
  145. .main { grid-area: main;
  146.   overflow:auto;
  147.     background-color: #280828;
  148.     color:#e7e6b3;
  149.     padding:10px;
  150.     height:600px;
  151.     border-radius:1px;
  152.   box-shadow:
  153.     var(--flavor);
  154. }
  155.  
  156. .footer { grid-area: footer;
  157.   text-align:center;
  158.     background-color: #280828;
  159.     color:#e7e6b3;
  160.     padding:10px;
  161.     border-radius:1px;
  162.   box-shadow:
  163.    var(--flavor);
  164. }
  165.  
  166. .side1 { grid-area: side1;
  167.     background-color: #280828;
  168.     color:#e7e6b3;
  169.   text-align:center;
  170.     border-radius:1px;
  171.     height:auto;
  172.   box-shadow:
  173.      var(--flavor);
  174. }
  175.  
  176. .side2 { grid-area: side2;
  177.     background-color: #280828;
  178.     color:#e7e6b3;
  179.   text-align:center;
  180.   box-shadow:
  181.    var(--flavor);
  182. }
  183.  
  184. button {
  185.     position:relative;
  186.     cursor:pointer;
  187.     background:transparent;
  188.     border:0;
  189.     color:#e7e6b3;
  190.     font-size:1em;
  191.     font-family: Earthmoma;
  192. }
  193.  
  194.  button:hover::before {
  195.     content:'';
  196.     position:absolute;
  197.     left:-0.3em;
  198.     top:0.4em;
  199.   width: 0;
  200.   height: 0;
  201.   border-top: 0.3rem solid transparent;
  202.   border-bottom: 0.3rem solid transparent;
  203.   border-left: 0.3rem solid #e7e6b3;
  204. }
  205.  
  206. #title {
  207.     Text-align:center;
  208.       margin-top:20px;
  209.  Font-family:Earthbound;
  210.  Font-size:120px;
  211.    background-image: linear-gradient(to bottom, #9c4abd, #ff7b31);
  212.       background-size: cover;
  213.       background-clip: text;
  214.       -webkit-background-clip: text;
  215.       color: transparent;
  216.   -webkit-text-stroke-width: 1px;
  217.   -webkit-text-stroke-color: #fff700;
  218.  
  219.    
  220. }
  221.  
  222. #title::before {
  223.     content:var(--head);
  224.     margin-right:20px;
  225.     margin-top:20px;
  226. }
  227. #title:hover:before {
  228.     content:var(--head-h);
  229.     margin-right:20px;
  230.     margin-top:20px;
  231. }
  232.  
  233. #title::after {
  234.     content:var(--head);
  235.     margin-left:20px;
  236.     margin-top:20px;
  237. }
  238. #title:hover:after {
  239.     content:var(--head-h);
  240.     margin-left:20px;
  241.     margin-top:20px;
  242. }
  243.  
  244. h1 {
  245.     font-size:16px bold;
  246. }
  247.  
  248. h2 {
  249.     font-size:14px bold;
  250. }
  251.  
  252. a {
  253.   color:var(--ac);
  254. }
  255. select {
  256.     background: #280828;
  257.     color: #e7e6b3;
  258.     border-radius: 5px;
  259.     padding:5px;
  260.     margin-bottom:10px;
  261. }
  262. /*
  263.  
  264. -------------------------------------- SIDE 1 --------------------------------------
  265.  
  266. */
  267.  
  268. /* NESS */
  269.  
  270. h3.ness::before {
  271. content: url(https://files.catbox.moe/2zemus.gif);
  272.     margin-right: 10px;
  273.  
  274. }
  275.  
  276. h3.ness:hover:before {
  277. content: url("https://files.catbox.moe/o5udbh.gif");
  278.     margin-right: 10px;
  279. }
  280.  
  281. h3.ness::after {
  282. content: url(https://files.catbox.moe/2zemus.gif);
  283.     margin-left: 10px;
  284.  
  285. }
  286.  
  287. h3.ness:hover:after {
  288. content: url("https://files.catbox.moe/o5udbh.gif");
  289.     margin-left: 10px;
  290. }
  291.  
  292. /* PAULA */
  293.  
  294.  
  295. h3.paula::before {
  296. content: url(https://files.catbox.moe/zx7lql.gif);
  297.     margin-right: 10px;
  298.  
  299. }
  300.  
  301. h3.paula:hover:before {
  302. content: url(https://files.catbox.moe/h8udio.gif);
  303.     margin-right: 10px;
  304. }
  305.  
  306. h3.paula::after {
  307. content: url(https://files.catbox.moe/zx7lql.gif);
  308.     margin-left: 10px;
  309.  
  310. }
  311.  
  312. h3.paula:hover:after {
  313. content: url(https://files.catbox.moe/h8udio.gif);
  314.     margin-left: 10px;
  315. }
  316.  
  317. /* JEFF */
  318.  
  319.  
  320. h3.jeff::before {
  321. content: url(https://files.catbox.moe/b0mkrf.gif);
  322.     margin-right: 10px;
  323.  
  324. }
  325.  
  326. h3.jeff:hover:before {
  327. content: url(https://files.catbox.moe/v90xnl.gif);
  328.     margin-right: 10px;
  329. }
  330.  
  331. h3.jeff::after {
  332. content: url(https://files.catbox.moe/b0mkrf.gif);
  333.     margin-left: 10px;
  334.  
  335. }
  336.  
  337. h3.jeff:hover:after {
  338. content: url(https://files.catbox.moe/v90xnl.gif);
  339.     margin-left: 10px;
  340. }
  341.  
  342. /* POO */
  343.  
  344.  
  345. h3.poo::before {
  346. content: url(https://files.catbox.moe/orgq2e.gif);
  347.     margin-right: 10px;
  348.  
  349. }
  350.  
  351. h3.poo:hover:before {
  352. content: url(https://files.catbox.moe/jzm2sj.gif);
  353.     margin-right: 10px;
  354. }
  355.  
  356. h3.poo::after {
  357. content: url(https://files.catbox.moe/orgq2e.gif);
  358.     margin-left: 10px;
  359.  
  360. }
  361.  
  362. h3.poo:hover:after {
  363. content: url(https://files.catbox.moe/jzm2sj.gif);
  364.     margin-left: 10px;
  365. }
  366.  
  367. /*
  368.  
  369. -------------------------------------- SIDE 2 --------------------------------------
  370.  
  371. */
  372.  
  373. /* TONY */
  374.  
  375.  
  376. h3.tony::before {
  377. content: url(https://files.catbox.moe/fvkagk.gif);
  378.     margin-right: 10px;
  379.  
  380. }
  381.  
  382. h3.tony:hover:before {
  383. content: url(https://files.catbox.moe/0w8fh0.gif);
  384.     margin-right: 10px;
  385. }
  386.  
  387. h3.tony::after {
  388. content: url(https://files.catbox.moe/fvkagk.gif);
  389.     margin-left: 10px;
  390.  
  391. }
  392.  
  393. h3.tony:hover:after {
  394. content: url(https://files.catbox.moe/0w8fh0.gif);
  395.     margin-left: 10px;
  396. }
  397.  
  398. /* ANDONUTS */
  399.  
  400.  
  401. h3.andonuts::before {
  402. content: url(https://files.catbox.moe/boq0ff.gif);
  403.     margin-right: 10px;
  404.  
  405. }
  406.  
  407. h3.andonuts:hover:before {
  408. content: url(https://files.catbox.moe/dntuim.gif);
  409.     margin-right: 10px;
  410. }
  411.  
  412. h3.andonuts::after {
  413. content: url(https://files.catbox.moe/boq0ff.gif);
  414.     margin-left: 10px;
  415.  
  416. }
  417.  
  418. h3.andonuts:hover:after {
  419. content: url(https://files.catbox.moe/dntuim.gif);
  420.     margin-left: 10px;
  421. }
  422.  
  423. /* TRACY */
  424.  
  425.  
  426. h3.tracy::before {
  427. content: url(https://files.catbox.moe/7w9l0s.gif);
  428.     margin-right: 10px;
  429.  
  430. }
  431.  
  432. h3.tracy:hover:before {
  433. content: url(https://files.catbox.moe/8zjqev.gif);
  434.     margin-right: 10px;
  435. }
  436.  
  437. h3.tracy::after {
  438. content: url(https://files.catbox.moe/7w9l0s.gif);
  439.     margin-left: 10px;
  440.  
  441. }
  442.  
  443. h3.tracy:hover:after {
  444. content: url(https://files.catbox.moe/8zjqev.gif);
  445.     margin-left: 10px;
  446. }
  447.  
  448. /* CAT */
  449.  
  450.  
  451. h3.cat::before {
  452. content: url(https://files.catbox.moe/4zqpa2.gif);
  453.     margin-right: 10px;
  454.  
  455. }
  456.  
  457. h3.cat:hover:before {
  458. content: url(https://files.catbox.moe/djiamw.gif);
  459.     margin-right: 10px;
  460. }
  461.  
  462. h3.cat::after {
  463. content: url(https://files.catbox.moe/xg37q2.gif);
  464.     margin-left: 10px;
  465.  
  466. }
  467.  
  468. h3.cat:hover:after {
  469. content: url(https://files.catbox.moe/684a48.gif);
  470.     margin-left: 10px;
  471. }
  472.  
  473. .typewriter p {
  474.           font-family: Earthmoma;
  475.       font-size: 12px;
  476.   overflow: hidden; /* Ensures the content is not revealed until the animation */
  477.   white-space: nowrap; /* Keeps the content on a single line */
  478.   margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  479.   letter-spacing: .15em; /* Adjust as needed */
  480.   animation:
  481.     typing 6s steps(30, end),
  482.     blink-caret .5s step-end infinite;
  483. }
  484.  
  485. /* The typing effect */
  486. @keyframes typing {
  487.   from { width: 0 }
  488.   to { width: 100% }
  489. }
  490.  
  491. @media only screen and (max-width: 640px) {
  492.       body {
  493.         font-size: 12px;
  494.         overflow:auto;
  495.       }
  496.  
  497.       .container {
  498.         display: flex;
  499.         flex-flow: column;
  500.         width: 90%;
  501.       }
  502.       .header { grid-area: header;
  503.           order :1;
  504.       }
  505.       .main { grid-area: main;
  506.                 order:2;
  507.       }
  508.             .side1 { grid-area: side1;
  509.                 order:3;
  510.       }
  511.           .side2 { grid-area: side2;
  512.                 order:4;
  513.       }
  514.               .footer { grid-area: footer;
  515.                 order:5;
  516.       }
  517.      
  518.       #title {
  519.  Font-size:89px;
  520. }
  521.  
  522.  
  523. #title::before {
  524.      display:none;
  525. }
  526. #title:hover:before {
  527.    display:none;
  528. }
  529.  
  530. #title::after {
  531.   display:none;
  532. }
  533. #title:hover:after {
  534.    display:none;
  535. }
  536.  
  537.   }    
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!