/*
Title       : Music Stylesheet
Creation    : 13/11/21
Last Edit   : 16/02/2022

Description :
	Main CSS file for the Music Webpage
    Contains rules for relevant elements in the Music Webpage
*/

/* tab swaps between transcriptions and music */
.tab {
    /* size */
    height: 100%;
    width: auto;
    min-width: 30%;

    /* color */
    background-color: var(--background_2);
    padding: 1%;

    /* flex-box */
    display: flex;
    align-items: center;
    justify-content: center;
}

#tab_container {
    /* size */
    height: 50px;
    width: 100%;

    /* flex-box */
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    justify-content: space-around;
}

.tab:hover {
    /* color */
    background-color: var(--highlight_0);
}

/* containers for the music section and transcription section */
#music_container {
    /* size */
    height: 80%;
    width: 100%;

    /* appearance */
    visibility: visible;
}

#transcription_container {
    /* size */
    height: 0%;
    width: 0%;

    /* appearance */
    visibility: hidden;
}

/* other */
.panel {
    margin: 5%;
}

.audio {
    margin: 2%;
    margin-left: 5%;
}