body{
     background-color:#9f6089;
     font-family:arial;
     margin:0px;
 } 
 
 a{
    text-decoration: none;
    color:#FFFFFF;
}
 
 .wrapper{
     width:100%;
     height:100%;
     float:left;
 }
 

        
 
  .navigation{
      margin-top:5px;
     width:100%;
     height:70px;
    background-color:#9f6089;
    
 }
 
 .navTop{
     
     background-color: #9f6089;
     width:900px;
     height:40px;
     float:left;
     
     padding:3px;
     
     
 }
 
 .nav{
     margin-left: 8px;
     margin-top: 5px;
     background-color: #9f6089;
     width:100px;
     height:60%;
     font-weight:bold;
     float:left;
     font-size: 16px;
     border-radius:20px;
     color:#FFFFFF;
     padding:5px;
     border: 1px solid #9f6089;
     text-align:center;
    transition: color 1s ease-in-out;
    transition: background-color 1s ease-in-out;
    
 }
 
 .nav:hover{
     background-color:#E9D2E1 ;
     color:#9f6089;
     border: 1px solid #E9D2E1;
     
     
 }
 
 .navSelect{
     
     margin-left: 8px;
     margin-top: 5px;
     width:100px;
     height:60%;
     float:left;
     font-weight:bold;
     font-size: 16px;
     border-radius:20px;
     padding:5px;
     border: 1px solid #9f6089;
     text-align:center;
    background-color:#E9D2E1 ;
     color:#9f6089;
     border: 1px solid #E9D2E1;
 }
 
 .logo{
     width:250px;
     float:left;
     height:140px;
     border-radius:50%;
    position:relative;
     margin-left:10px;
     margin-top:-55px;
 background-image: linear-gradient(
  165deg,
  hsl(93deg 88% 20%) 0%,
  hsl(92deg 91% 28%) 20%,
  hsl(91deg 94% 35%) 40%,
  hsl(100deg 64% 49%) 60%,
  hsl(113deg 71% 62%) 80%,
  hsl(127deg 93% 72%) 100%
);

border-bottom:3px solid #1A430A;
 }
 
 .logoText{
     float:left;
     font-weight: bold;
     font-family: impact, sans-serif;
     font-size:2em;
     color:#D0F5C2;
     z-index: 10;
     
 }
 
 .bridge{
     width:70px;
     height:20px;
     background-color: #000000;
     position:absolute;
     top:48px;
     left:91px;
     margin-top: -4px;
     border-radius: 5px;
     
 }
 
 .end{
     border-radius:50%;
     background-color: #FFFFFF;
     width:4px;
     height:4px;
     float:left;
     margin-top:8px;
     margin-left: 5.5px;
     border:solid 1px grey;
 }
        
 .mainGubbings{
     width:100%;
     height:420px;
     
 }
 
  .mainGubLeft{
     width:58%;
     height:100%;
     float:left;
     
 }
 .mainGubRight{
     
      width:40%;
     height:100%; 
     background-image: linear-gradient(
  0deg,
  hsl(181deg 91% 18%) 0%,
  hsl(181deg 92% 26%) 27%,
  hsl(181deg 94% 34%) 53%,
  hsl(181deg 96% 42%) 77%,
  hsl(181deg 100% 50%) 100%
);
     float:left;
     border-radius:100% 0% 100% 0% / 78% 100% 0% 22% ;
     border-top:5px solid #FFFFFF;
     border-left:5px solid #FFFFFF;
     float:right;
     
     
 }
 
 .rightLeft{
     display:flex;
    float:right;
    width:55%;
    flex-direction: column;
 }
 
 .leftLeft{
     
    float:left;
    width:40%;
    position:relative;
    padding-left: 10px;

     
 }
  .fretboard{
        display:flex;
        flex-direction: column;

        background:#482524;
        width:100%;
        height:210px;
    }
    
    .string{
        width:100%;
        height:100%;
        display:flex;
        position:relative;
    }
    
    .string:before{
        content:'';
        width:100%;
        /*height:10px;*/
        background: linear-gradient(#eee,#999);
        box-shadow: 76px 3px 10px #806233;
        z-index:1;
        position:absolute;
        top:22px;
    }
    
    .string1:before{
        height:9px;
    }
    
    .string2:before{
        height:8px;
    }
    
    .string3:before{
        height:7px;
    }
    
    .string4:before{
        height:6px;
    }
    
    .string5:before{
        height:5px;
    }
    
    .string6:before{
        height:4px;
    }
    
    .note{
        display:flex;
        flex:1;
        border-right:10px solid;
        border-image:linear-gradient(to left, #777,#bbb,#777) 1 100%;
        justify-content:center;
        align-items: center;
        position:relative;
    }
    
    .note:first-child{
        background:#161717;
        min-width: 76px;
        border-right: 15px solid;
        flex-grow:0;
        flex-shrink: 0;
        border-image: linear-gradient(to left,#bbb, #fff,#bbb)1 100%;
    }
    
    .noteButton{
        width:33px;
        height:33px;
        border-radius: 50%;
        z-index:2;
        cursor:pointer;
        opacity:0;
        font-weight:bold;
    }
    
    .flat{
        display:none;
        
    }
    
    .sharp{
        display:inline;
        
    }
    
    .controls{
        width:800px;
        height:200px;
        
    }
    .chooseNote{
        height:140px;
        width:200px;

    }
    
    .chooseScale{
       height:100px;
        width:100%; 
        float:left;
        margin-left:10px;
        
    }
    .root{
        width:50px;
    float:left;
    background-color:#609f76;
    border-radius:10px;
    border:2px solid #89449D;
    padding:3px;
    color:#89449D;
    box-shadow:2px 2px 3px;
    cursor:pointer;
    float:left;
    }
    
    .root:hover{
    box-shadow:0px 0px 0px;
}

.scale{
    width:90px;
    float:left;
    background-color:#609f76;
    border-radius:10px;
    border:2px solid #89449D;
    padding:3px;
    color:#89449D;
    box-shadow:2px 2px 3px;
    cursor:pointer;
    float:left;
}

.pos{
    width:50px;
    float:left;
    background-color:#609f76;
    border-radius:10px;
    border:2px solid #89449D;
    padding:3px;
    color:#89449D;
    box-shadow:2px 2px 3px;
    cursor:pointer;
    float:left;
}
.display{
margin-left: 20px;
display:flex;
flex-direction: column;

}

.rootNote{

    
}
.scaleInfo{
    float:left;
    font-size:26px;
     font-weight:bold;
     color:#FFFFFF;
}

.mode{
    float:left;
    font-weight:bold;
     color:#FFFFFF;
}

.intervals{
    float:left;
    color:#FFFFFF;
    
}

    .num{
        display:flex;
        flex:1;
        font-weight:bold;
        color:#FFFFFF;
        justify-content:center;
        align-items: center;
        position:relative;
        background-color:#9f6089;
    }
    
.hid{
    display:none;
}

.displayNote{
    font-size:26px;
     font-weight:bold;
     color:#FFFFFF;
}

.scaleStyle{
    padding:5px;
    margin:5px;
    border: 2px outset #FFFFFF;
    border-radius:10px;
}

.buttonBold{
    font-weight:bold;
    color:#482524;
}
 
.ad2{
    
width:100%;
height:70px;
}

.mainTextWrapper{
    width:100%;
    display:flex;
    height:2000px;
}

.mainText{
     margin-left:20px;
    width:70%;
    float:left;
    height:auto;
    overflow: visible;
    background-color:#E9D2E1;
    padding:10px;
    border-radius:5% ;
}

.addRight{
    width:30%;
    float:left;
    padding-top:20px;
}