/* CSS Reset + Font */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

img {
    max-width: 100%;
}

/* Colore Sfondo */
body {
    background: linear-gradient(#000074 , #4646f5);
    background-attachment: fixed;
}

.container {
    width: 90%;
    margin: 0 auto;
    /* padding: 16px; */
}


/* INIZIO Logo */
header a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.2em;
    color: #33baf3;
    font-style: oblique;
    font-weight: bolder;
    text-decoration: none;
    width: 150px;
}

header img {
    margin-bottom: 15px;
    width: 56px;
    /* Height è implicita in realtà */
    height: auto;
}
/* FINE Logo */

.piano-container {
    display: flex;
    justify-content: center;
}

.piano-panel {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 75px;
    background: #F71469;
    background-image: url('../images/panel-reflex.png');
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 15px 15px 0 0;
}

.piano-panel img {
    height: 100%;
    padding: 0 10px 10px 0;
}

.piano-keys {
    height: 190px;
    display: flex;
}

.key {
    border-bottom: 6px solid #8c8c8c;
    border-radius: 0 0 8px 8px;
}

.key-white {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    height: 100%;
    width: 64px;
    background-color: #FFF;
    border-right: 2px solid black;
    border-left: 2px solid black;
}

.key-black {
    height: 60%;
    width: 44px;
    background: linear-gradient(#737373 10%, #0d0d0d);
    /* per sovrapporre utilizzo valori negativi di margin */
    margin: 0 -22px;
    /* devo metterlo in primo piano nella "stack" html */
    z-index: 2;
    border-right: 6px solid black;
    border-left: 6px solid black;
}

/* Specifico uno stato per la pressione */
.key-white:active {
    background-color: #dddddd;
}

.key-black:active {
    background: #000000;
}