* {
    margin: 0;
}

:root{
    --c: 0fr;
    --csharp: 0fr;
    --g: 0fr;
    --gsharp: 0fr;
    --a: 0fr;
    --asharp: 0fr;
    --b: 0fr;
    --d: 0fr;
    --dsharp: 0fr;
    --e: 0fr;
    --f: 0fr;
    --fsharp: 0fr;
}

#nav{
    width: 100vw;
    height: 8vh;
    background-color: gray;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.navbar-item {
    font-size: 5em;
    color: white;
    font-family: 'Dongle', sans-serif;
}

#freePlay {
    color: powderblue;
}

a{
    text-decoration: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color: white;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

.container {
    display: grid;
    grid-template-columns: var(--c) var(--csharp) var(--d) var(--dsharp) var(--e) var(--f) var(--fsharp) var(--g) var(--gsharp) var(--a) var(--asharp) var(--b);
    width: 100%;
    height: 92vh;
    line-height: 91vh;
    background-color: powderblue;
}

.container-img {
    width: 100vw;
    height: 92vh;
    background-color: #b6d0e2;
}

#referenceSheet {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

#referenceSheetImg {
    width: 50%;
    height: auto;
}

.note {
    place-self: stretch stretch;
    text-align: center;
    font-size: 15em;
    color: white;
    font-family: 'Dongle', sans-serif;
}

#cNote {
    background-color: rgb(255,0,0);
}

#csharpNote {
    background-color: rgb(255,79,0);
}

#dNote {
    background-color: rgb(255,119,0);
}

#dsharpNote {
    background-color: rgb(255,158,0);
}

#eNote {
    background-color: rgb(255,237,0);
}

#fNote {
    background-color: rgb(128,209,0);
}

#fsharpNote {
    background-color: rgb(0,209,128);
}

#gNote {
    background-color: rgb(0,237,255);
}

#gsharpNote {
    background-color: rgb(0,154,213);
}

#aNote {
    background-color: rgb(0,71,171);
}

#asharpNote {
    background-color: rgb(85,47,114);
}

#bNote {
    background-color: rgb(128,36,86);
}