/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

:root {
    --finderRadius: 6px; /* Define a variable */
}

body {
}

.img1 {
    width: 1000px;
}

p {
    margin: 0; /* Removes default margin */
    padding: 0; /* Removes padding, if there is any */
    box-sizing: border-box;
    font-family: Helvetica;
}

.img2 {
    width: 1000px;
}

.img-music {
    width: 300px;
    background-color: white;
    border: 1px solid white;
}

.bg1 {
    background-color: #fffdd0;
}

.bg3 {
    background-image: url("src/aquarium.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}
div.music {
    width: 800px;
    margin: auto;
    border-style: groove;
    border: 4px;
    border-radius: 5px;
    background-color: black;
    color: white;
}

#music-header {
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
}

#music-header-icon {
    height: 15px;
}

.img-music-banner {
    background-color: white;
    width: 100%; /* Make image span full width */
    height: 200px; /* Set a fixed height for the banner */
    object-fit: cover; /* Ensure the image covers the container without stretching */
    object-position: top center; /* Align the top of the image with the top of the container */
}

.music-page {
    display: none;
}

.music-page:target {
    display: flex;
    flex-direction: column;
}

#music-list-padding {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
}

.music {
    width: 1000px;
    margin: auto;
    background-color: black;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    border: 4px solid red;
    border-radius: 5px;
}

.music-list-header {
    padding-right: 8px;
    padding-left: 8px;
    padding-top: 2px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-style: groove;
    border: 4px;
    border-radius: 2px;
    color: black;
    background-color: white;
}
.flex-music-list {
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.flex-music-list-content {
    cursor: pointer;
    padding-top: 2px;
    padding-right: 5px;
    padding-left: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.flex-music-descriptor {
    height: 400px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.flex-music-padding {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit color from parent, so the link color stays the same */
}

a:hover {
    text-decoration: none; /* Ensure it doesn't underline when hovered */
    color: inherit; /* Ensure color doesn't change */
}

.flex-music-descriptor-content {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
#music-descriptor-image-padding {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
}
div.photo {
    width: 300px;
    margin: auto;
    background-color: green;
}
.bg2 {
    background-image: url("src/ipod1.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.flex-container1 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}
.finder-window {
    padding: 20px 20px 20px 20px;
    border: 1px solid #b4b4b4;
    background-color: #fefffe;
    width: 500px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    border-bottom-right-radius: var(--finderRadius);
}

.finder-header {
    padding: 5px;
    display: flex;
    flex-direction: column;
    height: 50px;
    border-radius: 1px;
    /* background-color: #c8c8c8; */
    background-image: linear-gradient(
        to bottom,
        #cfcfcf,
        #c5c5c5,
        #bbbbbb,
        #b1b1b1,
        #a7a7a7
    );
    align-content: center;
    border-top-left-radius: var(--finderRadius);
    border-top-right-radius: var(--finderRadius);
}

.finder-header-section {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
}

.finder-content {
    border-top: 1px solid #515151;
    border-bottom: 1px solid #515151;

    border-bottom-left-radius: var(--finderRadius);
    border-bottom-right-radius: var(--finderRadius);
    display: flex;
    flex-direction: row;
}

.app {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    width: 130px;
}

.app-icon {
    width: 60px;
    height: 60px;
}

.test {
    border: 4px solid black;
    border-radius: 10px;
}

.app-text {
    font-size: 20px;
    color: black;
    text-align: center; /* Center-align the text horizontally */
    margin-top: -1px;
}

.index {
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: var(--finderRadius);
    width: 700px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
}
.finder-sidebar {
    padding: 8px;
    border: 1px solid #b4b4b4;
    width: 300px;
    height: 380px;
    background-color: #dde3ea;
    border-bottom-left-radius: var(--finderRadius);
}

.sidebar-list {
    list-style-type: none; /* Removes the bullet points */
    padding: 0; /* Removes the default padding around the list */
    margin: 0;
}

.sidebar-list-item {
    padding-bottom: 3px;
}

div.pro-tools {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    background-color: #cbcbcb;

    margin: 20px 20px 20px 20px;
}

div.pro-tools-header {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 10px;
    padding-bottom: 10px;

    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    background-image: linear-gradient(
        to bottom,
        #cfcfcf,
        #c5c5c5,
        #bbbbbb,
        #b1b1b1,
        #a7a7a7
    );
}

div.song-time {
    padding-right: 10px;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.test {
    border: 1px solid white;
}

div.padding-line {
    border-right: 1px solid greenyellow; /* Creates a 1px solid border at the top */
    margin-top: 5px;
    margin-bottom: 5px;
}

div.song-info {
    padding-right: 10px;
    padding-left: 10px;
    /* border-left: 1px solid greenyellow;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}

div.pro-tools-container {
    display: flex;
    flex-direction: row;
    background-color: #081201;
    color: green;
    border-radius: 5px;
    padding: 5px;
}

div.pro-tools-content {
    background-color: #b7b7b7;
}

div.centre {
    display: flex;
    justify-content: center;
    align-items: center;
}

div.track-sidebar {
    background-color: #656565;
    width: 100px;
    display: flex;
    align-items: center;
    height: 100px;
    flex-direction: column;
    justify-content: space-evenly;

    /*padding: 8px;*/
}

div.stretch-wide {
    flex-grow: 1;
}

div.track-icon {
    background-color: #aeaeae;
    padding: 4px;
}

div.color-sidebar {
    background-color: red;
    width: 15px;
}

div.app-header {
    padding: 5px;
    display: flex;
    flex-direction: row;
    height: 20px;
    border-radius: 1px;
    /* background-color: #c8c8c8; */
    background-image: linear-gradient(
        to bottom,
        #cfcfcf,
        #c5c5c5,
        #bbbbbb,
        #b1b1b1,
        #a7a7a7
    );
    border-top-left-radius: var(--finderRadius);
    border-top-right-radius: var(--finderRadius);
    align-content: center;
    justify-content: space-between;
}
div.track-container {
    display: flex;
    flex-direction: row;
}
div.track-waveform{
    width: 1000px;
}