body {
    background-color: black;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    padding-top: 67px;
}


nav ul {
    align-content: center;
    display: flex;
    list-style-type: none;
    align-items: center;
 
}
.brand {
    display: flex;
    align-items: center;
    font-size: 50px;
    padding-right: 80px;
    font-weight:bolder;
}
.brand img {
    padding-right: 0.3cm;
}
nav ul li {
    padding: 0 30px;
    align-items: center;
    cursor: pointer;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: larger;
    font-weight: bold;
}
.input-container {
    position: relative;
    width: 100%; /* Adjust width as necessary */
}

.input-container i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888; /* Color of the icon */
    font-size: 18px; /* Adjust icon size */
}

#input-box {
    width: 100%;
    padding: 12px 20px 12px 45px; /* Adjust padding to make space for the icon */
    font-size: 20px;
    font-family: 'Arial', sans-serif;
    border-radius: 25px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#input-box::placeholder {
    font-size: 18px;
    font-family: 'Georgia', serif;
    color: #888;
}



.bottom {
    background-color: white;
    height: 3cm;
    position: sticky;
    bottom: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    color: black;
    flex-direction: column;
}
.container1 {

    min-height: 65vh;
    display: flex;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size:xx-large;
    background-color: black;
    background-image: url('Annie-Marie-2.jpg');
    position: sticky;

}
#myProgressBar {
    width: 22cm;
    cursor: pointer;
    margin-bottom: 0.5cm;
}
#myProgressBar2 {
    width: 4cm;
    cursor: pointer;
    position: absolute;
    align-items: center;
    right: 0;
    align-self: center;
    margin-bottom: 2cm;
    margin-top: 0.5cm;
    

}
.sound {
    margin-bottom: 0.5cm;
    right: 0;
    position: absolute;
    width: 100px; /* Adjust the width of the container */
    display:inline-block;
    justify-content: space-around;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;

}



.icons {
  cursor: pointer;
  display: flex;
  justify-content: center; /* Optional: Center the icons horizontally */
  gap: 28px; /* Adds 15px space between each icon */
  align-items: center;
}



.anne {
    color: white;
    font-size:large;
    cursor: pointer;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    justify-content: space-between;
    align-items: center;
    padding-left: 2cm;
    align-content: center;
    display: flex;
    padding-bottom: 0.3cm ;

}
.verified {
    font-size: medium;
    color:rgb(41, 218, 56);
}
.Songlist,h1 {
    padding-left: 1cm;
    margin-bottom: 0.5cm;
    font-size: 80px;
    margin-top: 0;
}
.container2 {
    min-height: 65vh;
    display: flex;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: xx-large;
    background-color: black;
    background-image: url('dualipa2.jpg');
    position: sticky;

}
.container1, .container2, p {
    font-size: medium;
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 1cm;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.songInfo {
    position: absolute;
    left: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding-left: 1cm;
    font-size: large;
}
.songInfo img {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}
.nav {
    position: sticky;
    background-color: white;
    color: black;
    height: fit-content;
    height: 2.2cm;
    top: 0;
    justify-content: center;
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 100%;
    z-index: 9999;
}


body {
    background-color: black;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    padding-top: 67px;
}


nav ul {
    align-content: center;
    display: flex;
    list-style-type: none;
    align-items: center;
 
}
.brand {
    display: flex;
    align-items: center;
    font-size: 50px;
    padding-right: 80px;
    font-weight:bolder;
}
.brand img {
    padding-right: 0.3cm;
}
nav ul li {
    padding: 0 30px;
    align-items: center;
    cursor: pointer;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: larger;
    font-weight: bold;
}
.input-container {
    position: relative;
    width: 100%; /* Adjust width as necessary */
}

.input-container i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888; /* Color of the icon */
    font-size: 18px; /* Adjust icon size */
}

#input-box {
    width: 100%;
    padding: 12px 20px 12px 45px; /* Adjust padding to make space for the icon */
    font-size: 20px;
    font-family: 'Arial', sans-serif;
    border-radius: 25px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#input-box::placeholder {
    font-size: 18px;
    font-family: 'Georgia', serif;
    color: #888;
}



.bottom {
    background-color: white;
    height: 3cm;
    position: sticky;
    bottom: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    color: black;
    flex-direction: column;
}
.container1 {

    min-height: 65vh;
    display: flex;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size:xx-large;
    background-color: black;
    background-image: url('Annie-Marie-2.jpg');
    position: sticky;

}
#myProgressBar {
    width: 22cm;
    cursor: pointer;
    margin-bottom: 0.5cm;
}
#myProgressBar2 {
    width: 4cm;
    cursor: pointer;
    position: absolute;
    align-items: center;
    right: 0;
    align-self: center;
    margin-bottom: 2cm;
    margin-top: 0.5cm;
    

}
.sound {
    margin-bottom: 0.5cm;
    right: 0;
    position: absolute;
    width: 100px; /* Adjust the width of the container */
    display:inline-block;
    justify-content: space-around;
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;

}



.icons {
  cursor: pointer;
  display: flex;
  justify-content: center; /* Optional: Center the icons horizontally */
  gap: 28px; /* Adds 15px space between each icon */
  align-items: center;
}



.anne {
    color: white;
    font-size:large;
    cursor: pointer;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    justify-content: space-between;
    align-items: center;
    padding-left: 2cm;
    align-content: center;
    display: flex;
    padding-bottom: 0.3cm ;

}
.verified {
    font-size: medium;
    color:rgb(41, 218, 56);
}
.Songlist,h1 {
    padding-left: 1cm;
    margin-bottom: 0.5cm;
    font-size: 80px;
    margin-top: 0;
}
.container2 {
    min-height: 65vh;
    display: flex;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: xx-large;
    background-color: black;
    background-image: url('dualipa2.jpg');
    position: sticky;

}
.container1, .container2, p {
    font-size: medium;
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 1cm;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.songInfo {
    position: absolute;
    left: 0;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding-left: 1cm;
    font-size: large;
}
.songInfo img {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}
.nav {
    position: sticky;
    background-color: white;
    color: black;
    height: fit-content;
    height: 2.2cm;
    top: 0;
    justify-content: center;
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 100%;
    z-index: 9999;
}