@import url('https://fonts.cdnfonts.com/css/source-sans-pro');

:root {
    /* General key variables */
    --key-length: 10px;
    --key-shape-circle: 50%;
    --key-shape-square: 0%;

    /* Font colors */
    --black: #000000;
    --white: #FFFFFF;
    --gray: #dbdbdb;

    /* Theme colors */
    --bgcolor-dark: #010101;
    --bgcolor-accent: #0a0a0a;
    --bgcolor-light: #222222;
    --bgcolor-lightest: #666666;
    --bgcolor-transparant: rgba(0,0,0,0);

    /* RYB Color Wheel */
    --red: #FE2712;
    --red-orange: #FC600A;
    --orange: #FB9902;
    --yellow-orange: #FCCC1A;
    --yellow: #FEFE33;
    --yellow-green: #B2D732;
    --green: #66B032;
    --blue-green: #347C98;
    --blue: #0247FE;
    --blue-purple: #4424D6;
    --purple: #8601AF;
    --red-purple: #C21460;

    /* General circle variables */
    --thirds-circle-diameter: 94vw;
    --thirds-circle-radius: calc((var(--thirds-circle-diameter) - var(--thirds-circle-small-diameter)) / 2);
    --thirds-circle-small-diameter: 18vw;
    --thirds-circle-small-radius: calc((var(--thirds-circle-small-diameter) - var(--key-length)) / 2);  
    --major-circle-diameter: 54vw;
    --major-circle-radius: calc((var(--major-circle-diameter) - var(--key-length)) / 2);
    --minor-circle-diameter: 40vw;
    --minor-circle-radius: calc((var(--minor-circle-diameter) - var(--key-length)) / 2);
    --diminished-circle-diameter: 26vw;
    --diminished-circle-radius: calc((var(--diminished-circle-diameter) - var(--key-length)) / 2);

    /* General overlay circle variables */
    --thirds-circle-overlay-diameter: 88vw;
    --thirds-circle-overlay-radius: calc((var(--thirds-circle-overlay-diameter) - var(--thirds-circle-overlay-small-diameter)) / 2);
    --thirds-circle-overlay-small-diameter: 12vw;
    --thirds-circle-overlay-small-radius: calc((var(--thirds-circle-overlay-small-diameter) - var(--key-length)) / 2);  
    --major-circle-overlay-diameter: 48vw;
    --major-circle-overlay-radius: calc((var(--major-circle-overlay-diameter) - var(--key-length)) / 2);
    --minor-circle-overlay-diameter: 34vw;
    --minor-circle-overlay-radius: calc((var(--minor-circle-overlay-diameter) - var(--key-length)) / 2);
    --diminished-circle-overlay-diameter: 20vw;
    --diminished-circle-overlay-radius: calc((var(--diminished-circle-overlay-diameter) - var(--key-length)) / 2);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  font: inherit;
}

html {
    /* color-scheme: dark light;  */
    /* background-color: var(--bgcolor-dark); */
    background-color: var(--bgcolor-dark);
}

body {
  min-height: 100vh;
  font-family: 'Source Sans Pro', sans-serif;
}

html, body {
    overscroll-behavior: none;
}

/* responsive images/videos */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* General element properties */
/* html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    font-family: 'Source Sans Pro', sans-serif;
    background-color: var(--bgcolor-dark);
} */

h1, h1 a, h2, label, h2 a, div a {
    text-decoration: none;
    text-align: center;
    color: var(--gray);
}

h1, h1 a {
    font-size: 28px;
    /* margin-top: 125px; Cosmetic for the new navbar */
}

h2, label {
    font-size: 10px;
}

/* General individual key properties */
#c, #d, #e, #g-flat-f-sharp, #a-flat-g-sharp, #b-flat-a-sharp {
    border-radius: var(--key-shape-square);
}

#g, #a, #b, #d-flat-c-sharp, #e-flat-d-sharp, #f {
    border-radius: var(--key-shape-circle);
}

#a, #e, #b {
    color: var(--black); /* Override font color for better readability */
}

/* Individual key properties */
#c {
    background-color: var(--red);
}

#g {
    background-color: var(--red-orange);
}

#d {
    background-color: var(--orange); 
}

#a {
    background-color: var(--yellow-orange);
}

#e {
    background-color: var(--yellow);
}

#b {
    background-color: var(--yellow-green);
}

#g-flat-f-sharp {
    background-color: var(--green);
}

#d-flat-c-sharp {
    background-color: var(--blue-green);
}

#a-flat-g-sharp {
    background-color: var(--blue);
}

#e-flat-d-sharp {
    background-color: var(--blue-purple);
}

#b-flat-a-sharp {
    background-color: var(--purple);
}

#f {
    background-color: var(--red-purple);
}

/* General key properties */
.key {
    width: var(--key-length);
    height: var(--key-length);

    font-size: 4px;
    font-weight: bold;
    color: var(--white);
    border: 1px solid var(--black);

    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9000;
    
    box-sizing: initial;
}

/* Superscript for accidentals */
span {
    font-size: 95%;
    position: relative;
    top: -2px;
}

/* Navbar */
.navbar {
    overflow: hidden;
    background-color: var(--bgcolor-dark);
    display: flex;
    justify-content: center;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 2px 4px;
    text-decoration: none;
}

.subnav {
    float: left;
    overflow: hidden;
}

.subnav .subnavbtn {
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 2px 4px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .subnav:hover .subnavbtn {
    background-color: var(--bgcolor-light);
}

.subnav-content {
    display: none;
    position: absolute;
    left: 0;
    background-color: var(--bgcolor-light);
    width: 100%;
    z-index: 10000;
}

.subnav-content a {
    float: left;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.subnav-content a span {
    color: var(--red);
}

.subnav-content a:hover {
    background-color: var(--bgcolor-dark);
}

.subnav:hover .subnav-content {
    display: grid;
}

input[type="submit"], input[type="button"] {
    background: inherit;
    /* color: inherit; */
    border: inherit;
    padding: inherit;
    font: inherit;
    font-weight: bold;
    cursor: pointer;
    outline: inherit;
    /* width: 54px; */
}

input[type="button"], input[type="text"] {
    border: 1px solid var(--black);
    margin: 2px;
}

input[type="text"] {
    /* height: 30px; */
    font-size: 30px;
    text-align: center;
    /* max-width: 260px; */
    background-color: var(--bgcolor-dark);
    color: var(--white);
    width: 500px;
    box-sizing: border-box;
}

input[type="submit"] {
    color: var(--green);
    background-color: var(--bgcolor-accent);

    border: 1px solid var(--black);
    box-sizing: border-box;
    width: 500px;
}

input[type="button"]#cleartuning {
    width: 68px;
    border: 1px solid var(--black);
    background-color: var(--bgcolor-accent);
    color: var(--red);
    /* margin: 2px; */
    width: 500px;
    box-sizing: border-box;
    
}

form {
    display: flex;
    flex-direction: column;
}

form div {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bgcolor-light);
    height: 40px;
}

a.red {
    color: var(--red);
}

a.red-orange {
    color: var(--red-orange);
}

a.orange {
    color: var(--orange);
}

a.yellow-orange {
    color: var(--yellow-orange);
}

a.yellow {
    color: var(--yellow);
}

a.yellow-green {
    color: var(--yellow-green);
}

a.green {
    color: var(--green);
}

a.blue-green {
    color: var(--blue-green);
}

a.blue {
    color: var(--blue);
}

a.blue-purple {
    color: var(--blue-purple);
}

a.purple {
    color: var(--purple);
}

a.red-purple {
    color: var(--red-purple);
}

a.white {
    color: var(--white);
}

a.gray {
    color: var(--gray);
}