body {
    font-family: "Quattrocento", sans-serif;
    background-color: #111111;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #FFFFFF;
}

html, body {
    overflow: hidden;
}

.alert-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100vh;
    flex-direction: column;
}

.alert {
    background: #8B0000;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 5px 5px rgb(0, 0, 0, 0.2);
    width: 300px;
    text-align: center;
    color: #FFFFFF;
}



a:link {
    color: #FFFFFF
}

a:visited {
    color: #1C5D99
}

a:hover {
    color: #18548B
}

.form-container {
    
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    
    
}



.form-box {
    
    
    background: #222222;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 5px 5px rgb(0, 0, 0, 0.2);
    width: 300px;
    text-align: center;
    color: #FFFFFF;
    
}

.sign_in_btn {
    width: 200px;
    transition: width 0.5s;
    transform-origin: center;
    border-radius: 20px;
    border: none;
    padding: 10px;
    
    background-image: linear-gradient(to right, #CDFFD8, #94B9FF);
    transition: width 0.5s, background-image 1s ease-in-out;
}

.sign_in_btn:hover {
    width: 250px;
    
}

input[type="text"] {
    width: 200px;
    transition: width 0.5s;
    transform-origin: center;
    border-radius: 20px;
    border: none;
    padding: 10px;
}

input[type="text"]:focus {
    outline: none;
    width: 250px;
}

input[type="password"] {
    width: 200px;
    transition: width 0.5s;
    transform-origin: center;
    border-radius: 20px;
    border: none;
    padding: 10px;
}

input[type="password"]:focus {
    outline: none;
    width: 250px;
}

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



.log_in_btn {
    margin: 20px;
    width: 100px;
    height: 50px;
    border-radius: 12px;
    background-color: #F2D492;
    transition: width 0.5s, height 0.5s, border-radius 0.5s, background-color 0.5s;
}

.log_in_btn:hover {
    width: 335px;
    height: 50px;
    border-radius: 30px;
    background-color: #F29559;
}



.dash-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.dash-box {
    background: #222222;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 5px 5px rgb(0, 0, 0, 0.2);
    width: 300px;
    text-align: center;
    color: #FFFFFF;
}


.lesson-btn {
    margin: auto;
    height: 50px;
    width: 300px;
    border: none;
    border-radius: 10px;
    background-color: #FFFFFF;
    padding: 10px;
}

.lesson-btn:hover{
    background-color: #EEEEEE;
}

.practice-btn {
    margin: auto;
    height: 50px;
    width: 300px;
    border: none;
    border-radius: 10px;
    background-color: #5BC0BE;
    padding: 10px;
}

.account-btn {
    margin: auto;
    height: 50px;
    width: 300px;
    border: none;
    border-radius: 10px;    
    background-color: #3A506B;
    padding: 10px;
}

.piano-container {
    /*position: relative;*/
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    /*height: 50%;
    width: 50%;*/
}

.piano {
    position: relative;
    display: flex;
    height: 500px;
    width: 700px;
    cursor: url('target-scope.svg') 12 12, auto;
    /*Cursor graphic by SVGBackgrounds.com*/
}

/*.white-key-container {
    
    position: absolute;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: 100%;
    width: 100%;
}*/

.white-key {
    flex: 1;
    background-color: #FEFEFA;
    color: #000000;
    border: 2px solid #E7E7E7;
    /*margin: 2px;*/
    /*width: 100px;*/
    height: 100%;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    transition: background-color 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.white-key:hover {
    background-color: #E7E7E7;
}

.white-key-example {
    flex: 1;
    background-color: #f9dad0;
    color: #000000;
    border: 2px solid #f9dad0;
    /*margin: 2px;*/
    /*width: 100px;*/
    height: 100%;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    transition: background-color 0.2s;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/*.black-key-container1 {
    
    position: relative;
    pointer-events: none;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    height: 100%;
    
}*/

/*.black-key-container2 {
    
    position: relative;
    pointer-events: none;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    height: 100%;
    

}*/

.black-key {
    position: absolute;
    /*pointer-events: auto;*/
    background-color: #222222;
    color: #FFFFFF;
    width: 60px;
    height: 300px;
    /*margin: 12px;*/
    border-radius: 10px;
    /*text-align: center;*/
    transition: background-color 0.2s;
    z-index: 2;
}

.black-key:hover {
    background-color: #333333;
}

.black-key-example {
    position: absolute;
    /*pointer-events: auto;*/
    background-color: #f9dad0;
    color: #FFFFFF;
    width: 60px;
    height: 300px;
    /*margin: 12px;*/
    border-radius: 10px;
    /*text-align: center;*/
    transition: background-color 0.2s;
    z-index: 2;
}

.key-c-sharp { left: 70px; }
.key-d-sharp { left: 170px; }
.key-f-sharp { left: 370px; }
.key-g-sharp { left: 470px; }
.key-a-sharp { left: 570px; }



/*.spacer {
    width: 26%;
}*/

.lesson_container{
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: 100%;
    align-items: flex-end;
}

.lesson {
    /*flex-grow: 1;*/
    width: 4.16666666667%;
    height: 100%;
    border-radius: 10px;
    background-color: #f9dad0;
    border: 2px solid #F6C6B7;
    color: #222222;
}

.lesson:hover {
    background-color: #F6C6B7;
}

.page_container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
}

.lesson-btn-cont {
    height: 50vh;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.popup .popuptext {
  visibility: hidden;
  width: 500px;
  height: 450px;
  background-color: #FEFEFA;
  color: #222222;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: fixed;
  z-index: 1000;
  top: 5%;
  left: 2.5%;
  /*top: 20%;
  left: 50%;
  margin-left: -80px;*/
}

.starter-div {
  width: 500px;
  height: 450px;
  background-color: #FEFEFA;
  color: #222222;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: fixed;
  top: 5%;
  left: 2.5%;
  /*top: 20%;
  left: 50%;
  margin-left: -80px;*/
}

.popup .show {
  visibility: visible;
}

.pointers-div {
    width: 500px;
    height: 450px;
    background-color: #FEFEFA;
    color: #222222;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: fixed;
    z-index: 1000;
    top: 5%;
    left: 71.5%;
}