@import "tailwindcss";

/* Body and Global Styles */
body {
    background-color: #1F0322;
    margin: 0;  /* Prevent default body margin */
    overflow-x: hidden;
}

* {
    font-family: "Rubik", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
}

/* Interactive Element */
.InteractiveElement {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    position: absolute;
}

/* Title */
.Title {
    width: 100%;
    top: 0%;
    height: calc(100vh - 10vh);  /* Let the content dictate the height */
    position: static;  /* Absolutely positioned relative to .container */
    box-shadow: 0 0 100px rgba(218, 65, 103, 0.25);
}

/* Centering */
.CenterItems {
    display: flex;
    align-items: center;
    align-content: center;
    position: relative;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.CenterHorizontal {
    display: flex;
    justify-content: center;
}

.CenterVirtical {
    position: relative;
    transform: translate(0, -50%);
    top: 50%;
    height: 100%;
}

/* Header Text */
.HeaderTextCentered {
    color: white;
    font-size: 32px;
    position: relative;
    font-weight: bolder;
    left: 50%;
    transform: translate(-50%, 0);
}

.HeaderTitleCentered {
    color: white;
    font-size: 32px;
    position: relative;
    font-weight: bolder;
}

.CommentCentered {
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    position: relative;
    font-weight: normal;
}

/* Header */
.Header {
    width: calc(100% - 25px);
    height: 10vh;
    max-height: 60px;
    background-color: rgba(59, 86, 183, 0.25);
    position: relative;  /* Absolutely positioned relative to .container */
    z-index: 1000;  /* Ensure it stays on top */
    border-radius: 25px;
    top: 15px;
}

.HeaderTitle {
    color: white;
    font-size: 32px;
    position: relative;
    font-weight: bolder;
    text-align: center;
    transition: all .5s ease;
    z-index: 100;
}

.HeaderTitleBold{
    color: white;
    font-size: 25px;
    position: relative;
    font-weight: bold;
    text-align: center;
    transition: all .5s ease;
    z-index: 100;
}
.HeaderTitleNormal{
    color: white;
    font-size: 25px;
    position: relative;
    font-weight: normal;
    text-align: center;
    transition: all .5s ease;
    z-index: 100;
}
.HeaderTitleLight{
    color: white;
    font-size: 25px;
    position: relative;
    font-weight:lighter;
    text-align: center;
    transition: all .5s ease;
    z-index: 100;
}

.HeaderTitleLeft {
    color: white;
    font-size: 32px;
    position: relative;
    font-weight: bolder;
    text-align: start;
    transition: all .5s ease;
    z-index: 100;
}

.HeaderTitleNonCentered {
    color: white;
    font-size: 32px;
    position: relative;
    font-weight: bolder;
    transition: all .5s ease;
    z-index: 100;
}

.HeaderTitle a {
    color: gold; /* Inherits the white color from .HeaderTitle */
    font-size: inherit; /* Matches the parent font size */
    font-weight: inherit; /* Matches the parent font weight */
    text-decoration: none; /* Removes the default underline */
    transition: all .3s ease; /* Smooth transition for hover effects */
}

.HeaderTitle a:hover {
    text-decoration: underline; /* Adds an underline on hover for better UX */
}

.HeaderItems {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: baseline;
    position: absolute;
    top: 0%;
    height: 100%;
    width: 100%;
}
.HeaderItemsLeft {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-self: baseline;
    position: absolute;
    top: 0%;
    height: 100%;
    width: 100%;
}

/* Buttons */
.TextButton {
    background-color: rgba(0, 0, 0, 0);
    color: white;
    height: 100%;
    max-height: 40px;
    outline-style: none;
    border: none;
    width: auto;
    margin-right: 10px;
    border-radius: 40px;
    font-weight: bolder;
    position: relative;
    transition: all .5s ease;
}

.TextButton:hover {
    transform: scale(1.05);
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.25);
}

.TextButton:active {
    transform: scale(0.95);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}

/* Other Buttons */
.LoginButton,
.RedButton,
.PurchaseButton {
    background-color: #DA4167;
    color: white;
    height: 100%;
    width: 100%;
    max-height: 40px;
    max-width: 125px;
    outline-style: none;
    border: none;
    margin-right: 10px;
    border-radius: 40px;
    position: relative;
    box-shadow: 0 0 50px rgba(138, 28, 124, 0.25);
    transition: all .5s ease;
}


.RedButtonFlex {
    background-color: #DA4167;
    color: white;
    outline-style: none;
    border: none;
    margin-right: 10px;
    border-radius: 40px;
    padding: 10px;
    display: flex;
    position: relative;
    box-shadow: 0 0 50px rgba(138, 28, 124, 0.25);
    transition: all .5s ease;
}

.LoginButton:hover,
.RedButton:hover,
.PurchaseButton:hover,
.RedButtonFlex:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgb(255, 255, 255);
}

.RedButtonFlex:active,
.LoginButton:active,
.RedButton:active,
.PurchaseButton:active {
    transform: scale(0.9);
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.5);
}

.Seperator {
    background-color: #ffffff;
    height: 100%;
    max-height: 40px;
    width: 100%;
    max-width: 5px;
    outline-style: none;
    border: none;
    margin-right: 10px;
    border-radius: 40px;
    position: relative;
}

.SeperatorUnconditional {
    background-color: #ffffff;
    height: 100%;
    width: 5px;
    margin-right: 10px;
    border-radius: 40px;
    position: relative;
}

/* List and Containers */
.List {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    position: relative;
}

.actualList {
    display: flex;
    flex-direction: column;
    position: relative;
}

.ListSideways {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
}

.ListContentContainerCenter {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-self: center;
    position: relative;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ListContentContainerCenterReversed {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-items: last baseline;
    align-self: center;
    position: relative;
    height: 100%;
}

.ListContentContainerSideways {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

.ListContentContainerSidewaysCenter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.sideways-list li {
    margin-right: 20px; /* Adjust spacing between items as needed */
}

/* Card Slot */
.CardSlot {
    position: relative;
    max-height: 440px;
    max-width: 733px;
    margin: 15px;
    height: 330px;
    width: 549.75px;
    aspect-ratio: 73.3 / 44;  /* Maintain 733:440 aspect ratio */
    border-radius: 20px;
    outline-width: 5px;
    background-image: linear-gradient(to top, rgba(218, 65, 103, 0.25), rgba(218, 65, 103, 0));
    outline-style: solid;
    outline-color: rgba(218, 65, 103, 0.5);
    outline-offset: -1px;
    box-shadow: 0 0 100px rgba(138, 28, 124, 0.25);
}

.CardSlotNoLimit {
    position: relative;
    display: flex;
    margin: 15px;
    border-radius: 20px;
    outline-width: 5px;
    background-image: linear-gradient(to top, rgba(218, 65, 103, 0.25), rgba(218, 65, 103, 0));
    outline-style: solid;
    outline-color: rgba(218, 65, 103, 0.5);
    outline-offset: -1px;
    box-shadow: 0 0 100px rgba(138, 28, 124, 0.25);
}

/* Container */
.container {
    display: flex;  /* Flexbox container */
    width: 100%;
    height: 1000vh;  /* Full viewport height */
    flex-direction: column;  /* Place elements in a column (top to bottom) */
}

.gradient-outline {
    position: relative;
    height: 180px;
    background-color: rgba(59, 86, 183, 0.25);
}

.gradient-outline::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(90deg, #536DFE 0%, #FF0000 25%, #B08000 75%, #61FF00 100%);
    z-index: -1;
    border-radius: 25px; /* Adjust as needed */
}

.rainbow-box {
    position: absolute;
    width: 100%;   /* Adjusts to parent */
    height: 100%;  /* Adjusts to parent */
    background-color: #261847; /* Your calculated background */
    border-radius: inherit; /* Optional */
    display: flex; /* Ensures child elements are positioned properly */
    align-items: center; /* Adjust to your layout needs */
    justify-content: center;
}

.rainbow-box::before {
    content: "";
    position: absolute;
    top: -10px; 
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(90deg, #536DFE, #FF0000, #B08000, #61FF00);
    filter: blur(15px);
    z-index: -1; /* Ensures glow is behind other children */
    border-radius: inherit; /* Matches parent's border-radius */
    pointer-events: none; /* Prevents interference with other children */
}

.GameCardSlot{
    aspect-ratio: 1px 1px;
    width: 100%;
    height: 100%;
    min-width: 250px;
    min-height: 250px;
    max-width: 300px;
    max-width: 300px;
    background-color: #261847;
    border-radius: 25px;
    outline-width: 5px;
    outline-color: #536DFE;
    outline-style: solid;
    box-shadow: 0 0 100px rgba(83, 109, 254, 0.25);
    transition: all .5s ease;
    cursor: pointer;
    position: relative;
}

.GameCardSlot:hover{
    box-shadow: 0 0 25px rgba(83, 109, 254, 1);
    transform: scale(1.05);
}

.GameCardSlot:active{
    transform: scale(.95);
}

.Credentails{
    width: 100%;
    height: 32px;
    margin-top: 25px;
    font-size: 16px;
    outline-color: #5865F2;
    outline-width: 2px;
    outline-style: solid;
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
    font-family: "Rubik", serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: bolder;
    font-size: 20px;
    transition: border-color 0.3s ease;
    padding-left: 5px;
    padding-top: 5px;
    background-color: rgba(0, 0, 0, 1);
    background-image: linear-gradient(to top, rgba(88, 101, 242, .25), rgba(88, 101, 242, 0));
    box-shadow: 0 0 100px rgba(88, 101, 242, 0.25);
    color: white;
    resize: none;
    white-space: nowrap; /* Prevents text from wrapping */
    overflow-x: auto;    /* Adds horizontal scroll if text overflows */
}