:root {
    
    --Boxbound-gray: #3F7787;
    --Boxbound-light-gray: #C2D2D7;
    --Boxbound-white: #e7ecee;
    --Boxbound-dark-gray: #10292f;
    --Boxbound-yellow:#F5E2A2;
    --Boxbound-red: #EE7451;

    scroll-behavior: smooth;
    scroll-padding-top: 6rem; /* Set this to the height of your header */
    
}
/*debug
*{
    border: #A44A3F;
    border-style: solid;
    border-width: 1pt;
}
/**/

*{
    font-family: "Josefin Sans", sans-serif;
    
}

#footer a{
    color:var(--Boxbound-gray);
    
}

body{
    margin: 0;
    background-color: var(--Boxbound-dark-gray);
    background-image: url("img/background.jpg");
    background-size:cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    /*padding-top: 2rem;
*/
    overflow-x: hidden;
}

/*#page{
    width:auto;
    margin-left: 4rem;
    margin-right: 4rem;

    max-width: 800;
}*/
#page {
    margin: 0 auto; 
    padding-left: 6rem;
    padding-right: 6rem;
    max-width: 800pt; 
    min-width: 60vw;
    box-sizing: border-box;
}


#coverImage {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Hides parts of the image outside the container */
    height: 50vh; /* Set container height */
}
#coverImage img {
    height: 100%; /* Match the height of the container */
    width: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Ensures the image covers the container */
    object-position: center; /* Centers the image */
}
/* Speech bubble styles */
#bubble {
    position: absolute;
    bottom: 50%;
    right: 70%;
    width: 200px;
    max-width: 40vw;
    background-color:var(--Boxbound-white);
    padding: 1rem;
    border-radius: 1rem;
    border-style: solid;
    border-color: var(--Boxbound-dark-gray);
    border-width: 1pt;
    box-shadow: 0 12px 15px rgba(0, 0, 0, 0.5);
    text-align: left;
    z-index: -1;
    opacity: 0;
    animation: fadeIn 15s ease-in-out 6s forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 100; 
    }
    95% {
        opacity: 100;
    }
    100% {
        opacity: 0; 
        
    }
}

#PopupChar
{
    position:fixed;
    width:200pt;
    height:300pt;

    z-index: 999;
    bottom:-300pt;
    right:-50pt;
    
    animation: slideIn 20s ease-in-out 2s forwards;/*REENABLE ON RELEASE*/

    transition: transform 0.3s ease-in-out; /* Smooth transition when hovering */

}

@keyframes slideIn {
    0% {
        bottom: -300pt; /* Start below the screen */
    }
    5% {
        bottom: -100; /* End at the normal position */
    }
    95% {
        bottom: -100; /* End at the normal position */
    }
    100%{
        bottom: -300pt;
    }

}

#PopupChar:hover
{
    transform: translateY(-25px); 
}


#PopupChar img
{
    height: 100%;
    width: auto;
    filter:drop-shadow(0 12px 15px rgba(0, 0, 0, 0.5));
}

#countdown
{
    font-size: 1rem;
    font-weight:bold;
}


#top
{
    padding:1rem;
    position:sticky;
    width:  auto;
    
    height: 3rem;
    top: 0;
    background-color: var(--Boxbound-light-gray);
    display: flex;
    flex-direction:row;
    
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#downloadbttns
{
    display: flex;
    flex-direction:row;
    height: 3rem;
    border-radius: 0;
}
#downloadbttns img
{
    border-radius: 0;
}
#downloadbuttn
{
    height:100%;
    border-radius: 0;
}
#top img
{
    height: 100%;
}
#top-nav
{
    width:auto;
    display: flex;
    flex-direction:row;
    justify-self:right;
    justify-items: right;
}
a
{
    color: var(--CurlewRed);

}
#GIF_DIV {
    display: flex;
    flex-direction: row;
    justify-content: center;  /* Center the images when they don't need scaling */
    align-items: center;
    width: 100%;
    gap: 2rem;  /* Adds spacing between images */
    overflow: hidden; /* Prevents overflow */
    padding-top: 0rem;
    padding-bottom: 2rem;
}

.screenshot-gif {
    max-height: 50vh; /* Limit height to 50% of viewport */
    max-width: calc(100% / 3 - 2rem); /* Make sure 3 images fit, accounting for margins */
    height: auto; /* Maintain aspect ratio */
    width: auto; /* Maintain aspect ratio */
    
    border-radius: 1rem;
    border-width: 1pt;
    border-style: solid;
    border-color: var(--Boxbound-light-gray);
    box-shadow: -4pt 4pt 5pt rgba(0, 0, 0, 0.2);

}
#HeaderContainer
{
    padding-top: 2rem;
    padding-bottom: 0rem;
}
h1{
    margin:0;
    font-weight:bold;
    font-size: 3rem;
    color:var(--Boxbound-yellow)
}
h2{
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight:bold;
    font-size: 2rem;
    color:var(--Boxbound-dark-gray)
}
h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight:bold;
    font-size: 1.5rem;
    color:var(--Boxbound-dark-gray)
}
p {
    font-weight:330;
    font-size: 1.5rem;
    line-height: 110%;
    color:var(--Boxbound-dark-gray)
}
.storebutton{
    height: 2rem;
    margin-right: 1rem;
}
.storebutton img
{
    height: 100%;
}

#Screenshotlist{
    padding-top: 1rem;
    padding-bottom: 2rem;
    height: 33vh;
    width: 100%;
    display: flex;
    flex-direction:row;
    overflow-y:hidden;
    overflow-x: hidden;


    mask-image: linear-gradient(
    to right,
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 5%,
    hsl(0 0% 0% / 1) 95%,
    hsl(0 0% 0% / 0)
    );
}

#PressLinks{
    display: flex;
    flex-direction: column;
    gap:1rem;
}
#PressLinks a{
    font-size: 1.5rem;
    font-weight:200;
    text-decoration-thickness:0.5pt;
    color:var(--Boxbound-yellow);
}

#Boxshotlist{
    padding-top: 2rem;
    padding-bottom: 2rem;
    height: 3rem;
    width: 100%;
    gap:1rem;
    display: flex;
    flex-direction:row;
    overflow-y:hidden;
    overflow-x: hidden;


    mask-image: linear-gradient(
    to right,
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 5%,
    hsl(0 0% 0% / 1) 95%,
    hsl(0 0% 0% / 0)
    );
}

#scroller2
{
    
    position: relative;
  white-space: nowrap;
  display: inline-block; /* Ensure proper inline scrolling */
  will-change: transform;
  
  animation: marquee2 30s linear infinite;

}

#scroller
{
    position: relative;
  white-space: nowrap;
  display: inline-block; /* Ensure proper inline scrolling */
  will-change: transform;
  animation: marquee 60s linear infinite;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes marquee2 {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.Section
{
    padding-top: 3rem;
    padding-bottom: 4rem;
    padding-left: 3rem;
    padding-right: 3rem;
}


.Section.Dark h2
{
    color: var(--Boxbound-yellow);
}
.Section.Light
{
    background-color: var(--Boxbound-light-gray);
    filter:drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
}

.box{
    margin-left: 1rem;
    height: 100%;
    border-width: 0pt;
}

.screenshot{
    height: 100%;
    margin: 0rem;


    border-radius: 1rem;
    border-width: 1pt;
    border-style: solid;
    border-color: var(--Boxbound-light-gray);
    box-shadow: -1pt 1pt 2pt rgba(0.1, 0.15, 0.2,0.2);
}
#DownloadBtnList
{
    display: flex;
    flex-direction:row;
    justify-items: left;
}
.content{
    background-color: var(--Boxbound-gray);
    padding-top:0rem;
    padding-bottom: 0rem;
}
#contact-links
{
    display:flex;
    gap:1rem;
}
#contact-links img
{
    height: 2rem;
    width: auto;
}
#footer {
    position: static;

    /*left: 0;*/
    bottom: 0;
    width: 100%;
    height: 5rem;
    padding: 0rem;
    margin-top:1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap:2rem;
    /*background-color: var(--Boxbound-light-gray);*/
  }
#footer img
{
    height: 4rem;
}


.Card #icon
{
    width: 100pt; /* Set a fixed width */
    aspect-ratio: 1 / 1; /* Enforce a 1:1 aspect ratio (square) */
    max-width: 50%;
    border-radius: 1rem;
    object-fit: cover; /* Ensures the image fills the square without distortion */
    margin-right: 1rem;
    flex-shrink: 0; /* Prevent the icon from shrinking */
}
#GameTopRow
{
    display: flex;
    align-items: flex-start;
}
#GameTopRow #title {
    max-width: 50%;
    max-height: 50pt;
    object-fit: contain; 
    width: 100%;
    height: auto;
}

#StoreItemList
{
    padding-top: 2rem;
    padding-bottom: 2rem;
    height: 50vh;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto; /* Allow horizontal scrolling */
    scroll-snap-type:x mandatory; /* Enable snapping horizontally */
    scrollbar-width: none; /* Firefox: hide scrollbar */
    -ms-overflow-style: none; /* IE and Edge: hide scrollbar */
    scroll-behavior:smooth;
    padding-right: 50%;
}
#StoreItemList::before,
#StoreItemList::after {
        content: "";
        display: block;
        min-width: 50vw; /* Half of the viewport width */
        flex-shrink: 0;
    }
#StoreItemList::-webkit-scrollbar {
    /*hide scrollbar on chrome,opera*/
    display: none;
}


.Card
{
    
    background-color:var(--Boxbound-white);
    border-radius: 1rem;
    box-sizing: border-box;
    padding: 2rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
#StoreItem
{
   scroll-snap-align:center; /* Cards snap to the start */
    flex: 0 0 auto; 
    max-width: 75vw;
}

.Card a
{
    text-decoration: none;
    height: 100%; 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.Card a img
{
    max-height: 90%;
    max-width: 90%;

    
    border-radius: 1rem;
    border-width: 1pt;
    border-style:solid;
    border-color: var(--Boxbound-light-gray);
    box-sizing: border-box;
}
.Card a p
{
    font-weight:bold;
    color:var(--Boxbound-red);
    height: 10%;
    box-sizing: border-box;
    justify-self: flex-end;
    padding: 0;
    margin-top: auto; 
}


/* Dots navigation container */
#ScrollIndicators {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10pt;
    margin-top: 1rem;
}
/* Individual dot styling */
.ScrollIndicator {
    width: 10pt;
    height: 10pt;
    background-color:var(--Boxbound-dark-gray); /* Default dot color */
    border-radius: 50%; /* Make it circular */
    transition: background-color 0.3s ease;
}

.ScrollIndicator.active {
    background-color:var(--Boxbound-yellow); /* Highlighted dot */
}
.ScrollIndicator:hover {
    scale:150%;
}

/*lastweek*/
#lastweek {
    margin-bottom: 2rem;
}
.user-container {
    display: flex;
    flex-direction: row; /* Arrange the image and text horizontally */
    align-items: center; /* Vertically center the image and text */
    gap: 0.5rem; /* Add some space between the image and the text */
}
.user-container img{
    width: 2rem;
    height: 2rem;
}
.user-container p{
    padding: 0;
    margin: 0;
}

/*styling for leaderboard*/
table {
    margin: 1rem auto;
    border-collapse: collapse;
    width: 100%;
    background-color:var(--Boxbound-white);
    border-radius: 1.0rem;
    overflow: hidden;
    gap: 1pt;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

th, td {
    text-align: left;
    padding: 1rem;
    border-bottom: 1px solid var(--Boxbound-light-gray);

    font-size: 1.25rem;
    color:var(--Boxbound-dark-gray)
}

th {
    background-color: var(--Boxbound-dark-gray);

    font-size: 1.25rem;
    color:var(--Boxbound-yellow)
}
.hidden-row {
    display: none;
}

.view-more {

    text-align: center;
    background-color:var(--Boxbound-gray);
    color:var(--Boxbound-yellow);
    font-weight: bold;
    cursor: pointer;
    padding: 1rem;
    font-size:1.25rem;
    border: none;
    width: 100%;

    border-radius: .5rem;
}

.view-more:hover {
    background-color: var(--Boxbound-dark-gray);
}

/*
tr:nth-child(even) {
    background-color: var(--Boxbound-gray);
}

tr:hover {
    background-color:var(--Boxbound-yellow);
    cursor: default;
}

td {
    color: #333;
}*/

/*vertical screens*/
@media only screen and (max-aspect-ratio: 8/10) {
    #GIF_DIV {
        display:flex;
        flex-direction: row;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scroll-behavior: smooth; /* Smooth scrolling */
        scroll-snap-type: x mandatory; /* Enables horizontal snap */

    /* Hide scrollbar in Webkit (Chrome, Safari) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer/Edge */
    }

    /* Hide scrollbar in Webkit browsers */
    #GIF_DIV::-webkit-scrollbar {
        display: none;
    }
    #GIF_DIV::before,
    #GIF_DIV::after {
        content: "";
        display: block;
        min-width: 50vw; /* Half of the viewport width */
        flex-shrink: 0;
    }
    .screenshot-gif
    {
        max-height: none; /* Remove previous max-height */
        max-width: none; /* Remove previous max-width */
        height: 50vh;
        width: auto;
        scroll-snap-align: center; /* Centers each GIF in viewport */
    }

    .Card
    {
        padding: 2rem;
    }
    .Card #icon
    {
        width: 50pt; /* Set a fixed width */
    }
    #page
    {
        padding-left: 0rem;
        padding-right: 0rem;
    }
    .Section
    {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    #StoreItemList
    {

        scroll-snap-type: x mandatory; /* Enable snapping horizontally */

    }
    #StoreItem
    {
        scroll-snap-align:start;
    }
}