@font-face {
    font-family: 'Doremi';
    src: url('fonts/doremi.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans Condensed Medium';
    src: url('fonts/FiraSansCondensed-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans Condensed Thin';
    src: url('fonts/FiraSansCondensed-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

* {
	padding: 0;
	margin: 0;
}

:root {
    --do-colour: #FF0000;
    --re-colour: #FF7A00;
    --mi-colour: #F6C020;
    --fa-colour: #00BF63;
    --sol-colour: #38B6FF;
    --la-colour: #8C52FF;
    --ti-colour: #FF66C4;
}

body {
	background-color: #3B3B3B;
    overflow: hidden;
}

#overlay {
    background-color: #fff;
    width: 100vw;
    height: 100vh;
    display: flex;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
}

main {
    position: relative;
}

#key {
    height: 20vh;
    position: absolute;
    bottom: 10vh;
    right: 10vh;
}

#current-pitch {
    position: absolute;
    top: 6vh;
    left: 10vh;
    color: #fff;
}

#relative-pitch {
    font-size: 15vh;
    font-family: "Fira Sans Condensed";
    font-weight: 500;
    display: block;
}

#absolute-pitch {
    font-size: 5vh;
    font-family: "Fira Sans Condensed", Doremi;
    font-weight: 500;
    margin-left: 1vh;
    margin-right: 2vh;
}

#octave {
    font-size: 4vh;
    font-family: "Fira Sans Condensed";
    font-weight: 100;
}

#scale {
    height: 100vh;
    padding-right: 2vw;
    padding-left: 2vw;
    padding-bottom: 2vh;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    box-sizing: border-box;
}

.note {
	font-family: Doremi;
	font-size: 23vh;
    color: #555555;
}

.note.active {
    animation: noteGlow 2s ease-out forwards;
}

#accidental {
    font-family: Doremi;
    font-size: 23vh;
    color: transparent;
    width: 7vh;
    text-align: right;
}

#accidental.active {
    animation: accidentalGlow 1s ease-out forwards;
}

@keyframes noteGlow {
    0% {
        text-shadow: 0 0 2vh var(--glow-colour),
                     0 0 5vh var(--glow-colour);
    }
    100% {
        text-shadow: none;
    }
}

@keyframes accidentalGlow {
    0% {
        color: var(--do-colour);
        text-shadow: 0 0 2vh var(--do-colour),
                     0 0 5vh var(--do-colour);
    }
    100% {
        text-shadow: none;
        color: transparent;
    }
}

#dolo {

}

#dolo.active {
    color: var(--do-colour);
    --glow-colour: var(--do-colour);
}

#re {
    height: 35vh;
}

#re.active {
    color: var(--re-colour);
    --glow-colour: var(--re-colour);
}

#mi {
    height: 46vh;
}

#mi.active {
    color: var(--mi-colour);
    --glow-colour: var(--mi-colour);
}

#fa {
    height: 57vh;
}

#fa.active {
    color: var(--fa-colour);
    --glow-colour: var(--fa-colour);
}

#sol {
    height: 68vh;
}

#sol.active {
    color: var(--sol-colour);
    --glow-colour: var(--sol-colour);
}

#la {
    height: 79vh;
}

#la.active {
    color: var(--la-colour);
    --glow-colour: var(--la-colour);
}

#ti {
    height: 90vh;
}

#ti.active {
    color: var(--ti-colour);
    --glow-colour: var(--ti-colour);
}

#dohi {
    align-self: flex-start;
}

#dohi.active {
    color: var(--do-colour);
    --glow-colour: var(--do-colour);
}