:root {
    --bg-color:rgba(0, 0, 0, 0.3);
}

/* Reset default margins and lock the screen */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Prevents scrolling completely */
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;

    background-color: #000000; 

    /* background-image: url('Images/Background.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; */

    &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 200%);
        z-index: 500;
        mix-blend-mode: overlay;
        pointer-events: none;
    }
}

.crt-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    /* Move your background image here so it gets warped! */
    background-image: url('Images/Background.png'); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    /* APPLY THE BARREL DISTORTION FILTER TO EVERYTHING */
    filter: url(#crt-barrel-warp);

    /* Extreme 3D hardware-accelerated curved screen effect */
    transform: perspective(800px) rotateX(25deg) scale(0.94);
    transform-style: preserve-3d;

    /* Old glass bezel rounding configuration */
    border-radius: 40px / 20px; 
    
    /* Heavy inner tube shadows that blend seamlessly over the background image edges */
    box-shadow: 
        inset 0 0 100px rgba(0, 0, 0, 0.95),
        inset 0 0 30px rgba(0, 255, 100, 0.15);
}

/* Invisible/Transparent Nav Bar */
.navbar {
    width: 100%;
    height: 60px;
    background: transparent; 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

/* Main Container: Split 50/50 with a central border line */
.split-container {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
    position: relative;

    width: 80%; 
    margin: 0 auto; 
}

/* The vertical divider line in the center */
.split-container::before {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 50%;
    width: 2px;
    background-color: #68656500;
    transform: translateX(-50%);
}

/* Individual side panels centering contents */
.panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;

    margin: auto;

    width: 65%;
    max-width: 550px; 
    min-width: 320px;
    border-radius: 12px;

    background-color: rgba(0, 0, 0, 0.2); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    filter: drop-shadow(35px 65px 6px rgba(0, 0, 0, 0.35));
    box-shadow: 35px 65px 6px rgba(0, 0, 0, 0.12); 
}

/* Keeps the image contained inside your 250px box */
.responsive-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Optional: Remove the black border outline if you don't need it anymore */
.logo-box {
    width: 250px;
    height: 250px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

/* Social media row styling */
.socials {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

/* Individual rounded icon buttons */
.icon {
    width: 55px;
    height: 55px;
    border: 2px solid #000000;
    border-radius: 8px;
    background-color: transparent;
    transition: background 0.2s;

    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.12); 
}

.icon:hover {
    transform: translateY(-4px); /* Lifts the button up slightly */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.18); /* Deepens the shadow depth */
}

/* Center the icon image inside the rounded anchor container */
.kickstarter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px; /* Gives the inner logo breathing room */
    background-color: #05CE78; 
}

/* Ensure the SVG scales precisely without spilling over */
.kickstarter-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Optional hover state that introduces the official Kickstarter signature green (#05CE78) */
/* .kickstarter-btn:hover {
    background-color: #05CE78; 
    border-color: #05CE78;
} */

/* Center the Steam icon and clip spilling square corners */
.steam-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* This cuts off the square corners perfectly */
    background-color: #171a21;
}

/* Ensure the image fills the button completely */
.steam-icon {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Forces the square image to cleanly mask inside your shape */
}

/* Optional hover state using Steam's deep blue/dark theme tone (#171a21) */
/* .steam-btn:hover {
    background-color: #171a21;
    border-color: #171a21;
} */

/* Text labels at the bottom */
.label {
    font-size: 1rem;
    color: #333;
}

/* CRT Effect From -> https://codepen.io/creme/pen/aPJwEz */

.noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 400;
  opacity: .8;
  pointer-events: none;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://ice-creme.de/images/background-noise.png');
    pointer-events: none;
  }

  &-moving {
    opacity: 1;
    z-index: 450;

    &:before {
      will-change: background-position;
      animation: noise 1s infinite alternate;
    }
  }
}

.scanlines {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100%;
  pointer-events: none;
  z-index: 300;
  opacity: .6;
  will-change: opacity;
  animation: opacity 3s linear infinite;

  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 50%, rgba(25, 25, 25, 0.5) 51%);
    background-size: 100% 4px;
    will-change: background, background-size;
    animation: scanlines .2s linear infinite;
  }
}

/* Animations */
@keyframes opacity {
  0%, 100% { opacity: .4; }
  50% { opacity: .55; }
}

@keyframes scanlines {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 100%;
  }
}

@keyframes type {
  0%, 19% {opacity:0;}
  20%, 100% {opacity:1;}
}

/* End Of CRT Effect */

/* Responsive adjustments for phones and tablets */
@media (max-width: 768px) {
    body {
        overflow-y: auto; /* Allows scrolling only on mobile if content overflows */
    }

    /* Change split grid from 2 columns to a single column stack */
    .split-container {
        grid-template-columns: 1fr;
        height: auto;
        padding-top: 60px; /* Leaves room for the invisible navigation bar */
    }

    /* Hide the vertical dividing line since panels are now stacked */
    .split-container::before {
        display: none;
    }

    /* Give the panels breathing room and a horizontal separating line */
    .panel {
        padding: 40px 20px;
        min-height: 45vh; /* Each section takes up roughly half the screen height */
    }

    /* Optional: Add a subtle horizontal divider between the two sections */
    .panel:first-child {
        border-bottom: 2px solid #000000;
    }

    /* Scale down the logo boxes slightly so they fit smaller screens */
    .logo-box {
        width: 180px;
        height: 180px;
    }
}