@font-face {
    font-family: 'BannerFont';
    src: url('assets/gaban-outline-regular-FFP.ttf');
}

@font-face {
    font-family: 'ButtonFont';
    src: url('assets/Professor.ttf');
}

@font-face {
    font-family: 'Pixel';
    src: url('assets/VPPixel-Simplified.otf');
}

@font-face {
    font-family: 'MainTextFont';
    src: url('assets/HARDCOREATTITUDE.otf');
}
@font-face {
    font-family: 'FinalTextFont';
    src: url('assets/ari-w9500-display.ttf');
}

body {
    background-color: rgb(56, 1, 56);
    background-image: repeating-conic-gradient(
        rgb(33, 2, 37) 0% 25%,
        rgb(49, 2, 51) 25% 50%);
    background-size: 60px 60px;
    background-position: center;

    margin: 0; /* get rid of margin so we can auto center*/
    min-height: 100vh; /* stretch body HEIGHT to FULL SCREEN HEIGHT*/ 
    /* then center it in the middle!*/
    display: grid;
    place-items: center;
    padding: 12px;
    box-sizing: border-box;
    
}



.box {
    border: 10px solid;
    border-color: rgb(250, 132, 244);
    background-color: rgb(255, 193, 255);
    box-shadow: 7px 7px 2px rgba(0, 0, 0, 0.39);
    border-radius: 1.25rem;
}


.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    max-width: 1250px;
    min-width: 1250px;
    gap: 15px;
}

.navGrid {
    display: grid;
    grid-template-columns: 1fr;
    margin: 12px 12px 12px 12px;
    gap: 12px;
}

.navButtonBoxes {
    border: 10px solid;
    border-color: rgb(253, 173, 240);
    background-image: linear-gradient(
            transparent 0%,
            rgba(218, 0, 218, 0.788) 25%, 
            rgba(255, 214, 255, 0.973) 42%), 
            linear-gradient(
            rgba(0, 0, 0, 0.959),
            transparent 50% 100%),
            url('assets/bgtesta.png');

    background-blend-mode: hard-light, darken, normal;
    background-size: 200px 200px;

    box-shadow: 5px 7px 2px rgba(0, 0, 0, 0.333);
    border-radius: 1.25rem;
    
    font-family: 'ButtonFont', monospace;
    font-size: 40px;

    width: 255px; 
    height: 80px;
    margin: auto;
    grid-column: span 1;
    display: grid;
    place-items: center;
    transition: all 0.15s ease;
    cursor: pointer;
}

nav {
    user-select: none;  
    -webkit-user-select: none;    
    color: rgb(253, 173, 240);
    text-shadow: 5px 5px rgba(0, 0, 0, 0.342);
    letter-spacing: 2px;
    background-image: repeating-conic-gradient(
        rgb(143, 16, 168) 0% 25%,
        rgb(117, 2, 139) 25% 50%);
    background-size: 60px 60px;
    animation: BgMove 5s linear infinite;
}

@keyframes BgMove {
    0% {
        background-position: 0px 0px;
    } 
    100% {
        background-position: -60px 0px;
    }
}

.navButtonBoxes:hover,#BackButton:hover{
    transform: scale(1.05);
    background-image: linear-gradient(
            transparent 0%,
            rgb(230, 2, 230) 25%, 
            rgb(250, 214, 250) 42%), 
            linear-gradient(
            rgba(0, 0, 0, 0.959),
            transparent 50% 100%),
            url('assets/bgtesta.png');

    background-blend-mode: hard-light, darken, normal;
    background-size: 200px 200px;
}
.ButtonSelected,
.ButtonSelected:hover{
    background-image: linear-gradient(
            transparent 0%,
            rgb(192, 2, 230) 25%, 
            rgb(246, 214, 250) 42%),  
            linear-gradient(
            rgba(0, 0, 0, 0.959),
            transparent 50% 100%),
            url('assets/bgtesta.png');

    background-blend-mode: hard-light, darken, normal;
    background-size: 200px 200px;
}
.navButtonBoxes:active ,
#BackButton:active{
    transform: scale(1);
}




#Banner {
    grid-column: span 4;
    height: 175px;
    margin-bottom: 0px;
    background-image: linear-gradient(
            transparent 20%,
            rgb(218, 0, 218) 70%, 
            rgb(255, 214, 255) 90% 100%), 
            linear-gradient(
            rgba(0, 0, 0, 0.959),
            transparent 50% 100%),
            url('assets/bgtesta.png');

    background-blend-mode: hard-light, darken, normal;
    background-size: 200px 200px;
    position: relative;
    overflow: hidden;
    animation: BannerMove 25s linear infinite;
}


@keyframes BannerMove {
    0% {
        background-position: 0px 0px;
    } 
    100% {
        background-position: -200px 0px;
    }
}

#BannerIcon {
    font-size: 85px;
    color: rgb(253, 173, 240);
    font-family: 'BannerFont', monospace;
    position: absolute;
    top: -22px;
    left: 30px;
    text-shadow: 5px 5px rgba(0, 0, 0, 0.295);
    /*shorthand! instead of doing each thing piece by piece u can just say it in one line*/
    animation: Rotatey ease-in-out 1s infinite alternate,
                SizeBump ease-in-out 0.525s infinite;
    user-select: none;  
    -webkit-user-select: none;   
}

#IchiMaya {
    position: absolute;
    width: 215px;
    top: 0px;
    right:-25px;
    filter: drop-shadow(7px 7px 1px rgba(0, 0, 0, 0.404));
    filter:contrast(102%), saturate(102%); 
    user-select: none;  
    -webkit-user-select: none;   
}

#NatsuBeerWelcome {
    width: 500px;
    position: absolute;
    top: 240px;
    left: 200px;
    filter: drop-shadow(3px 3px 12px rgba(0, 0, 0, 0.89));
    z-index: 1;
}

#AboutPage {
    overflow: auto;
    overflow-x: hidden;
    background-image: repeating-conic-gradient(
        rgba(143, 16, 168, 0.164) 0% 25%,
        rgba(116, 2, 139, 0) 25% 50%);
    background-size: 60px 60px;
    animation: BgMove 10s linear infinite;
    scrollbar-color: rgba(189, 88, 184) rgba(255, 255, 255, 0);

}

#KaayPfp {
    width: 250px;

    position: absolute;
    top: 10px;
    left: 325px;
    filter: drop-shadow(4px 5px 4px rgba(0, 0, 0, 0.7));
    border-radius: 1px;
    animation: Rotate1 1s ease-in-out infinite alternate;
}

#KritaLogo {
     width: 250px;

    position: absolute;
    top: 75px;
    left: 45px;
    filter: drop-shadow(4px 5px 4px rgba(0, 0, 0, 0.7));
    border-radius: 1px;
    animation: Rotate1 1s ease-in-out infinite alternate;
}

#UnityLogo {
    width: 265px;

    position: absolute;
    top: 40px;
    left: 595px;
    filter: drop-shadow(4px 5px 4px rgba(0, 0, 0, 0.7));
    border-radius: 1px;
    animation: Rotate1 1s ease-in-out infinite alternate;
}

#CastleCrashersImg {
    width: 375px;
    position: absolute;
    top: 595px;
    left: 475px;
    filter: drop-shadow(4px 5px 4px rgba(0, 0, 0, 0.7));
    border-radius: 15px;
    animation: Rotate1 1s ease-in-out infinite alternate;
}

#SplatoonImg {
    width: 450px;
    position: absolute;
    top: 515px;
    left: 15px;
    filter: drop-shadow(4px 5px 4px rgba(0, 0, 0, 0.7));
    border-radius: 15px;
    animation: Rotate1 1s ease-in-out infinite alternate;
    
}

#AccountImg {
    width: 600px;
    position: absolute;
    top: 1100px;
    left: 150px;
    filter: drop-shadow(4px 5px 4px rgba(0, 0, 0, 0.7));
    border-radius: 15px;
    animation: Rotate1 1s ease-in-out infinite alternate
}

#AboutText1 {
    font-family: 'FinalTextFont';
    font-size:22px;
    line-height: 33px;
    text-align: center;
    margin-top: 225px;
    letter-spacing: 5px;
    margin-right: 10px;
    margin-left: 10px;
    padding: 5px;
}


#AboutText2{
    font-family: 'FinalTextFont';
    font-size:22px;
    line-height: 33px;
    text-align: center;
    margin-top: 298px;
    letter-spacing: 5px;
    margin-right: 13px;
    margin-left: 13px;
    position:absolute;
}

#AboutText3{
    font-family: 'FinalTextFont';
    font-size:22px;
    line-height: 33px;
    text-align: center;
    margin-top: 835px;
    letter-spacing: 5px;
    margin-right: 13px;
    margin-left: 13px;
    position:absolute;
}

.AboutBox {
    color: rgb(0, 0, 0);
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.171);
    background-image: linear-gradient(rgb(245, 243, 243), rgb(241, 196, 238));
    border:7px solid;
     border-color: rgb(250, 132, 244);
    border-radius: 25px;
    filter: drop-shadow(7px 8px 2px rgba(0, 0, 0, 0.247));
}

@keyframes Rotatedeg {
    0% {
        rotate: 6deg;
    } 
    100% {
        rotate: 8deg;
    }
}




main {
   
    font-family: 'MainTextFont';
    grid-column: span 3;
    padding: 10px; 
    line-height: 35px; 
    text-align: left;
    font-size: 25px;
    position: relative;
    overflow: hidden;
    
    background-image: repeating-conic-gradient(
        rgb(255, 255, 255) 0% 25%,
        rgb(245, 231, 248) 25% 50%);
    background-size: 60px 60px;
    background-size: 100px 100px;

}

.Wrapper{ /*wrapper in order to align the button based on the image size rather than the entire screen for the holder*/
    position: relative;
    display: inline-block;
}

#BackButton {
   border: 10px solid;
    border-color: rgb(253, 173, 240);
    background-image: linear-gradient(
            transparent 0%,
            rgba(218, 0, 218, 0.788) 25%, 
            rgba(255, 214, 255, 0.973) 42%), 
            linear-gradient(
            rgba(0, 0, 0, 0.959),
            transparent 50% 100%),
            url('assets/bgtesta.png');

    background-blend-mode: hard-light, darken, normal;
    background-size: 200px 200px;

    box-shadow: 5px 7px 2px rgba(0, 0, 0, 0.333);
    border-radius: 1.25rem;
    
    font-family: 'ButtonFont', monospace;
    font-size: 40px;
    color: rgb(253, 173, 240);
    text-shadow: 5px 5px rgba(0, 0, 0, 0.342);
    letter-spacing: 2px;

    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;
    /*fix This so its not hard coded position */
    width: 150px;
    height: 55px;
    top: 0;
    right: -190px;
    background-color: wheat;
    cursor: pointer;

    animation: ExpandZoom2 0.4s ease 1;
    user-select: none;  
    transition: transform 0.15s ease;
}



@keyframes ExpandZoom2 {
    0% {
        scale: 0.9;
    }
    100% {
        scale: 1;
    }
}




#GalleryPage {
    display: inline;
    place-items: center;
    overflow-y: scroll;
    scrollbar-color: rgba(189, 88, 184) rgba(255, 255, 255, 0);
    height: 552px; /* dont hardcode this, ideally just somehow force the height to match the nav bar */
    /*however this works so WHATEVER*/

  
    background-image: url('assets/LightTiling.png'), 
    repeating-conic-gradient(
        rgb(241, 214, 247) 0% 25%,
        rgb(248, 236, 252) 25% 50%);
    background-color: rgba(113, 0, 136, 0);
    background-size: 100px 100px;
  

    background-position: center;
    animation: BgMove2 10s linear infinite;

}


.GalleryBox {
    border: 10px solid;
    border-color: rgb(250, 132, 244);
    background-color: rgb(255, 193, 255);
    box-shadow: 7px 7px 2px rgba(0, 0, 0, 0.30);
    border-radius: 1.25rem;
    margin-top: 15px;
    cursor: pointer;
    transition: transform 0.5s ease;
    
    margin-right: 15px;
    margin-left: 15px;
    width: 375px;
}



.ExpandedImage {
    
    max-width: 1440px;
    max-height: 800px;
    animation: ExpandZoom 0.4s ease 1;
}

.ExpandedImageHolder {
    position: fixed;
    z-index: 999;

    display: grid;
    justify-content: center;
    align-items: center;
    
    background: rgba(0, 0, 0, 0.75);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    
}

@keyframes ExpandZoom {
    0% {
        scale: 0.95;
    }
    100% {
        scale: 1;
    }
}

.DestructiveHide {
    display: none;
}

.GalleryImage:hover{
    transform: scale(1.05);
}


.GalleryDateBanners {
    border: 10px solid;
    border-color: rgb(253, 173, 240);
    background-image: linear-gradient(
            transparent 0%,
            rgba(218, 0, 218, 0.788) 25%, 
            rgba(255, 214, 255, 0.973) 42%), 
            linear-gradient(
            rgba(0, 0, 0, 0.959),
            transparent 50% 100%),
            url('assets/bgtesta.png');

    background-blend-mode: hard-light, darken, normal;
    background-size: 200px 200px;

    box-shadow: 5px 7px 2px rgba(0, 0, 0, 0.3);
    border-radius: 1.25rem;
    
    font-family: 'ButtonFont', monospace;
    font-size: 50px;
    
    display: grid;
    place-items: center;
    width: 812px;
    height: 70px;

    color: rgb(253, 173, 240);
    text-shadow: 5px 5px rgba(0, 0, 0, 0.342);
    letter-spacing: 2px;
}

#CemeteryPage {
    display: inline;
    place-items: center;
    overflow-y: scroll;
    scrollbar-color: rgb(238, 122, 232) rgba(255, 255, 255, 0);
    
    height: 552px; /* dont hardcode this, ideally just somehow force the height to match the nav bar */
    /*however this works so WHATEVER*/
    background-image: url('assets/TestTiling.png'), 
    repeating-conic-gradient(
        rgb(143, 16, 168) 0% 25%,
        rgb(117, 2, 139) 25% 50%);
    background-color: rgba(113, 0, 136, 0);
    background-size: 100px 100px;
  
  

    background-position: center;
    animation: BgMove2 10s linear infinite;
}   


@keyframes BgMove2 {
    0% {
        background-position: 0px 0px;
    } 
    100% {
        background-position: -100px 100px;
    }
}



#welcomeHeader {
    font-family: 'MainTextFont';
    font-size: 70px;
    line-height: 75px;
    text-align: center;
    margin-top: 65px;
    letter-spacing: 5px;
    color:  rgba(0, 0, 0, 0.829);
    text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.247);
    animation: Rotate1 1s ease-in-out infinite alternate;
}


#EndingHeader {
    font-family: 'FinalTextFont';
    font-size:55px;
    line-height: 75px;
    text-align: center;
    margin-top: 65px;
    letter-spacing: 5px;
    color: rgb(253, 196, 244);
    text-shadow: 5px 5px 20px rgba(0, 0, 0, 0.863);
    filter: drop-shadow(3px 3px 25px rgba(0, 0, 0, 0.589));
    animation: Rotatey 2s ease-in-out infinite alternate;
    
}

#EndingHeader2 {
    font-family: 'FinalTextFont';
    font-size:55px;
    line-height: 75px;
    text-align: center;
    margin-top: 65px;
    letter-spacing: 5px;
    color: rgb(253, 196, 244);
    text-shadow: 5px 5px 15px black;
    filter: drop-shadow(7px 7px 15px rgb(0, 0, 0));
    animation: Rotatey 2s ease-in-out infinite alternate;
    
}




#HomePage {
    /*stuff*/
    background-image: 
    repeating-conic-gradient(
        rgba(143, 16, 168, 0.164) 0% 25%,
        rgba(116, 2, 139, 0) 25% 50%);
    background-size: 100px 100px;
     background-position: center;
    animation: BgMove3 10s linear infinite;
}

@keyframes BgMove3 {
    0% {
        background-position: 0px 0px;
    } 
    100% {
        background-position: -100px 0px;
    }
}


@keyframes Rotate1 {
    0% {
        rotate: -0.75deg;
    } 
    100% {
        rotate: 0.75deg;
    }
}

#WelcomeCharacter {
    width: 305px;
    position: absolute;
    top: 20px;
    left: -12px;
    animation: SmallBounce 1s ease-in-out infinite, Rotate1 2s ease-in-out infinite alternate;
    transform-origin: bottom center;
    filter:drop-shadow(14px 14px 3px rgba(0, 0, 0, 0.37));
}

@keyframes SmallBounce {
    0%{
       scale: 1 1;
    }
  
    50%{
        scale: 1 1.00575;
    }
    100% {
        scale: 1 1;
    }
}

#WelcomeBoard {
    width: 650px;
    position: absolute;
    top: 40px;
    left: 265px;
    transform-origin: bottom center;
    animation: BoardRotate 2s ease-in-out infinite alternate;
    filter:drop-shadow(12px 12px 3px rgba(0, 0, 0, 0.37));
    
}

@keyframes BoardRotate {
    0%{
       transform: perspective(800px) rotateY(1.15deg) ;
       rotate: 0.1deg;
    }

    100% {
         transform: perspective(800px) rotateY(0deg);
         rotate: -0.075deg;
    }
}

@keyframes BoardBounce {
    0%{
       scale: 1 1;
    }
  
    50%{
        scale: 1 1.01;
    }
    100% {
        scale: 1 1;
    }
}


#ProjectsPage {
    background-image: repeating-conic-gradient(
        rgb(14, 8, 13) 0% 25%,
        rgb(0, 0, 0) 25% 50%);
    background-size: 60px 60px;
    animation: BgMove 5s linear infinite;
}

.ProjectsHeader {
    font-family: 'FinalTextFont';

    line-height: 45px;
    text-align: center;
    margin-bottom: 55px;
  
    letter-spacing: 5px;
    color:  rgb(255, 255, 255);
    text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.247);
    
}



#ProjectsIcon {
    width: 200px;
    position: absolute;
    top: 290px;
    left: 350px;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.849));
    image-rendering: pixelated;
   
}







.HideView {
    display: none !important;
}

.CemText {
    font-family: 'FinalTextFont';
    font-size: 15.3px;
    line-height: 25px;
    width: 265px; 
    height: 284px; 
    top: 0;
    right: -305px;
    position: absolute;
     background-image: linear-gradient(rgb(245, 243, 243), rgb(241, 196, 238));

}
.CemHolder {
    display: inline-flex;
    position: relative;
    
}



footer {
    font-family: 'Pixel', system-ui;
    font-size: 16px;

    grid-column: span 4;
    height: 35px;

    display: grid;
    place-items: center;
  
    
}





@keyframes Rotatey {
    0% {
        rotate: 0.55deg;
    } 
    100% {
        rotate: -0.55deg;
    }
}

@keyframes SizeBump {
    0%{
       scale: 1;
    }
    60%{
        scale: 0.985;
    }
    80%{
        scale: 1.015;
    }
    100% {
        scale: 1;
    }
}