@font-face {
    font-family:"lex";
    src: 
        local("lex")
         url("../fonts/lexend/LexendExa-Regular.ttf") format('truetype'),
         url("../fonts/lexend/LexendExa-Regular.woff") format('woff'),
         url('../fonts/lexend/LexendExa-Regular.woff2') format('woff2'),
         url('../fonts/lexend/LexendExa-Regular.eot') format('eot'),
          url('../fonts/lexend/LexendExa-Regular.svg') format('svg');
    font: 600;
        margin: 0;
         letter-spacing: -6px;
        line-height: 200%;}

@font-face{
    font-family:"Retro";
    src: 
        local("retrogam")
         url('../fonts/retrogam/RetroGaming.woff2') format('woff2'),
         url('../fonts/retrogam/RetroGaming.woff') format('woff')
         url('../fonts/retrogam/RetroGaming.svg') format('svg'),
         url("../fonts/retrogam/RetroGaming.ttf") format('truetype'),
          url('../fonts/retrogam/RetroGaming.eot') format('eot');
    padding: 0;
    font-size: small;
        margin: 0;
        line-height: 0.2;
}

@font-face{
    font-family:"rubik";
    src: 
        local("rubik")
         url('../fonts/ribik/RubikVinyl-Regular.woff2') format('woff2'),
         url('../fonts/ribik/RubikVinyl-Regular.woff') format('woff')
         url('../fonts/ribik/RubikVinyl-Regular.svg') format('svg'),
         url("../fonts/ribik/RubikVinyl-Regular.ttf") format('truetype'),
         url('../fonts/ribik/RubikVinyl-Regular.eot') format('eot'),;
    padding: 0;
    font-size: medium;
    font-weight: 600;
        margin: 0;
        line-height: 0.1;}

@font-face{
    font-family:"oldst";
    src: 
         url('../fonts/oldst/OldstyleSmallCapsHPLHS.woff2') format('woff2'),
         url('../fonts/oldst/OldstyleSmallCapsHPLHS.woff') format('woff')
         url('../fonts/oldst/OldstyleSmallCapsHPLHS.svg') format('svg'),
         url("../fonts/oldst/OldstyleSmallCapsHPLHS.ttf") format('truetype'),
         url('../fonts/oldst/OldstyleSmallCapsHPLHS.eot') format('eot');
         unicode-range:U+003A-007E,U+0020-002F;
    padding: 0;
    font-size: medium;
    font-weight: 600;
        margin: 0;
        line-height: 0.1;}

@font-face{
    font-family:"dotgoth";
    src: 
         url('../fonts/dotgoth/DotGothic16-Regular.woff2') format('woff2'),
         url('../fonts/dotgoth/DotGothic16-Regular.woff') format('woff')
         url('../fonts/dotgoth/DotGothic16-Regular.svg') format('svg'),
         url("../fonts/dotgoth/DotGothic16-Regular.ttf") format('truetype');
    padding: 0;
    text-emphasis: bold;
        margin: 0;
        line-height: 0.2;
}

@font-face{
    font-family:"dys";
    src: 
         url('../fonts/dyslex/OpenDyslexic-Regular.woff2') format('woff2'),
         url('../fonts/dyslex/OpenDyslexic-Regular.woff') format('woff'),
         url('../fonts/dyslex/OpenDyslexic-Regular.svg') format('svg'),
         url("../fonts/dyslex/Dyslexic.ttf") format('truetype');
    padding: 0;
    text-emphasis: bold;
        margin: 0;
        line-height: 0.2;
}


@keyframes floatsie {
  0% {

    transform: translateY(3px);
    transform: translate(2px 3px);
  }
    100% {
          transform: translateY(-4px);
        transform: translate(-3px -4px);
    }
}

@keyframes walk{ 0%{ transform: translateX(-450px);} 100% { transform: translatex(1200px);}}
@keyframes bing{ 0%{} 80% {  scale:(120%) translate(17px 18px)} 100% { transform: translate(12px 12px);}}

:root {
  cursor:url(https://file.garden/aUqmjfHzsji29tci/cursor/animated-silly-pointer-guy/animated-silly-pointer-guy.crs), default;
  scrollbar-width: thick;
  scroll-snap-type: mandatory;
}
a:hover{
    text-decoration: none;
    color: #e70000;
    text-shadow: 1px 1px 5px #ff0000;
    cursor:url(../images/cursor/cursor-isat/isat_linkselect.cur),pointer;
}


::selection{
    color: rgb(0, 0, 0);
    background: rgb(115, 0, 0);
    cursor:url(../images/cursor/cursor-isat/isat_textselect.cur) ,text;
}

/* DETAILS STYLES */
details > summary {
    list-style-type: none;
    animation:1s ease-in-out 0s infinite alternate floatsie, 1s ease-in-out 0s infinite alternate bing;
}

details > summary::-webkit-details-marker {
    display: none;
    animation:1s ease-in-out 0s infinite alternate floatsie, 1s ease-in-out 0s infinite alternate bing;
}

details > summary::before {
    content: '˚꩜｡';
    margin-bottom: 0px;
    padding-bottom: 0%;
    animation:1s ease-in-out 0s infinite alternate floatsie, 1s ease-in-out 0s infinite alternate bing;
}

details[open] > summary::before {
    content: '˚✦｡⁀➴';
}

details {
    border: 1px solid gray;
    border-radius: 0.2rem;
    padding: 0.5rem;
}

details[open] > summary {

}

/* LEFT LITTLE ALIEN!!!!*/
#mainpage{
    pointer-events: all;
    position: fixed;
    bottom: 3px; left: 5px;
    padding: 0%;
    overflow:hidden;
    translate: +10px -5px;
    background-image: url('../images/main/main.gif');
    size: 30%;
    border: hidden 3px #000;
    height: 105px; width: 90px;
    animation: 2.5s ease-in-out 0s infinite alternate floatsie;
    transition: all ease-in-out 1.2s;
    z-index: +11;
}

#mainpage:hover {
    transition: all 1.2s ;
    scale: 130%; translate: +10px -35px;
    animation:1s ease-in-out 0s infinite alternate floatsie, 1s ease-in-out 0s infinite alternate bing;
   background-image: url('../images/main/HOVER.GIF');
     z-index: +11;
   
}

img{image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;} 
/* NAVIGATION STUFF!!!!!!!!!!*/
button{
    padding: 5px;
    color: crimson;
    background-color: azure;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
}
nav{
        position: sticky;
    border-radius: 5px;
    translate: -80px;
    margin-right: 0px;
    top: 20px;

}

nav img{
     user-select: none;
    pointer-events: all;
    image-rendering: pixelated;
    
}

.navlink1, .navlink2{
    width: 200px;height: auto; margin-top: -20px ;margin-bottom: -20px; transition: all ease-in-out 0.5s;;}

.navlink1:hover{
    transform: translateY(-5px) translateX(-10px) scale(105%) rotatez(-3deg) !important;
    transition: all ease-out 0.2s;}

.navlink2:hover{
    transform: translateY(-5px) translateX(+10px) scale(105%) rotatez(3deg) !important;
    transition: all ease-out 0.2s;}
#info{
    clip-path: polygon(0 0, 100% 0, 100% 81%, 0% 100%);}
#reccs{
    translate:+20px; 
    clip-path: polygon(0 24%, 100% 2%, 100% 98%, 0 85%);}
#misc{
    scale:90%;
    translate: +5px;
    clip-path: polygon(6% 6%, 53% 26%, 64% 90%, 1% 87%);}
#links{
    margin-top: -60px; 
    translate: +25px; scale: 120%; 
    clip-path: polygon(49% 44%, 60% 3%, 99% 2%, 98% 70%, 82% 89%, 15% 88%, 2% 75%, 4% 45%);}
#yapps{
    margin-top: +13px;
    rotate: 3deg;
    translate: +5px;}
#stuff{
    margin-top: -5px;
    scale: 125%;
    translate: +12px;}