/* styles.css */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header, footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
}

header a, footer a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
}

header a:hover, footer a:hover {
    text-decoration: underline;
}

.title {

    font-size: 12px;
    text-align: center;
}
.header-title{

    font-size: 24px;
}
/* Hero Section */
.hero {
    position: relative;
    text-align: center;
    color: white;
}

.hero .responsive-image {
    width: 100%;
    height: auto;
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
}



.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

h1 {
    margin: 20px 0;
}

ul.song-list {
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
}

li.song-item {
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

li.song-item:hover {
    background-color: #f0f0f0;
}

#details {
    margin: 20px 0;
}

#songTitle {
    font-size: 15px;
    color: #333;
text-align: center;
 
  text-transform: uppercase;
  background-color: grey;
  color: #663399;
  text-decoration: underline;
  font-weight: bold;

}

#songSinger {
    font-size: 18px;
    color: #666;
    text-align: center;
  color:#663399 ;
  
  text-transform: uppercase;
  
  background-color: grey;
  font-style: italic;
  font-weight: bold;

}

#songLyrics {
    font-size: 16px;
    color: #444;
}

/* Albumlist */
/* Albumlist */
/* Albumlist */
/* Albumlist */

.title {

    font-size: 12px;
}


.albumlist {
    display: grid;
    grid-template-columns: repeat(2, 1fr)
    
    

}

.albumlist li {
    
    padding: 10px;
    border-bottom: 1px solid #ddd;
    font-size:15px;
    padding: 10px;
    display: block; /* Ensures the text appears on a new line */
   color: black; /* Subtext color */
    margin-top: -10px;/* Negative margin to pull the element up */

}

.albumlist li a:hover {
    background-color: #f0f0f0;
}


/* Scalelist */
/* Scalelist */
/* Scalelist */

.scale-list {

     display: grid;
    grid-template-columns: repeat(2, 1fr)
    
    

}

.scale-list li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    display: block; /* Ensures the text appears on a new line */
   color: black; 
    font-weight:bold;
  font-size: 12px; /* Slightly smaller font size */
  margin-top: -10px;/* Negative margin to pull the element up */

}

.scale-list li a:hover {
    background-color: #f0f0f0;
}

.nav-link {

/*border: 2px solid black;*/
padding: 10px;
margin-bottom: 10px;/*add space between list items*/

}
.subtext {
  display: block; /* Ensures the text appears on a new line */
  color: #663399; /* Subtext color */
  font-size: 8px; /* Slightly smaller font size */
  margin-top: 5px;/*add some space between the main text and the sub text*/
  font-style: italic;
  margin-top: -5px;/* Negative margin to pull the element up */
    margin-left:10px;
}


/* styles.css */
.song-title {
    color: #3498db; /* Sets the text color to a shade of blue */
    font-size: 15px; /* Sets the font size to 28px */
    font-family: 'Arial', sans-serif; /* Sets the font family to Arial */
    text-align: center; /* Centers the title */
    margin-top: 20px; /* Adds a margin at the top */
    text-transform: uppercase;

}

.song-singer {
    color: black; /* Sets the text color to a shade of red */
    font-size: 12px; /* Sets the font size to 20px */
    font-weight: bold; /* Makes the text bold */
    font-family: 'Verdana', sans-serif; /* Sets the font family to Verdana */
    text-align: center; /* Aligns the text to the right */
    margin-right: 30px; /* Adds a margin on the right side */
    text-transform: uppercase; /* Transforms the text to uppercase */
}

.song-lyrics {
        font-size: 16px; /* Set the font size */
        /*margin: 20px 0; /* Set margin above and below */
        padding-bottom: 100px; /* Add padding below the text */
        padding-top: 0px;
        margin-top: 0;
        width:80%;
        text-align: left;
        margin: 0 auto;
        font-family:'Georgia',serif;
}




    

/* styles.css */
.separator {
    border: none; /* Remove the default border */
    border-top: 2px solid #ccc; /* Create a solid line with a light gray color */
    margin: 20px 0; /* Add space above and below the line */
    width: 90%; /* Set the width of the line */
    margin-left: auto; /* Center the line horizontally */
    margin-right: auto; /* Center the line horizontally */
}

/* About us */
/* About us */
/* About us */

.about-page {

text-align: center;
text-transform: uppercase;
font-size: 18px;
}
        
.About-us {

        font-size: 16px; /* Set the font size */
        /*margin: 20px 0; /* Set margin above and below */
        padding-bottom: 100px; /* Add padding below the text */
        padding-top: 0px;
        margin-top: 0;
        width:80%;
        text-align: left;
        margin: 0 auto;
        font-family:'Georgia',serif;

}

.youtube-link {
            width: 30%; /* or any fixed width */
            color: darkred;
            /*margin-left: 20vw;*/
            margin: 0 auto; /* center the header */
            text-align: center; /* center the text within the header */ 
}


/* Specific styles for the Telegram link */

.telegram-link {
    margin-top: 20px;
    padding: 10px;
    background-color: #0088cc;
    border-radius: 3px;
    text-align: center;
}

.telegram-link h10 {
    color: black;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.telegram-link a {
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    background-color: #005f8c;
    padding: 10px 20px;
    border-radius: 5px;
    display: inline-block;
}

.telegram-link a:hover {
    background-color: #004a6b;
}


@media (max-width: 768px) {
    .container {
        width: 95%;
    }
    header, footer {
        padding: 15px;
    }
.telegram-link {
        padding: 8px;
    }

    .telegram-link h10 {
        font-size: 15px;
    }

    .telegram-link a {
        font-size: 1em;
    }
    
}