@import url('https://fonts.googleapis.com/css2?family=Coming+Soon&family=Parkinsans:wght@300..800&family=Pixelify+Sans:wght@400..700&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');

html, body {
    cursor: url('../img/cursor.gif'), auto;
    overflow: clip;
}

a {
    cursor: url('../img/cursor.gif'), auto;
    color: #f255fa;
}

* {
  box-sizing: border-box;
}

body {
    position: relative;
    background-color: #e8dde8;
    background-image: url('../img/bgtest.gif');
    letter-spacing: 1px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    width: 1000px;
}

header {
    position: relative;
    z-index: 1 !important;
    left: 250px;
    top: 40px;
    width: 411px;
    height: 71px;
}

header h1:hover {
    filter: drop-shadow(1px 5px 5px #00000061);
}

#layout {
position: relative;
top: 250px;
left: 500px;
transform: translate(-50%, -50%); 
  z-index: 0 !important;
  width: 800px;
  height: 600px;
  background-image: url('../img/layout.gif');
}

#sites {
    position: relative;
    z-index: 999;
    top: 50px;
    left: 775px;
    width: 1px;
    height: 1px;
    text-transform: lowercase;
    list-style-type: none;
    list-style-image: none;
    color: #585858;
    text-shadow: #ffffff 1px 0px, #ffffff -1px 0px, #ffffff 0px 1px, #ffffff 0px -1px;
    font-family: 'Pixelify Sans';
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
}

#sites a,
#sites a:visited,
#sites a:active {
    text-decoration: none;
    color: #585858;
}

#sites a:hover {
    text-decoration: none;
    color: #3da361;
}

a:hover {
    color: #3da361;
    letter-spacing: 3px;
    text-shadow: #ffffff 1px 0px, #ffffff -1px 0px, #ffffff 0px 1px, #ffffff 0px -1px;
}

strong {
    color: #3da361;
    text-shadow: #ffffff 1px 0px, #ffffff -1px 0px, #ffffff 0px 1px, #ffffff 0px -1px;
}


main {
    position: relative;
    display: flex;
    left: 91px;
    top: 128px;
    width: 557px;
    height: 422px;
}

#home-content {
    position: relative;
    width: 421px; 
    height: 100%;
    margin: 0;
    padding: 10px;
    color: #585858;
    font-family: 'Pixelify Sans';
    font-size: 12px;
    overflow-y: scroll;
    scrollbar-color: #f255fa67 #e6e6e600;
    scrollbar-width: thin;
    background-color: #e8dde8;
    text-align: center;
}

#extras {
    display: flex;
    flex-direction: column;
    background-color: #3da361;
    width: 136px;
    height: 100%
    margin: 0;
    padding: 0;
}

.title {
    margin: 0;
    padding: 0;
}

#extras h2 {
    margin: 0;
    padding: 0;
    background-color: #bbdcc7;
    font-family: 'Pixelify Sans';
    font-size: 18px;
}

#my-sites {
    position: relative;
    width: 100%;
    height:100px;
    color: #585858;
    font-family: 'Pixelify Sans';
    font-size: 12px;
    low-x: hidden;
    scrollbar-color: #f255fa67 #e6e6e600;
    scrollbar-width: thin;
    background-color: #e8dde8;
    text-align: center;
    border: none; 
}

#affies {
    position: relative;
    width: 100%;
    height:100px;
    color: #585858;
    font-family: 'Pixelify Sans';
    font-size: 12px;
    low-x: hidden;
    overflow-y: scroll;
    scrollbar-color: #f255fa67 #e6e6e600;
    scrollbar-width: thin;
    background-color: #e8dde8;
    text-align: center;
    border: none; 
}

#tools {
    position: relative;
    width: 100%;
    width: 100%;
    color: #585858;
    font-family: 'Pixelify Sans';
    font-size: 12px;
    low-x: hidden;
    overflow-y: scroll;
    scrollbar-color: #f255fa67 #e6e6e600;
    scrollbar-width: thin;
    background-color: #e8dde8;
    text-align: center;
    padding: 5px;
    border: none; 
}

#borders {
    width: 1px;
    height: 1px;
}

#borders ul {
    list-style-type: none;
    position: relative;
    display: block;
    top: -330px;
    left: 660px;
    margin-bottom: 40px;
    z-index: 999 !important;
}

#borders li {
    position: relative;
    display: block;
    top: -330px;
    left: 660px;
    margin-bottom: 40px;
    z-index: 999 !important;
}

#menu {
    width: 1px;
    height: 1px;
}

#menu ul {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 999 !important;
}

#menu li {
    position: relative;
    display: block;
    top: -341px;
    left: 666px;
    margin-bottom: 51px;
    z-index: 999 !important;
}

#menu li img {
    transition: transform 0.3s ease;
}

#menu li img:hover {
    transform: translateY(-5px);
    filter: drop-shadow(1px 5px 5px #00000061);
}

h2 {
    color: #f255fa;
    text-transform: lowercase;
    font-weight: normal;
    background-color: #bbdcc7;
    font-family: 'Pixelify Sans';
    font-size: 18px;
}

p {
    text-align: justify;
}

ul {
    list-style-image: url('http://blog.prismatic.pink/wp-content/uploads/2024/10/icon-gif.gif');
    text-align: justify;
}

.pixel:hover {
    transform: scale(3);
    image-rendering: pixelated;
    transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.pixel {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.links:hover {
    transform: scale(1.10);
    image-rendering: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.links {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

footer {
    position: relative;
      left: 20px;
  bottom: 70px;
    text-align: center;
    text-transform: lowercase;
    color: #585858;
    text-shadow: #ffffff 1px 0px, #ffffff -1px 0px, #ffffff 0px 1px, #ffffff 0px -1px;
    font-family: 'Pixelify Sans';
    font-size: 12px;
    letter-spacing: 1px;
}

@media (max-width: 767px) {

   body {
    width: 100%;
    max-width: 100vw;
    margin: 10px;
    padding-left: 10px;
    padding-top: 5px;
    box-sizing: border-box;
    overflow-x: clip;
    }

    #layout {
    position: relative;
    left: -10px;
    border: 0;
    padding: 0;
    transform: translate(-50%, -50%); 
    z-index: 0 !important;
    background-image: url('../img/layout-mobile.gif');
    height: 670px;
}

    header {
    width: 100%;
    max-width: 100vw;
    position: relative;
    left: 40px;
    }

    #logo {
    margin-top: -20px;
    width: 80%;
    }

    nav {
    width: 100%;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    }

    main {
    left: 485px;
    width: 265px;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    scrollbar-color: #f255fa67 #e6e6e600;
    scrollbar-width: thin;
    background-color: #e8dde8;
  }

  #home-content {
    width: 100%; 
    overflow-y: visible;
    height: auto;  
    max-height: none; 
}

   #extras {
    width: 100%;
   }

   #affies {
    width: 100%;
    height: 100%;
}

#tools {
    width: 100%;
    overflow-y: visible;
    height: auto;  
    max-height: none; 
}

  .pixel {
    transition: none
  }

  .pixel:hover {
    transform: none;
    image-rendering: auto;
    transition: none;
    image-rendering: auto !important;
  }

  #borders {
    position: relative;
    display: flex;
    top: 490px;
    left: -262px;
  }

  #menu {
    position: relative;
    display: flex;
    top: 490px;
    left: -262px;
  }

  #menu li {
    margin-right: 11px;
  }

    #main-content {
    width: 100%;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
  }

    section {
    width: 100%;
  max-width: 100vw;
  padding: 20px;
  order: 1;
  box-sizing: border-box;
    }

   footer {
    width: 100%;
    max-width: 100vw;
    left: -1px;
    top: -202px;
    }

}