/* ============================
Generel Body Styles
============================ */

body{
  font-family: "SUSE Mono", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  background-color: #040d19;
  color: #ffffff;
  margin: 0;
  padding: 0;

  display: grid;
  
}

/* ============================
White Line Style

  Used in: 
  -album-libary.php
  -artist-libary.php
  -index.php

============================ */


.line{
    width: 80%;
    height: 2px;
    margin: 20px auto;
    margin-top: 10px;
    background-color: #ffffff;
}

/* ============================
Error and line Styles
============================ */


.error{
    color: red;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 10px;
}

.orange-line {
    width: 100%;
    height: 1px;
    background-color: #FA8128;
    border-radius: 2px;
    margin: 10px 2px;
}

/* ============================
Menue Bar Styles
============================ */

.menu {
    display: grid;
    position: fixed;
    z-index: 999;
    width: 100%;
    grid-template-columns: repeat(4, 1fr); /* Four equal columns */
    place-items: center;
    margin-top: 50px;
    padding: 12px 0;
    background-color: #010a15;
    border-bottom: 1px solid #ffffff; /* White bottom border */
}

.menu a {
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
}

.menu a:visited {
    color: #ffffff;
}

.menu a:hover {
color: #fa8128;
}


/* ============================
Navbar Styles
============================ */

/* Main navbar container */
.navbar {
display: grid;
position: fixed;
top: 0;
width: 100%;
grid-template-columns: 0.6fr 3fr 0.5fr 0.2fr 0.3fr; /* Layout of navbar items */
grid-template-rows: 1.3fr;
place-items: center;
margin: 0;
padding: 10px 0;
background-color: #010a15;
border-bottom: 1px solid #ffffff; /* White bottom border */
z-index: 1000;
}

/* Navbar link styles */
.navbar a {
color: white;
text-decoration: none;
font-size: 25px;
}

/* Navbar links hover effect */
.navbar a {
color: #ffffff;
font-weight: bold;
}

/* Specific navbar items */
.nav-home { justify-self: start; }
.nav-basket { justify-self: end; }
.nav-account { justify-self: end; }
.nav-settings { justify-self: center; }

.nav-search {
    justify-self: stretch;   /* make the whole search container stretch */
    width: 100%;
    display: flex;           /* keep icon + input aligned */
    align-items: center;
    gap: 10px;
}

/* Search input and icon */
.nav-search input {
width: 100%;
padding: 5px;
font-size: 15px;
border-radius: 4px;
border: 1px solid white;
background-color: black;
color: white;
}

.nav-search input {
color: #ffffff;
border-color: #ffffff;
}

.nav-search i {
margin: 10px;
cursor: pointer;
color: white;
}

.nav-search i {
color: #ffffff;
}

/* Increase font size on hover for specific items */
.nav-home,
.nav-basket,
.nav-account,
.nav-settings {
font-size: 40px;
}

.navbar a:hover,
.nav-home:hover,
.nav-basket:hover,
.nav-account:hover,
.nav-settings:hover,
.nav-search i:hover {
color: #fa8128;
font-weight: bold;
}