/* GENERIC */
body {
  margin: 0;
  height: 100vh;
  width: 100vw;
}

.Content /* ABOVE BACKGROUND */
{
    height: calc(100vh - 50px); /*Top bar is 50px*/
    width: 100vw;
    overflow: hidden;
    position: fixed;
    z-index: 1;
}

/* CARD */
.card 
{
    border: 3px solid black !important;
    animation: CardLoadAnimation 0.3s ease;
}

@keyframes CardLoadAnimation {
    from 
    {
        transform: translateY(-15%);
    }
    to 
    {
        transform: translateY(0);
    }
}

/* PRICE TAG */
.PriceTag 
{
    display: block; 
    border-radius: 8px; 
    background-color: lightgrey; 
    min-width: 25%; 
    max-width: 100px; 
    margin: auto;
}

/* GRID TILE */
.GridTile 
{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.GridTile:hover
{
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}


/* SPLASH SCREEN LOADER */
.SplashScreenLoader 
{
    height: 100vh;
    width: 100vw;

    top: 0;
    left: 0;
    position: fixed;
    z-index: 100;
    display: flex;
    background-color: rgba(64, 64, 64, 1) !important;
    justify-content: center;
    align-items: center;

    transition: opacity 0.75s ease, visibility 0.75s ease;
}

.SplashScreenLoader::after 
{
    content:  "";
    width: 25vh;
    height: 25vh;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 5vh solid lightgrey;
    border-top-color: royalblue;

    z-index: 2;
    
    animation: SplashScreenLoadingAnimation 0.75s ease infinite;
}

.SplashScreenLoader-Hidden 
{
    opacity: 0;
    visibility: hidden;
}

@keyframes SplashScreenLoadingAnimation 
{
    from { transform: rotate(0turn) }
    to {transform: rotate(1turn) }
}

/* SCROLLING BACKGROUND */
.ScrollingBackground {
    height: 100vh;
    background-repeat: repeat;
    background-size: cover;
    background-image: url('../Images/Background.png');
    background-blend-mode: lighten;
    background-color: rgb(240, 240, 240);
    animation: ScrollingBackgroundAnimation 45s linear infinite;
    position: absolute;
    inset: 0;
    z-index: 0;
}

@keyframes ScrollingBackgroundAnimation {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 2000px 2000px;
  }
}

/* BUTTONS  */
.btn {
    border: 3px solid black !important;
    transition: transform .15s ease !important;
    font-weight: bold !important;
    font-size: 125% !important;
    transform: scale(1);
}

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