:root {
  --black: black;
  --white: white;
}

body {
  color: #333;
  background-color: #000;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

a {
  text-decoration: underline;
}

.container-1200 {
  opacity: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 700px;
  height: 1100px;
  max-height: 100%;
  margin-top: 6px;
  margin-left: auto;
  margin-right: auto;
  transition: opacity .2s;
  display: block;
  position: static;
  transform: rotate(0)rotate(0)rotate(0);
}

.harmonisphereback {
  z-index: 1;
  text-align: left;
  align-self: center;
  width: 90%;
  max-width: 700px;
  height: auto;
  max-height: none;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0;
  display: block;
  position: absolute;
  inset: 0%;
}

.grid {
  z-index: 10;
  flex: 0 auto;
  order: -1;
  align-self: center;
  width: 90%;
  max-width: 628px;
  height: auto;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  display: block;
  position: absolute;
  inset: 0%;
}

.key-buttoncont {
  flex: 1;
  order: 1;
  align-self: flex-end;
  width: 100%;
  max-width: 1200px;
  height: 100px;
  margin-top: 648px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  display: inline-block;
  position: static;
}

.harmback {
  text-align: left;
  align-self: flex-start;
  width: 900px;
  max-height: 100%;
  margin-top: -19px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  display: block;
  position: static;
  inset: 0%;
  transform: rotate(-150deg)rotate(0)translate(0)rotate(0);
}

.image {
  margin-left: auto;
  margin-right: auto;
  padding-top: 42px;
  display: block;
  position: absolute;
  inset: 0%;
}

.body {
  transform-style: preserve-3d;
  margin-left: auto;
  margin-right: auto;
  transform: rotate(0)translate3d(0, 0, -5px);
}

.key-cont {
  flex-flow: row;
  justify-content: space-around;
  align-self: flex-end;
  align-items: center;
  width: 50%;
  height: 100px;
  margin: 0 auto 231px;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.button {
  width: 60px;
}

.keybutt {
  color: #000;
  text-align: center;
  border: 2px solid #000;
  width: 50px;
}

.keybutt.gb {
  background-color: #909;
}

.keybutt.gb:hover, .keybutt.gb:focus {
  border-width: 4px;
  border-color: #fff;
}

.keybutt.g {
  background-color: #c06;
}

.keybutt.g:hover, .keybutt.g:focus {
  border-width: 4px;
  border-color: #fff;
}

.keybutt.ab {
  background-color: red;
}

.keybutt.ab:hover, .keybutt.ab:focus {
  border-width: 4px;
  border-color: #fff;
}

.keybutt.a {
  background-color: #fa3f06;
}

.keybutt.a:hover, .keybutt.a:focus {
  border-width: 4px;
  border-color: #fff;
}

.keybutt.bb {
  background-color: #f60;
}

.keybutt.bb:hover, .keybutt.bb:focus {
  border-width: 4px;
  border-color: #fff;
}

.keybutt.b {
  background-color: #f93;
}

.keybutt.b:hover, .keybutt.b:focus {
  border-width: 4px;
  border-color: #fff;
}

.keybutt.c {
  opacity: 1;
  color: #000;
  background-color: #ff0;
}

.keybutt.c:hover, .keybutt.c:focus {
  border-width: 4px;
  border-color: #fff;
}

.keybutt.db {
  color: #000;
  background-color: #9c0;
}

.keybutt.db:hover, .keybutt.db:focus {
  border-width: 4px;
  border-color: #fff;
}

.keybutt.d {
  background-color: #3c0;
}

.keybutt.d:hover, .keybutt.d:focus {
  border-width: 4px;
  border-color: #fff;
}

.keybutt.eb {
  background-color: #099;
}

.keybutt.eb:hover, .keybutt.eb:focus {
  border-width: 4px;
  border-color: #fff;
}

.keybutt.e {
  background-color: #03f;
}

.keybutt.e:hover, .keybutt.e:focus {
  border-width: 4px;
  border-color: #fff;
}

.keybutt.f {
  background-color: #60f;
}

.keybutt.f:hover, .keybutt.f:focus {
  border-width: 4px;
  border-color: #fff;
}

.navbar {
  background-color: var(--black);
}

.container-1201 {
  justify-content: center;
  align-items: center;
  display: flex;
}

.nav-link {
  color: #ffffffc2;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
}

.nav-link:hover {
  color: #fff;
  background-color: #252424;
}

.nav-link.home.w--current, .nav-link.math.w--current, .nav-link.colour.w--current, .nav-link.time.w--current, .nav-link.music.w--current {
  color: #fff;
}

.image-2 {
  margin-right: 127px;
  padding-right: 0;
}

.heading {
  color: #fff;
  text-align: center;
  letter-spacing: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 24px;
}

.text-block {
  color: #fff;
  text-align: left;
  max-width: 900px;
  margin-top: 8px;
  margin-left: auto;
  margin-right: auto;
  padding: 39px 104px 21px;
  font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 18px;
  display: flex;
}

.image-3 {
  margin-top: -108px;
  display: block;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 260px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.image-4 {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.div-block {
  margin-left: auto;
  margin-right: auto;
}

.heading-2 {
  text-align: center;
}

.text-span {
  font-size: 18px;
}

.key-nav {
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 32px;
  display: flex;
}

.image-5 {
  text-align: center;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

.div-block-2 {
  margin-left: auto;
  margin-right: auto;
}

.div-block-3 {
  display: flex;
}

.section {
  background-color: var(--white);
  flex-direction: column;
  margin-top: 11px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.div-block-4 {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1000px;
  margin-top: -2px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 112px;
  display: flex;
}

.text-block-2 {
  text-align: left;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 22px;
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  display: block;
}

.text-span-2 {
  text-align: left;
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: 24px;
  font-weight: 700;
}

.div-block-5 {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.text-block-3 {
  text-align: center;
  width: 100%;
  padding: 29px;
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: 20px;
}

.text-block-3.page {
  text-align: center;
  margin-bottom: 65px;
}

.image-6 {
  text-align: right;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.div-block-6 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.div-block-7 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.div-block-8 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.div-block-9 {
  width: 10%;
}

.div-block-10 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: grid;
}

.div-block-10._5th {
  display: flex;
}

.text-block-4 {
  padding-top: 57px;
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: 20px;
  line-height: 24px;
}

.div-block-11 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  text-align: center;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.div-block-11._6grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-content: center;
  justify-items: center;
  display: grid;
}

.image-7 {
  text-align: center;
  width: 70%;
  min-width: 0%;
}

.image-7.circ {
  width: 90%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.image-7.circ.notes {
  width: 100%;
}

.text-block-5 {
  text-align: center;
  margin-top: 31px;
  padding: 14px;
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: 24px;
  font-weight: 700;
}

.text-span-3 {
  text-align: center;
}

.div-block-13 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template: ". ."
                 ". ."
                 ". ."
                 "Area Area"
                 / .75fr .75fr;
  grid-auto-columns: 1fr;
  place-content: end center;
  justify-items: center;
  width: 100%;
  padding: 32px;
  display: grid;
}

.text-block-6 {
  text-align: center;
  margin-top: 45px;
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
}

.image-8 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.div-block-14 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.div-block-15 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.text-block-7 {
  text-align: center;
}

.bold-text {
  font-family: Georgia, Times, Times New Roman, serif;
  font-size: 24px;
}

.div-block-16 {
  text-align: center;
  padding: 36px;
}

.image-9 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.image-10 {
  width: 90%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 991px) {
  .container-1200 {
    width: 100%;
    height: 100%;
  }

  .key-cont {
    margin-bottom: 48px;
  }

  .nav-link {
    color: var(--black);
  }

  .text-block {
    width: 90%;
    margin-top: 19px;
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
  }

  .image-5 {
    width: 80%;
  }

  .div-block-4 {
    width: 90%;
  }

  .text-block-3 {
    margin-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .grid {
    margin-top: -31px;
  }

  .harmback {
    margin-top: -72px;
  }

  .key-cont {
    flex-wrap: wrap;
    place-content: stretch center;
    width: 60%;
  }

  .text-block {
    padding: 0 8px 0 28px;
  }

  .image-4 {
    margin-top: -25px;
    padding-top: 0;
  }

  .image-5 {
    width: 90%;
  }
}

@media screen and (max-width: 479px) {
  .container-1200 {
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
  }

  .harmonisphereback {
    max-height: 600px;
    overflow: auto;
  }

  .grid {
    width: 87%;
    max-width: 510px;
    margin-top: 16px;
  }

  .harmback {
    margin-top: -144px;
    padding-top: 0;
    inset: 0%;
  }

  .key-cont {
    margin-bottom: 71px;
  }

  .nav-link {
    color: var(--black);
  }

  .heading {
    margin-top: 0;
    padding-top: 0;
  }

  .text-block {
    margin-top: -18px;
    padding-top: 12px;
    padding-left: 15px;
    padding-right: 3px;
    font-size: 12px;
    line-height: 18px;
  }

  .image-3 {
    margin-top: -208px;
  }

  .image-4 {
    margin-top: -29px;
  }

  .image-5 {
    width: 95%;
  }

  .div-block-4 {
    width: 100%;
  }

  .text-block-2 {
    flex-direction: row;
    justify-content: center;
    width: 95%;
    padding: 8px;
    font-size: 14px;
    display: block;
  }

  .text-span-2 {
    font-size: 18px;
  }

  .div-block-5 {
    width: 100%;
  }

  .text-block-3 {
    width: 95%;
    margin-top: 86px;
    font-size: 14px;
  }

  .text-block-3.page {
    padding: 0;
  }

  .image-6 {
    width: 100%;
  }

  .div-block-6 {
    grid-template-columns: 1fr;
  }

  .div-block-7 {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .div-block-8, .div-block-10 {
    grid-template-columns: 1fr;
  }

  .text-block-4 {
    width: 95%;
    padding: 16px;
    font-size: 16px;
    line-height: 18px;
  }

  .div-block-11._6grid {
    grid-template-columns: 1fr;
    padding: 21px;
  }

  .image-7 {
    width: 100%;
  }

  .image-7.circ {
    width: 95%;
  }

  .div-block-12 {
    padding: 0;
  }

  .div-block-13 {
    grid-template-columns: .75fr;
  }

  .div-block-13.mobile {
    grid-column-gap: 11px;
    grid-template-rows: auto auto auto auto;
    grid-template-columns: .75fr;
  }

  .bold-text {
    font-size: 14px;
  }

  .div-block-16 {
    padding: 6px;
  }
}

#w-node-e6be76f6-a597-e32f-4f44-e79141d97734-5f32f521, #w-node-ea48eb7c-b7b6-249a-670f-565bafa8401e-5f32f521, #w-node-bfe4daca-d7c0-76b3-ec0f-811a366517a1-5f32f521, #w-node-_3a8c04b1-aa97-8e1c-d444-8114a1fda897-5f32f521, #w-node-f9b83304-7b7c-9c98-b6e3-288f8139f2cf-5f32f521, #w-node-d897ffe2-bdce-e61b-f9ec-3225a001dca6-5f32f521, #w-node-_05195a0b-3a46-3378-6432-6dcb26dfdfdf-5f32f521, #w-node-c8839ecd-1797-af14-ce1a-e519f420f0a7-5f32f521, #w-node-_45af2a68-62af-5386-40f0-0cb645791251-5f32f521, #w-node-ff3f876d-21a1-8ef2-4aa0-7422f5eb60d0-5f32f521, #w-node-_745e6ed1-fd3c-97ee-0f9c-24b8a201f80b-5f32f521, #w-node-_058a6d1b-7782-72c0-b740-5a1d5e74ebcc-5f32f521, #w-node-f19d9043-623b-97ba-f7ea-a46890616775-5f32f521, #w-node-_65eed140-efe6-f60f-1d7b-80ef16668e3c-5f32f521, #w-node-_955d191f-f560-cb88-53df-9ffeaf46c556-5f32f521 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_10cef111-e45a-bbb4-6eda-823f13cf1dc2-5f32f521 {
  place-self: stretch center;
}

#w-node-ea00a91a-4b4d-fe97-50e4-a20703edc094-5f32f521, #w-node-_65826c2b-e5e5-3470-a210-fe8770dcd141-5f32f521, #w-node-fb2a4cc1-6d85-09f1-079e-f64fad629a3d-5f32f521, #w-node-_226e1978-d1f2-f01c-41d7-97071d82a1d1-5f32f521, #w-node-_043c0ba8-4dc9-b00e-f91c-541987f16159-5f32f521, #w-node-def6c26f-7065-7887-82a8-096fa1a66f4d-5f32f521, #w-node-a82785f6-2ba4-6f0d-538d-038802ac7563-5f32f521, #w-node-c03f7b8f-1a5a-3710-ed15-ed73a3bfe5dd-5f32f521, #w-node-_47524b9b-9ca3-afc9-e0dd-04ad39b00854-5f32f521, #w-node-b2d80917-df31-355f-0133-aff36d0da8a3-5f32f521, #w-node-_54777add-2929-6525-1024-10506e6252d8-5f32f521, #w-node-_8059df8e-d604-133c-5463-12f84f0edb39-5f32f521, #w-node-a369b745-26f9-2bc2-19ef-b388e1f2f80d-5f32f521 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_28c69bd4-d5ba-aecd-d1fb-1569865a5b9c-5f32f521 {
  grid-area: span 1 / span 2 / span 1 / span 2;
  justify-self: center;
}