:root {
  --font: Courier New, monospace;
}

body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: var(--font);
  background-image: url("https://images.unsplash.com/photo-1702285566718-af59dff21e50?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Custom scrollbar styling */
.main-container::-webkit-scrollbar {
  width: 8px;
}

.main-container::-webkit-scrollbar-track {
  background: #000000;
  border-radius: 10px;
}

.main-container::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #000000;
}

.main-container::-webkit-scrollbar-thumb:hover {
  background: #f0f0f0;
}

/* Also apply to TV screen content */
.tv-screen::-webkit-scrollbar {
  width: 8px;
}

.tv-screen::-webkit-scrollbar-track {
  background: #000000;
  border-radius: 10px;
}

.tv-screen::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #000000;
}


/* Firefox scrollbar styling */
.main-container, .tv-screen {
  scrollbar-width: thin;
  scrollbar-color: #00ff00 #000000;
}

button {
  background-color: black; 
  color: #00ff00; 
  border: 1px solid #00ff00; 
  padding: 5px 10px;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
}

.logo {
    width: 600px;  /* Fixed width */
    height: auto;  /* Maintain aspect ratio */
    display: block;
    margin: 0;
    z-index: 10;
}

/* TV Container - uses tv.png as a border/frame */
.tv-container {
    position: relative;
    margin-top: -220px;
    margin-bottom: -1000px;
    width: 1000px;  /* Adjust based on your TV image size */
    height: 667px; /* Adjust based on your TV image size */
    background-image: url('./assets/tv.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* area inside the TV frame */
.tv-screen {
    position: absolute;
    top: 279px; 
    left: 254px;  
    right: 376px;  
    bottom: 113px;
    padding:15px;  
    padding-top:25px;
    overflow-y: auto;
    background: rgb(0, 0, 0);
    color: #00ff00;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    border-radius: 5px;
}

/* TV Controls Container */
.controls {
    position: absolute;
    right: 250px;
    top: 234px;
    pointer-events: none; /* Allow clicks to pass through the container */
}

/* Individual knob styling */
.controls img {
    position: absolute;
    pointer-events: auto; /* Re-enable clicks on the knobs themselves */
    cursor: pointer;
}

/* Hover effect - scale up */
.controls img:hover {
    transform: scale(1.15) rotate(20deg);
}

/* Specific positioning for each knob */
.knob1 {
    width: 65px;
    height: 65px;
    top: 45px;
    right: 10px;
}

/* Add more knob classes as needed */
.knob2 {
    width: 65px;
    height: 65px;
    top: 135px;
    right: 15px;
}

.smallknob {
    width: 35px;
    height: 35px;
    top: 310px;
    right: 17px;
}

.smallknob2 {
    width: 35px;
    height: 35px;
    top: 310px;
    right: 53px;
}

/* Navigation styling inside TV screen */
.navigation {
    margin-top: 20px;
}

.navigation ul {
    list-style:">  ";
    padding: 0;
    margin: 0;
    margin-left: 50px;
}

.navigation li {
    cursor: pointer;
    padding-bottom: 12px;
}

.navigation li:hover {
    transform: translateX(10px);

}

.navigation a {
    color: #00ff00;
    text-decoration: none;
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 14px;
}

.navigation a:hover {
    color: #00ff88;
    text-shadow: 0 0 5px #00ff00;
}

.home{
    padding: 20px;
}

/* Additional page styling */
.game-item {
    margin: 10px 0;
    padding: 8px;
    border: 1px solid #00ff00;
    border-radius: 3px;
    background: rgba(0, 255, 0, 0.05);
}

.guestbook-form input, .guestbook-form textarea {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #00ff00;
    color: #00ff00;
    padding: 5px;
    font-family: 'Courier New', monospace;
}

.guestbook-entries .entry {
    margin: 10px 0;
    padding: 8px;
    border-left: 3px solid #00ff00;
    background: rgba(0, 255, 0, 0.05);
}

.shrine-content {
    text-align: center;
    margin: 20px 0;
}

#footer > span > a {
    color: white;
}