@font-face {
    font-family: pixel-font;
    src: url(Fonts/\(INCOMPLETED\)Pixelated_Vector.ttf)
}

*, *::before, *::after {
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

.main-nav {
    display: flex;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
}

.content-wrapper {
    display: flex;
    min-height: 100vh;
    align-items: flex-start;
}

.leather {
    box-shadow: inset 10 10 100px rgba(0, 0, 0, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.2);
    color: #2a1a0a;
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, #7d93f2 0%, #d4e4ff 20%, #f0f8ff 60%, #fff 100%);

}

.header {
    background-color: #7d93f2;
    padding-top: 16px;
    position:fixed;
    top:0;
    z-index: 5;
    width: 100vw;
    margin: 0;
    height: 100px;
    image-rendering: pixelated;
    z-index: 6;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);

}

.title{
    position:relative;
    text-align: left;
    color: azure;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    bottom: 48px;
    left: 76px;
    margin: 0;
    font-family: pixel-font;
    font-weight: bolder;
    text-shadow: 3px 3px 5px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);

}

.logo {
    height: 72px;
    width: auto;
    flex-shrink: 0;
    image-rendering: pixelated;

}

.mainpagelist {

    list-style-position: inside;
    border-collapse: separate;
    width: 75vw;
    position: relative;
    border-spacing: 16px 0px;
    /*background-color: rgba(85, 107, 47, 0.522);*/
    top: -96px;
    z-index: 7;
    margin-right: 0px;
    margin-left: auto;


}

.listitem {
    text-align: left;
    text-decoration: black;
    border-style: solid;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-color: transparent;
    width: 512px;
    

}

.button1{
    background-color: rgba(228, 249, 254, 0.186);
    border-color: rgba(255, 255, 255, 0.489);
    border: solid 2px ;
    font-size: clamp(1.50rem, 1.5vw, 1.15rem);
    color: azure;
    font-family: pixel-font;
    font-weight: bolder;
    text-shadow: 1px 1px 2px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.current{
    box-shadow: rgb(233, 255, 187) 0px 0px 8px;
    border-radius: 30px;
}

.page {
    
    margin-right: 0px;
    margin-left: auto;
    width: 90vw;
    height: auto;
    position: relative;
    left: 0px;
    box-shadow: inset 10 10 100px rgba(0, 0, 0, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.2);
    color: #2a1a0a;
    z-index: 2;
    display: grid;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: 10% 30% 30% 30%;
    font-family: pixel-font;
    image-rendering: pixelated;
    
}

.map{
    grid-column: 1/4;
    max-width: 1000px;
    height:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.mapdescription{
    grid-row: 1/2;
    grid-column: 4/5;
    font-size: 250%;
    padding-top: 196px;


}





.anchorlinks{
    list-style:none;
    font-family: pixel-font;
    position:sticky;
    padding: 16px;
    top: 192px;
    max-width: 10vw;
    transform: translateY(-96px);
    background-color: #7d93f2 ;
    z-index: 5;
    border-bottom-right-radius: 30px;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.2);
    a{
        font-weight: bold;
    }
    li{
        margin-bottom: 20px;
    }
  


}
#Kaetram, #FullCircle, #ProjectPalette, #Inverspeculum{
    scroll-margin-top: 200px; 
}


.info {
    grid-row: 1/4;
    grid-column: 1/5;
    list-style: square;

}

.paratitle {
    z-index: 2;
    font-size: 200%;
    font-weight: bold;
    margin-bottom: 24px;
    color: darkslategrey;
    list-style: none;
    text-align: center;
    color: azure;
    font-family: pixel-font;
    text-shadow: 1px 1px 2px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);
    box-shadow: 4px 4px 8px #2a1a0a;
    animation-name: fade;
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;



}

.subtext {
    display: grid;
    grid-template-columns: min(340px, 42%) 1fr min(140px, 18%);
    grid-template-rows: auto auto auto;
    gap: 0;
    margin-bottom: 112px;
    border-radius: 16px;
    overflow: hidden;
    background-size: auto 100%;
    background-repeat: no-repeat;
    animation: fade 0.7s ease-in both;
    box-shadow: 0 6px 24px rgba(0,0,0,0.2);
}
.fullcircle{
    background-image: linear-gradient(to right, rgb(3, 23, 154) ,#a9ebf600);
    a:link {
  color: rgb(156, 158, 240);
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);
    }
    a:visited {
  color: rgb(156, 158, 240);
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);
    }
    a:hover {
  color: gold;
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);}
}
.projectpalette{
    background-image: linear-gradient(to right, rgb(35, 0, 0) ,#a9ebf600);
    a:link {
  color: rgb(244, 173, 238);
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);
    }
    a:visited {
  color: rgb(244, 173, 238);
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);
    }
    a:hover {
  color: gold;
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);}
}
.kaetram{
    background-image: linear-gradient(to right, rgb(111, 0, 102) ,#a9ebf600);
    a:link {
  color: rgb(189, 128, 207);
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);
    }
    a:visited {
  color: rgb(189, 128, 207);
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);
    }
    a:hover {
  color: gold;
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);}    
}
.inverspeculum{
    background-image: linear-gradient(to right, rgb(108, 200, 71) ,#a9ebf600);
    a:link {
  color: rgb(207, 132, 128);
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);
    }
    a:visited {
  color: rgb(207, 132, 128);
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);
    }
    a:hover {
  color: gold;
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);}    
}

.gamelogo{
    width: 384px;
    height: auto;
    border-right: transparent;
    margin-top: -4px;
    


}
.fullcirclelogo{
    grid-row: 1 / 5;
    grid-column: 1 / 2;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
}
.fullcirclerobot{
    grid-row: 1/2;
    grid-column: 3/4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 8px;
    image-rendering: pixelated;

}
.link{
    grid-row: 3/4;
    grid-column: 2/3;
    z-index: 3;
    font-size: 150%;
}
.fullcircletext{
    grid-row: 1/3;
    grid-column: 2/3;
    padding: 20px 24px 16px;
    font-size: clamp(0.90rem, 1.2vw, 1.05rem);
    color: azure;
    word-spacing: 2px;
    line-height: 32px;
    text-shadow: 2px 2px 3px black;
}

.styleless{
    list-style: none;
    padding-bottom: 16px;
}

footer{
    background-color: #2a1a0a;
    padding-bottom: 48px;
    padding-top: 48px;
    padding-left: 32px;
    margin-top: auto;
    position: absolute;
    width: 100%;

}

a{
    color: rgb(138, 188, 205);
}

.buttons {
    grid-row: 2/3;
    grid-column: 3/5;


}


.foodlist {
    grid-row: 1/2;
    grid-column: 2/4;


}

#result{
    font-size: 150%;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

a:link {
  color: azure;
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);
  
}
a:visited {
  color: azure;
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);
}
a:hover {
  color: gold;
  text-decoration: none;
  text-shadow: 2px 2px 3px black, 0 0 1em rgb(0, 0, 0), 0 0 0.2em rgb(0, 0, 0);
}



.smallsprites{
    margin-top: 92px;
    grid-row: 1/5;
    grid-column: 1/5;
    display: grid;
    grid-template-rows: repeat(10, 128px);
    grid-template-columns: repeat(6 1fr);
    row-gap: 64px;
    column-gap: 12px;
    place-items: center;
}
.item{
    border-radius: 0px;
    overflow: hidden;
    scale: 4;
    transform-origin: 50% 50%;
    transition: transform 0.3s ease;
}
.item:hover{
    transform: scale(1.1);
}
.mouse{
    grid-row: 1/2;
    grid-column: 1/2;
}
.cow{
    grid-row: 1/2;
    grid-column: 2/3;
}
.girld{
    grid-row: 2/3;
    grid-column: 2/3;
}
.goblinqueenset{
    grid-row: 1/2;
    grid-column: 6/7;
}
.beachball{
    grid-row: 2/3;
    grid-column: 1/2;
}
.gobling{
    grid-row: 2/3;
    grid-column: 6/7;    
}
.crab{
    grid-row: 1/2;
    grid-column: 3/4;    
}
.gobbar{
    grid-row: 1/2;
    grid-column: 5/6;    
}
.koi{
    grid-row: 2/3;
    grid-column: 3/4;    
}
.balon{
    grid-row: 1/3;
    grid-column: 4/5;    
}
.soul{
    grid-row: 3/6;
    grid-column: 1/2;    
}
.soul2{
    grid-row: 3/6;
    grid-column: 6/7;    
}
.dragonboss{
    grid-row: 3/6;
    grid-column: 1/7;
    border-radius: 30px;
    overflow: hidden;

}



@media (max-width: 1100px) {
    .subtext {
        grid-template-columns: min(260px, 38%) 1fr min(100px, 15%);
    }
    .gamelogo { max-width: 260px; }
    .smallsprites { transform: scale(0.85); transform-origin: top left; }
    .page{ width: 100vw;}
    
}

@media (max-width: 900px) {
    .anchorlinks { display: none; }
    .content-wrapper { flex-direction: column; }
    .page{ width: 100vw;}

    .subtext {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }
    .fullcirclelogo { grid-row: 1/2; grid-column: 1/2; }
    .gamelogo { max-width: 100%; width: 200px; }
    .fullcircletext { grid-row: 2/3; grid-column: 1/2; padding: 16px; }
    .fullcirclerobot { grid-row: 3/4; grid-column: 1/2; justify-content: flex-start; padding-left: 24px; }
    .link { grid-row: 4/5; grid-column: 1/2; padding: 12px 16px 16px; }
    .logo { height: 48px; display: none; }
    .header { display: flex; align-items: center;}
    .mainpagelist {top: 0px; width: 100vw; font-size: clamp(0.85rem, 1.5vw, 1.15rem);}
    .title {    margin-right: auto; margin-left: auto; text-align: center; left:0; bottom:0;}
}

@media (max-width: 700px) {
    :root { --header-height: 70px; }
    .logo { height: 48px; display: none; }
    .title { font-size: 1.1rem; }
    .nav-link { font-size: 0.75rem; padding: 5px 10px; }
    .page{ width: 100vw;}

    .smallsprites {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        gap: 80px 12px;
        padding: 80px 8px 120px;
        transform: none;
    }
    /* Flatten grid positions on mobile */
    .mouse, .cow, .girld, .goblinqueenset, .beachball, .gobling,
    .crab, .gobbar, .koi, .balon, .soul, .soul2 {
        grid-column: auto;
        grid-row: auto;
    }
    .dragonboss { grid-column: 1 / 4; grid-row: auto; }

    .commission-grid { grid-template-columns: 1fr; }
}


@keyframes fade {    
    from {opacity: 0; transform: translateY(20px);}
    to {opacity: 100;};
}