/*
style of the poem
*/
.poem_at_the_top{
    display:flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    text-align: justify;
    text-justify: inter-word;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-style: italic;
    margin:1rem;
    color:#000000;
    background-color: none;
}
/*
the css of the overall piano area
*/
.pianobox
{
    position: relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    background-color:#8fbc8f;
    padding-left:2.5rem;
    padding-right:2.5rem;
    padding-top:2.5rem;
    border-top-right-radius: 4rem;
    border-top-left-radius: 4rem;
    margin-bottom:0rem;
}

/*
the css of the name above the piano keys
*/
.piano_name
{
    font-size:2.5rem;
    color:#e06a09;
    background-color:none;
    font-family: "Lucida Calligraphy", serif, sans-serif;
    font-weight: bold;
    z-index:999;
    
}

/*
the css of all the piano keys
*/
.piano_keys
{
    display:flex;
    flex-direction: row;
    justify-content: center;
    margin-top:6.3rem;
    opacity: 1;
    font-size:0rem;
    visibility: visible;
    transition: opacity 2000ms ease;
}


/*
the style of keys to disappear
*/
.piano_keys.active
{
    opacity: 0;
    transition: opacity 2000ms ease;
}


/*
the white keys
*/
.test_white_key
{   width:4rem;
    height:25rem;
    background-color: #d3d3d3;
    border-style:solid;
    border-color: #000000;
    border-width: 0.25rem;
    border-radius:0.5rem ;
    color:#000000;
    display:flex;
    text-align: center;
    flex-direction:column;
    align-items: center;
    justify-content: flex-end;
    font-weight: bold;
    position:relative;
    padding-bottom:1.25rem;
}

/*
the black keys
*/
.test_black_key
{
    display:flex;
    text-align: center;
    flex-direction:column;
    align-items: center;
    justify-content: flex-end;
    font-weight: bold;
    background-color: #000000;
    color:#ffffff;
    z-index:900;
    width:3rem;
    height:19rem;
    position:absolute;
    top:-0.25rem;
    left:2.75rem;
    border-radius:0.5rem ;
    border-width: 0.25rem;
    padding-bottom:1.25rem;
}

/*
the css of the awoken image disappeared
*/
.awoken
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 500ms ease, visibility 0s ease 500ms;
    z-index:990;
}

/*
the css of the awoken image appeared
*/
.awoken.active{
    opacity: 1;
    visibility: visible;
    transition: opacity 2000ms ease, visibility 0s ease 0s;
}
/*
awoken image 
*/
.awoken_image
{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-top-right-radius: 4rem;
    border-top-left-radius: 4rem;
}