/* 

Styles that apply to ALL styles go here
DO NOT include any colours in this document!

*/

@import url("https://fonts.googleapis.com/css?family=Montserrat:300"); /* Light */
@import url("https://fonts.googleapis.com/css?family=Montserrat:400"); /* Regular */
@import url("https://fonts.googleapis.com/css?family=Montserrat:700"); /* Bold */
@import url("https://fonts.googleapis.com/css?family=Montserrat:800"); /* ExtraBold */
@import url("https://fonts.googleapis.com/css?family=Montserrat:900"); /* Black */

/* *** AI GENERATED *** */

/* Width of scrollbar */
::-webkit-scrollbar {
    width: 4px;
    height: 4px; /* for horizontal scrollbar */
}

/* Thumb (the draggable part) */
::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 999px; /* max roundness */
}

/* Thumb hover effect */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* *** END AI GENERATED *** */

body
{
    scrollbar-width: thin;
    scrollbar-color: transparent #f0f0f0;
    margin: 0px; /* Remove page border */
    user-select: none;
    position: relative;
}

p, h1, h2, h3, h4, h5, h6
{
    font-family: "Montserrat", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0px;
    z-index: 3;

    /* center-Text: */
    text-align: center;
}

button
{
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    font-family: "Montserrat", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    border-radius: 7.5px;
    margin-top: 3px;
    height: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(3px); /* combine horizontal centering + animation 
    no, I will not use translate(-50%, 3px)
    thank you for the generous offer
    https://media.discordapp.net/attachments/660786064968908876/892243438702059540/image0-3.gif?ex=684847b4&is=6846f634&hm=e7ef4a23c215e8b1344a8bda24d08f663de3e31cdb44814f942a54d6b6b82363&
    */
    transition-duration: 75ms;
}
/* button:hover
{
    transform: translateX(-50%) translateY(0);
}
button:active
{
    transition-duration: 50ms;
    transform: translateX(-50%) translateY(3px);
} */

/* ************************************************** */
/* ******** NO HTML5 = NO CUSTOM ELEMENTS!!! ******** */
/* ************************************************** */
vbr
{
    margin-right: 20px;
}
vr
{
    width: 2px;
    margin-right: 5px;
    margin-left: 5px;
}
hr
{
    height: 3px;
    border: transparent 0px solid;
    border-radius: 999px;
}

.messageBox
{
    margin-top: 100px;
    z-index: 979;
    position: absolute;
}

@media (max-width: 799px)
{
    .messageBox
    {
        padding-bottom: 60px;
        width: 100%;
    }
}
@media (min-width: 800px)
{
    .messageBox
    {
        border-radius: 25px;
        padding-bottom: 50px;
        transform: translateX(-50%);
        left: 50%;
        margin: 0 auto;
        margin-top: 100px;
    }
    .messageBox-Title
    {
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        padding-left: 100px;
        padding-right: 100px;
    }
}
.belowNavBar
{
    transform: translateY(75px);
}

/* DEPRECATED: NOT NEEDED AS INCLUDED IN <p> */
.center-Text
{
    text-align: center;
}

.directory
{
    width: 100%;
    margin-top: 45px; /* navbar is 45px tall */
    position: absolute;
    box-shadow: 0px 0px 25px 5px rgb(0, 0, 0);
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.vcenter-Object
{
    margin-top: 50%;
}
@media (min-width: 550px)
{
    .vcenter-ObjectsInside-IfNotMobile
    {
        display: flex;
        justify-content: center; /* Horizontally centers */
        align-items: center; /* Vertically centers */
        height: 100vh; /* Example: Full viewport height */
    }
    .br-IfMobile
    {
        height: 0;
        margin: 0;
    }
}
.bottom-Object
{
    margin-top: 100%;
}
.center-Object
{
    transform: translateX(-50%);
}
.xstrong-Text
{
    font-weight: 900;
}

.navbar
{
    position: fixed;
    top: 0;
    width: 100vw;
    height: 45px;
    z-index: 999;
}
@media (min-width: 800px) {
    .navbar {
        margin: 10px;
        border-radius: 10px;
        width: calc(100vw - 20px - 4px); /* 100% - 10px(left) - 10px(right) - 4px(scrollbar) */
        transition-duration: 200ms;
    }
}

.navBtns {
    background-color: transparent;
    position: absolute;
    top: 0;
    right: 0;
    width: fit-content;
    height: 45px;
    display: flex;
    z-index: 0;
}
.navBtn {
    margin: 0;
    position: static;
    transform: none;
    border: none;
    width: 100px;;
    border-radius: 0px;
    text-align: center;
    line-height: 24px;
    font-weight: normal;
    padding-left: 10px;
    padding-right: 10px;
    height: 100%;
    

    background-color: transparent !important;
    background-size: 100% 0%;
    background-position: center top;
    background-repeat: no-repeat;
    transition: background-size 350ms ease;
}
.moreBtn
{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.navBtn:hover {
    background-size: 100% 100%;
}
.navBtn:active
{
    transition: background-size 50ms ease;
    background-position: center center;
    background-size: 90% 90%;
}

@media (min-width: 800px) {
    .navBtn {
        opacity: 0;
        animation: flyIn 1s ease forwards;
    }
    .homeBtn 
    { 
        animation-delay: 0ms; 
    }

    .moreBtn 
    { 
        animation-delay: 500ms; 
    }

    .contBtn 
    { 
        animation-delay: 400ms; 
    }

    .projBtn 
    { 
        animation-delay: 300ms; 
    }

    .downBtn 
    { 
        animation-delay: 200ms; 
    }

    .gameBtn 
    { 
        animation-delay: 100ms; 
    }
}
@media (max-width: 799px)
{
    .navBtn
    {
        opacity: 1;
        transform: translateY(0px);
        animation: flyOut 1s ease forwards;
    }
    .homeBtn 
    { 
        animation-delay: 0ms; 
    }

    .moreBtn 
    { 
        animation-delay: 500ms; 
    }

    .contBtn 
    { 
        animation-delay: 400ms; 
    }

    .projBtn 
    { 
        animation-delay: 300ms; 
    }

    .downBtn 
    { 
        animation-delay: 200ms; 
    }

    .gameBtn 
    { 
        animation-delay: 100ms; 
    }
}
@keyframes flyOut 
{
    to 
    {
        opacity: 0;
        transform: translateY(-40px);
    }
}

@keyframes flyIn 
{
    to 
    {
        opacity: 1;
        transform: translateY(0);
    }
}


.menu
{
    background-color: transparent;
    width: 40px;
    height: 40px;
    border-radius: 0px;
    border: 0px solid transparent;
    padding: 0;
    transform: none;
    left: 0;
    font-size: 40px;
    /* margin: 0px; */
    z-index: 10;
    margin-left: -50px; /* hide menu btn when it shouldnt be visible */
    transform: translateY(-12px);
    transition-duration: 200ms;
}
@media (max-width: 799px)
{
    .menu
    {
        margin-left: 5px;
    }
}
.menu:hover
{
    background-color: transparent;
    transform: scaleX(150%) translateY(-12px);
}
.menu:active
{
    transform: scale(90%, 90%) translateY(-12px);
}

.blocksaffinityTitle
{
    font-weight: normal;
    margin-top: 12px;
    width: max-content;
    cursor: default;
    transition-duration: 200ms;
}
.blocksaffinityTitle:active
{
    transform: scale(90%, 90%);
}

@media (max-width: 799px)
{
    .blocksaffinityTitle
    {
        margin-left: 60px;
    }
}
@media (min-width: 800px)
{
    .blocksaffinityTitle
    {
        margin-left: 20px;
    }
}


.blocksaffinityTitle-BlinkingCursor
{
    margin-top: 28px;
    top: 0;
    position: absolute;
    width: 10px;
    height: 3px;
    cursor: default;
    transition-duration: 200ms;
    opacity: 0%;
    animation-iteration-count: infinite;
    animation-name: blink-blinking-cursor;
    animation-duration: 1000ms;
    animation-timing-function: cubic-bezier(1, 0.25, 0.25, 1);
}
@media (max-width: 799px) {
    .blocksaffinityTitle-BlinkingCursor
    {
        margin-left: 155px;
    }
}
@media (min-width: 800px)
{
    .blocksaffinityTitle-BlinkingCursor
    {
        margin-left: 115px;
    }
}
@keyframes blink-blinking-cursor
{
    0%
    {
        opacity: 0%;
    }
    50%
    {
        opacity: 100%;
    }
    100%
    {
        opacity: 0%;
    }
}

@media (min-width: 800px)
{
    .sidebar
    {
        top: 0;
        height: 100%;
        position: fixed;
        z-index: 100;
        transition-duration: 200ms;
        width: 250px;
        /* Works the same as margin-left but I'm scared of transforms */
        /* transform: translateX(-250px); */
        margin-left: -250px;

        /* MAKE IT FLOAT */
        margin-left: -270px
    }
}
@media (min-width: 400px) and (max-width: 799px) /* Square desktop view */
{
    .sidebar
    {
        top: 0;
        height: 100%;
        position: fixed;
        z-index: 990;
        transition-duration: 200ms;
        width: 250px;
        left: -250px;

        /* MAKE IT FLOAT */
        /* Visible offset is 20px. */
        /* Note: `left: 20px` is set in the animation under "Square desktop view" */
        height: calc(100vh - 95px); /* Sum of both top and bottom offsets = 20px + 55px + 20px = 75px */
        margin-top: calc(20px + 45px); /* floating navbar height from top: 45px + 20px = 65px */
        margin-bottom: 20px;
        border-radius: 20px;
    }
}
@media (max-width: 399px) /* Small view */
{
    .sidebar
    {
        top: 0;
        height: 100%;
        position: fixed;
        z-index: 990;
        transition-duration: 200ms;
        width: 400px;
        left: 400px;
    }
}
.sidebarIn
{
    animation: sidebarIn 200ms cubic-bezier(0.075, 0.82, 0.165, 1) 0ms 1 normal forwards;
}
.sidebarOut
{
    animation: sidebarOut 200ms cubic-bezier(1, 0.25, 0.25, 1) 0ms 1 normal forwards;
}
@media (min-width: 400px) /* Square desktop view*/
{
    @keyframes sidebarIn
    {
        from
        {
            /* left: -250px; */ /* Non floating */
            /* Yes floating, accommodate for margin-left when out = +20px */
            left: -270px;
            visibility: hidden;
        }
        to
        {
            /* left: 0px; */ /* Non floating */
            /* Yes floating */
            left: 20px;
            visibility: visible;
        }
    }
    @keyframes sidebarOut
    {
        from
        {
            /* left: 0px; */ /* Non floating */
            /* Yes floating */
            left: 20px;
            visibility: visible;
        }
        to
        {
            /* left: -250px; */ /* Non floating */
            /* Yes floating, accommodate for margin-left when out = +20px */
            left: -270px;
            visibility: hidden;
        }
    }
}
@media (max-width: 399px) /* Small view */
{
    @keyframes sidebarIn
    {
        from
        {
            left: -400px;
            visibility: hidden;
        }
        to
        {
            left: 0px;
            visibility: visible;
        }
    }
    @keyframes sidebarOut
    {
        from
        {
            left: 0px;
            visibility: visible;
        }
        to
        {
            left: -250px;
            visibility: hidden;
        }
    }
}

/* @media (max-width: 299px)
{
    .sidebar
    {
        width: 100%;
    }
}
@media (max-width: 499px)
{
    .sidebar
    {
        left: 0px;
    }
} */

/*
THIS IS COMMENTED OUT FOR A REASON.
DON'T YOU EVEN THINK ABOUT UNCOMMENTING IT.
*/
/*
Should probably put an explanation that's my bad but it makes the sidebar appear and fly out again so yeah note to self dont uncomment
@media (min-width: 800px)
{
    .sidebar
    {
        animation: sidebarOut 200ms cubic-bezier(1, 0.25, 0.25, 1) 0ms 1 normal forwards;
    }
} */
@media (min-width: 400px) and (max-width: 799px) /* Square desktop view */
{
    .sideBtn
    {
        width: 250px;
    }
}
@media (max-width: 399px) /* Small view */
{
    .sideBtn
    {
        width: 100vw;
    }
}
.sideBtn {
    margin: 0;
    position: static !important;
    transform: none;
    border: none;
    height: 45px;
    padding: 0;
    top: 0;
    border-radius: 0;
    color: white;
    text-align: center;
    line-height: 24px;
    font-weight: normal;

    transition: background-size 350ms ease;
    background-size: 0% 100%;
    background-position: left center;
    background-repeat: no-repeat;
}
.sideBtn:hover {
    background-position: left center;
    background-size: 100% 100%;
    background-color: transparent;
}
.sideBtn:active
{
    transition: background-size 50ms ease;
    background-position: center center;
    background-size: 90% 90%;
}
@media (min-width: 800px) {
    .navBtn {
        opacity: 0;
        transform: translateY(-25px);
        animation: flyIn 0s ease forwards;
    }
    /* .homeBtn 
    { 
        animation-delay: 0ms; 
    }

    .moreBtn 
    { 
        animation-delay: 500ms; 
    }

    .contBtn 
    { 
        animation-delay: 400ms; 
    }

    .projBtn 
    { 
        animation-delay: 300ms; 
    }

    .downBtn 
    { 
        animation-delay: 200ms; 
    }

    .gameBtn 
    { 
        animation-delay: 100ms; 
    } */
}
@media (max-width: 799px)
{
    .navBtn
    {
        opacity: 1;
        transform: translateY(0px);
        animation: flyOut 0s ease forwards;
    }

    /* .moreBtn 
    { 
        animation-delay: 500ms; 
    }

    .contBtn 
    { 
        animation-delay: 400ms; 
    }

    .projBtn 
    { 
        animation-delay: 300ms; 
    }

    .downBtn 
    { 
        animation-delay: 200ms; 
    }

    .gameBtn 
    { 
        animation-delay: 100ms; 
    }
    .homeBtn 
    { 
        animation-delay: 0ms; 
    } */
}


.page
{
    background: transparent;
    position: fixed;
    z-index: 989;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
@media (max-width: 699px)
{
    .Home-MainPageContent
    {
        position: relative;
        z-index: -999;
        width: 100%;
        background-color: inherit;
        /* backdrop-filter: blur(5px); */
    }
}


.welcomeBox
{
    padding: 20px;
    border-radius: 15px;
    backdrop-filter: blur(5px);
    transition-duration: 200ms;
}

.home-section-divider
{
    margin: 10px;
    padding: 10px;
    border-radius: 20px;
}
@media (min-width: 1000px) /* normal width */
{
    .home-section-divider {
        margin-right: 10%;
        margin-left: 10%;
    }
}
@media (min-width: 1800px) /* wide normal width (ACTUALLY normal 16:9 shi) */
{
    .home-section-divider {
        margin-right: 30%;
        margin-left: 30%;
    }
}

.Box
{
    transition-duration: 200ms;
    backdrop-filter: blur(5px);
    padding: 20px;
    padding-bottom: 50px;
}
.FeatProj-callToAction
{
    position: absolute;
    width: 100%;
    height: 30px;
    padding-top: 12px;
    left: 0;
    bottom: 0;

    /* lift text up a bit - i kinda just eyeballed the value */
    line-height: 1.3; 
}

.FeatProj-callToAction img
{
    position: relative;
    
    /* eyeballed it again */
    top: -0.4em;
    margin: 0 auto;
}
@media (min-width: 650px) /* normal width */
{
    .Box
    {
        border-radius: 15px;
        width: 500px;
        margin: 0 auto;
    }
    .HoverBox:hover
    {
        scale: 1.01;
        transform: translateY(-3px);
    }
    .HoverBox:active
    {
        transition: scale 50ms;
        scale: 0.98;
    }
    .FeatProj-callToAction
    {
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }
}
@media (max-width: 649px) /* phone width */
{
    .Box
    {
        /* border-radius: 0px; */
        border-radius: 15px;
        margin-left: 0px;
        margin-right: 0px;
    }
}
.NoPadding
{
    padding: 0 !important;
}


/* Fix for content being too high */
.vcenter-ObjectsInside {
    padding-top: 80px; /* Add space for the fixed navbar */
    min-height: calc(100vh - 80px); /* Ensure proper vertical centering */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Ensure welcome box doesn't overlap navbar */
.welcomeBox { margin-top: 20px; }


/* The image at the top of a game card */
.GameCardImgHeader
{
    width: 200px;
    height: 134.89px;
    border-radius: 15px;
}

.Games {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.GameCard {
    width: 200px;
    height: 500px;
}
@media (max-width: 649px) /* override the Box's styles: */
{
    .GameCard
    {
        border-radius: 15px;
        margin-left: 0px;
        margin-right: 0px;
    }
}
.GameCard img
{
    max-height: 200px;
    max-width: 200px;
}
.GameCardIcon-Win
{
    /* The image is 32px x 32px */
    /* The Game Card has a width of 200px */
    /* The CallToAction has a height of 30px */
    bottom: 45px;
    left: 5px;
    position: absolute;
}
@media (min-width: 650px) /* normal width */
{
    .GameCard img
    {
        transition-duration: 200ms;
    }
    .GameCard:hover
    {
        transform: translateY(-3px);
        scale: 1.01;
        transform-origin: center;
    }
}
@media (min-width: 549px)
{
    .GameCardImgHeader:hover
    {
        filter: brightness(150%);
    }
}





/* The image at the top of a game card */
.MoreCardImgHeader
{
    width: 200px;
    height: 134.89px;
    border-radius: 15px;
}

.Mores {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.MoreCard {
    width: 200px;
    height: 500px;
}
@media (max-width: 649px) /* override the Box's styles: */
{
    .MoreCard
    {
        border-radius: 15px;
        margin-left: 0px;
        margin-right: 0px;
    }
}
.MoreCard img
{
    max-height: 200px;
    max-width: 200px;
}
.MoreCardIcon-Win
{
    /* The image is 32px x 32px */
    /* The Game Card has a width of 200px */
    /* The CallToAction has a height of 30px */
    bottom: 45px;
    left: 5px;
    position: absolute;
}
@media (min-width: 650px) /* normal width */
{
    .MoreCard img
    {
        transition-duration: 200ms;
    }
    .MoreCard:hover
    {
        transform: translateY(-3px);
        scale: 1.01;
        transform-origin: center;
    }
}
@media (min-width: 549px)
{
    .MoreCardImgHeader:hover
    {
        filter: brightness(150%);
    }
}

/* no */
.scale-image
{
    width: unset;
    height: unset;
}

.round-corners
{
    border-radius: 10px;
}

    

.footer-Text
{
    padding: 20px;
}
footer
{
    width: 100%;
    box-shadow: 0px 0px 0px 0px rgb(0, 0, 0) !important;
    bottom: -100px;
    position: absolute;
}