@import url('https://fonts.googleapis.com/css?family=Open+Sans');

html {
    font-family: 'Open Sans', sans-serif;
    color: #132B36;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    /* border: 5px solid #7DD0F5; */
    margin: 0;
    overflow: scroll;
}

body > p {
    flex: 0 1 auto;
    font-size: 2vw;
    color: #7DD0F5;
    margin: 15px;
}

body > p > a {
    display: inline-block;
    transform-origin: top left;
    transition: transform ease-in-out 0.3s;
}

body > p > a:hover {
    transform: scale(1.15);
}

a, a:link, a:visited {
    text-decoration: none;
    color: inherit;
}

main {
    flex: 1 1 auto;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    width: calc(100% - 4vw);
    padding: 0 2vw 2vw 2vw;
}

.midi-div {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 1vw;
}

.midi-header {
    flex-basis: 10vw;
    display: flex;
    justify-content: center;
    margin: 0 0 1.5vh 0;
}

.midi-p {
    display: inline-block;
    font-size: 4.5vw;
    margin: auto 0;
}

.midi-img {
    width: 5vw;
    margin: auto 1vw;
    transition: transform ease-in-out 0.3s;
}

.midi-img:hover {
    transform: scale(1.15);
    cursor: pointer;
}

.piano-div {
    flex-shrink: 1;
    position: relative;
    height: 100%;
    outline: 1px solid black;
}

.c-piano-div .black-key-div:nth-child(7n + 3),
.c-piano-div .black-key-div:nth-child(7n),
.d-piano-div .black-key-div:nth-child(7n + 2),
.d-piano-div .black-key-div:nth-child(7n + 6),
.e-piano-div .black-key-div:nth-child(7n + 1),
.e-piano-div .black-key-div:nth-child(7n + 5),
.f-piano-div .black-key-div:nth-child(7n),
.f-piano-div .black-key-div:nth-child(7n + 4),
.g-piano-div .black-key-div:nth-child(7n + 6),
.g-piano-div .black-key-div:nth-child(7n + 3),
.a-piano-div .black-key-div:nth-child(7n + 5),
.a-piano-div .black-key-div:nth-child(7n + 2),
.b-piano-div .black-key-div:nth-child(7n + 4),
.b-piano-div .black-key-div:nth-child(7n + 1) {
  visibility: hidden;
}

.white-keys-div {
    display: flex;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}

.white-key-div {
    flex-grow: 1;
    box-shadow: 1px 0 0 0 black;
}

.black-keys-div {
    display: flex;
    align-items: flex-start;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
}

.black-key-div {
    flex-grow: 1;
    background-color: black;
    height: 60%;
    outline: 1px solid black;
    transform: translateX(50%) scaleX(0.75);
}

.black-key-div:last-child {
    visibility: hidden;
}

.tonic-key-div {
  background-color: yellow;
}

.on-key-div {
  background-color: #0FACF3;
}

#play-div {
    margin: auto auto 15px auto;
    font-size: 2.75vw;
}

#switch-label {
    position: relative;
    display: inline-block;
    vertical-align: middle;

    width: 7.5vw;
    height: 5vh;

    margin-left: 0.5vw;
}

#play-label {
    margin-right: 10px;
}

#play-input {
    visibility: hidden;
}

#slider-div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5vh;
    background-color: #132B36;
    cursor: pointer;
    transition: .4s;
}

#slider-div:before {
    position: absolute;
    content: '';
    height: 3vh;
    width: 3vh;
    left: 1vh;
    bottom: 1vh;
    border-radius: 50%;
    background-color: white;
    transition: .4s;
}

#play-input:checked + #slider-div {
    background-color: #0FACF3;
}

#play-input:focus + #slider-div {
    box-shadow: 0 0 1px #0FACF3;
}

#play-input:checked + #slider-div:before {
    transform: translateX(calc(7.5vw - 5vh));
}