@import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Double:wght@100..900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
   
}

#main {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
     background: linear-gradient(violet, purple , darkviolet );
}

.nav {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 20px;
    height: 65px;
    background-color: rgb(2, 2, 24);
    color: white;
    font-size: 4vmin;
    font-family: "Bitcount Grid Double", system-ui;
    display: flex;
    align-items: center;
    padding-left: 10px;
    flex-wrap: wrap;
}

#orientation-warning {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  font-size: 1.2em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 9999;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.piano{
    width: auto;
    border-top: 0.5vw solid;
}

.keys {
    height: 40vh;
    width: 5vw;
}

.sharp-notes {
    background-color: black;
    position: absolute;
    width: 4vw;
    height: 25vh;
    transform: translate(-50%);
}

.keys.active {
  background-color: #d9b8fe; /* soft gold */
  box-shadow: 
    0 0 10px cyan,
    0 0 20px cyan,
    0 0 40px cyan;
transition: all 0.1s ease;
  
}