<!-- 
        ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣤⣤⣴⠶⠶⠶⠶⠦⣤⣤⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣶⠾⠟⣿⣿⠾⠛⠉⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠻⢶⣤⣠⣤⣤⣄⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡾⠟⠉⠀⠀⠸⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠛⢷⣀⠈⠙⠻⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡾⠋⠀⠀⠀⢀⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣧⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣾⠏⠀⠀⠀⠀⢠⡿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡀⠀⠀⠀⠈⠻⣦⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⡟⠁⠀⠀⠀⠀⢀⡿⠁⠀⠀⣰⣶⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣄⠀⠀⠀⠀⠀⢿⡀⠀⠀⠀⠀⠀⠙⠷⣤⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⣀⣴⠟⠋⠀⠀⠀⠀⠀⠀⣼⠇⠀⠀⠐⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⣿⣿⡇⠀⠀⠀⠀⢸⣇⠀⠀⠀⠀⠀⠀⠀⠈⠙⠳⣦⣄⡀⠀⠀⠀⠀⠀
⠀⠀⠀⣀⣴⠾⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⢿⡇⠉⠁⠉⠈⠉⠀⠀⠀⠀⠀⠀⣠⢤⣀⠀⠀⠀⠀⠀⠉⠿⠿⠁⡀⠀⠀⠀⢸⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠻⢶⣄⠀⠀⠀
⠀⣠⡾⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣷⣄⠤⠠⠐⢀⡀⠀⠀⠀⠀⠀⠋⠁⠉⠁⠀⠀⠀⠀⠀⠄⠀⠀⠀⢁⠀⠀⣼⢿⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣷⡄⠀
⢠⡿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡟⠻⢶⣤⣴⡾⠷⣦⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⣦⣤⠀⠜⣀⣴⠟⠈⢿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣷⠀
⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡿⠁⠀⠀⣿⠃⠀⠀⢸⡟⠳⠶⠶⠶⢦⣶⣴⣶⣴⣶⣶⣿⠉⠀⠹⣷⣿⣿⣥⣄⡀⠀⢻⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠀⢸⡇
⣿⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⠟⠁⠀⠀⠀⢿⣆⣠⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠳⠀⢀⣿⠟⠉⠉⠉⠛⣷⡄⠙⢷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⠇
⠘⢷⣄⡀⠀⠀⠀⠀⠀⠀⢀⣠⣴⠟⠃⠀⠀⠀⠀⠀⠀⣼⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⠶⠿⣷⡀⠀⠀⣀⠀⠈⣿⡄⠀⠙⢷⣄⡀⠀⠀⠀⠀⠀⠀⣀⣼⠏⠀
⠀⠀⠉⠛⠷⠶⠶⠶⠶⠾⠛⠋⠁⠀⠀⠀⠀⠀⠀⠀⣸⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⣧⣤⣴⠏⠀⠀⣽⡇⠀⠀⠀⠈⠛⠿⠶⠶⠶⠶⠿⠋⠁⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⡇⠀⣠⣤⣄⠀⠀⠀⠀⠀⠀⠀⣀⣀⡀⠀⠀⠀⠀⠀⣼⡇⠀⠀⠀⠀⣴⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⣷⡾⠋⠀⠁⠀⠀⠀⠀⠀⢀⣾⠛⠉⠙⠓⠀⠀⢀⣴⠟⠛⠿⠾⠿⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣷⠀⠀⠐⢶⣶⣶⣶⣶⣾⣿⡀⠀⠀⢶⡶⠛⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⣧⣀⣠⡿⠁⠀⠀⠀⠀⢹⣇⡀⣠⡾⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠁⠀⠀⠀⠀⠀⠀⠀⠙⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
   
        ================================================================
        
                       // Websites that you may find useful // 
                       
            // https://www.w3schools.com/ 
            // https://learnlayout.com/
            // https://lilaclynx.net/responsive.html
            // https://stackoverflow.com/
            // https://codepen.io/
            // https://www.10bestdesign.com/dirtymarkup/
            // https://css-tricks.com/
            // https://www.cssportal.com/
            // https://www.codecademy.com/
            
        ================================================================            

    -->
    
    
<!-- sunflower: a page theme by nenrikido.neocities.org -->

<!-- NOTES #1:
  - Change the favicon (tab icon) by swapping the link after 'shortcut icon'.
  - Webkit (custom) scrollbar doesn't work on Mozilla or Safari.
  - If you'd like to use a tiled background instead of an image, navigate to body -> background and change the property to 'background: var(--bg-image) center / auto repeat'
  - On that note: You can also change the background image positioning to suit your image. This is also true for the right and left images! More info: https://www.w3schools.com/cssref/pr_background-position.php
  - If you'd like a solid color background, delete the line entirely and create a new background-color property
  - ctrl + f NOTES to read the next two instruction sections.
  - Feel free to email me at nenrikido@pm.me with questions, comments, or to show me how you use this! -->

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel='shortcut icon' type='image/x-icon' href='https://meltymods.neocities.org/imgs/psp.gif' />
      <title>Shop Melty Mods</title>
    </head>
    <body>
    
    
<style type="text/css">* {cursor: url(https://meltymods.neocities.org/imgs/cursor-spaceviolet2.gif), auto !important;}</style><a href="https://meltymods.neocities.org/imgs/cursor-spaceviolet2.gif" target="_blank" title="Pink Transparent Star"><img src="https://meltymods.neocities.org/imgs/cursor-spaceviolet2.gif" border="0" alt="Pink Transparent Star" style="position:absolute; top: 0px; right: 0px;" /></a>
    
    <style>
  
  /* NOTES #2: 
  - CHANGE YOUR VARIABLES HERE (:root) I tried to keep these simple, but flexible. If you need more, you can make as many as you like.
  - Links can be local; I only chose web links so this page would display immediately upon copy and pasting the code.
  - If you want to remove a side image, simply remove the image URL. The left image is left blank in this preview, but if you add a url, both images will show. 
  - If you'd like to change the fonts, remember to import your custom fonts first. (See @font-face to see how these fonts were imported). */
  
  :root {
    --title-color: #f5a7d2;
    --title-border: #df5ea5;
    --title-font-size: 4.5em;
    --title-font: 'PORKYS'; 
    --body-font: 'National Park'; 
    --body-font-color: #20550f;
    --box-color: #eee5ff;
    --bg-image: url('https://meltymods.neocities.org/imgs/bg2.jpg');
    --left-image: url(''); 
    --right-image: url('https://meltymods.neocities.org/imgs/meltybun.png');
    --divider-image: url('https://meltymods.neocities.org/imgs/loading%20bar.gif');
  }
  
  body, html {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
  }
  
  *, *::before, *::after {
      box-sizing: border-box;
  }
  
  body {
    background: var(--bg-image) top / cover no-repeat;
    text-align: justify;
    font: 1em var(--body-font);
    color: var(--body-font-color);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-font);
    color: var(--title-color);
    -webkit-text-stroke: 1px var(--title-border);
  }
  
  a {
    color: var(--title-border);
  }
  
  @font-face {
    font-family: 'PORKYS';
    src: url('https://dl.dropbox.com/s/o15z0l76kqbi8jq/PORKH.ttf');
  }
  
  @font-face {
    font-family: 'National Park';
    src: url('https://dl.dropbox.com/s/jox00bymodcheoy/NationalPark-Regular.otf');
  }
  
  ::-webkit-scrollbar {
    width: 0.5em;
  }
   
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 8px var(--title-color);
  }
   
  ::-webkit-scrollbar-thumb {
    background-color: var(--title-color);
    outline: 1px solid var(--title-border);
  }
  
  .container {
    padding: 15px;
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    justify-content: center;
  }
  
  .container > div {
    flex: 1 1 auto;
    width: 33vw;
  }
  
  #divider {
    height: 2.5em;
    max-width: 100%;
    margin: 1em;
    background: var(--divider-image) center / contain no-repeat;
   }
  
  #title {
    font-family: var(--title-font);
    color: var(--title-color);
    font-size: var(--title-font-size);
    text-align: center;
    letter-spacing: 5px;
  }
  
  #title a {
    text-decoration: none;
    color: inherit;
    -webkit-text-stroke: 2px var(--title-border);
  }
  
  #title a:hover {
    filter: drop-shadow(2px 2px 5px var(--title-border));
  }
  
  nav ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
    padding: 0;
  }
  
  nav ul li {
  padding: 10px;
  }
  
  #left {
    transform: translateX(15%);
    z-index: 1;
    background: var(--left-image) center / contain no-repeat;
  }
  
  #main {
    z-index: 0;
  }
  
  #box {
    margin: 5em auto;
    width: 25vw;
    height: 35vh;
    padding: 5px;
    overflow-x: hidden;
    overflow-y: scroll;
    border-radius: 5px;
    background-color: var(--box-color);
    box-shadow: 0px 0px 20px 50px var(--box-color);
  }
  
  #right {
    transform: translateX(-10%);
    z-index: 1;
    background: var(--right-image) center / contain no-repeat;
  }
  
  
  /* Mobile */
  @media only screen and (max-width: 800px) {
  #title {
    font-size: calc(var(--title-font-size) / 1.4);
  }
    
  #left, #right {
    display: none;
  }
  
  #box {
    width: 70vw;
    height: 40vh;
  }
  }
  </style>
  
  <div class="container">
    <div id="left"></div>
    <div id="main">
        <div id="divider"></div>
        <!--NOTES #3: 
          - ADD YOUR CONTENT (title, navigation links, box text) HERE!
          - The navigation will wrap if you add more links! -->
        <div id="title"><a href="#">Melty Mods</a></div>
        <nav>
            <ul>
                <li><a href="#"> <img src="https://meltymods.neocities.org/imgs/home.png"> </a></li>
                <li><a href="about"> <img src="https://meltymods.neocities.org/imgs/about.png"> </a></li>
                <li><a href="contact"> <img src="https://meltymods.neocities.org/imgs/contact.png"> </a></li>
                <li><a href="shop"> <img src="https://meltymods.neocities.org/imgs/shop.png"> </a></li>
                <li><a href="gamelists"> <img src="https://meltymods.neocities.org/imgs/GAMELISTS.png"> </a></li>
        
            </ul>
        </nav>
        <div id="box">
          <h2 align="center">Shop Melty Mods<img src="https://meltymods.neocities.org/imgs/swirl.gif"> </h2> 
       
       
      <p>We sell preloaded, ready to plug and play, memory cards for the Sony PSP.<br>You can purchase our 128 GB Memeory Card on our sister site, <a href="https://cutiesclubshop.com/collections/melty-mods" target="_blank">shopify</a>.<br><br>Looking for a demonstration of our product? <a href="https://meltymods.carrd.co/" target="_blank">Check out our socials for videos.</a>
      
            
        </div>
    </div>
    <div id="right"></div>
  </div>
  
  </body>
  
  </html>