@font-face {
    font-family: "Roboto";
    src: url(../Roboto-Mono-regular.woff2);
}
@font-face {
    font-family: "Arapey";
    src: url(../Arapey-Regular.woff2);
}
:root{
    --color-1:#f0904c;
    --color-2:#fbce41;
    --color-3:#4d61c5;
    --color-4:#cc8969;
    --color-5:#f7f4ec;
    --color-6:#1f1f20;
    --color-7:white;
    --color-8:#dad4c3;
}
body{
    margin: 0;
    overflow-x: hidden;
}
header {
    position:fixed;
    background-color: var(--color-1);
    height: 10%;
    width: 100vw;/*16px*/
    z-index: 3;
}
header button{
    height: 100%;
    width: 12.5%;
    background-color: transparent;
    border:none;
    margin:0;
    font-size: 1.05vw;
    font-family: "Roboto";
    font-weight: bolder;
}
header button:hover{
    background-color: rgba(0, 0, 0, 0.1);
}
#listaClases{
    position: fixed;
    top:10%;
    left:12.5%;
    width: 12.5%;
    z-index: 111110;
    background-color: var(--color-4);
}
#listaClases button{
    width: 100%;
    background-color: var(--color-4);
    border: none;
    font-family: "Roboto";
    font-weight: bolder;
    font-size: 1vw;
}
#listaClases button:hover{
    background-color: rgba(0, 0, 0, 0.1);
}
.flotantes{
    position: fixed;
    width:4vw;
    top:20%;
    z-index: 3;
}
.flotantes img{width: 100%;}
#redes{
    left: 1%;
    text-align: left;
}
#cuentas{
    right: 2%;
    text-align: right;
}
#logo{width: 50%;}
#onda{
    position: absolute;
    top:10%;
    width: 100vw;
    height: 95vh;
    overflow: hidden;
}
#lasLineas{
    width: 100%;
    height: 100%;
    transform: scaleX(1.5);
}
.linea{
    stroke-width:0.007;
    stroke-miterlimit:1;
    fill:none
}
#linea_1{stroke:rgb(0, 5, 255);}
#linea_2{stroke:rgba(0, 5, 255, 0.8);}
#linea_3{stroke:rgb(0, 5, 255, 0.6);}
#linea_4{stroke:rgb(0, 5, 255, 0.4);}
#linea_5{stroke:rgb(0, 5, 255, 0.2);}
.textos{
    width: 50%;
    height: 50%;
    text-align: center;
    position:absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}
#contactanos .textos{
    pointer-events: auto;
}
h1{font-family: 'Roboto';}
.entero h1{font-size: 5vw;}
.mitad h1 {font-size: 3vw;}
#contactanos h1{font-size: 30px;}
#contactanos .copiar{
    position: absolute;
    right: 0;
    font-size: 1.5vw;
}
h2{
    font-family: "Roboto";
    font-size: 2vw;
    color: var(--color-3)
}
h3 a{
    font-family: "Roboto";
    font-size: 1.5vw;
    color:var(--color-6);
    pointer-events: auto;
    
}
p{
    font-family: 'Arapey';
    font-size: 2vw;
}
section {
    height: 100vh;
    overflow: hidden;
}
.entero{
    width: 100%;/*16px*/
    display: flex;
    position: relative;
}
.mitad{
    width: 50%;
    position: relative;
}
#inicio{
    background-color: var(--color-2);
}
#piano{
    background-color: var(--color-7);
}
#guitarra{
    background-color: var(--color-8);
}
#equipo{
    background-color: var(--color-3);
}
#precios{
    background-color: var(--color-5);
}
#cuerdas{
    background-color: var(--color-1); z-index: 1;
}
#percucion{
    background-color: var(--color-3);
}
#teoria{
    background-color: var(--color-4);
}
#composicion{
    background-color: var(--color-5);
}
#contactanos{
    background-color: var(--color-7);
}
#divPiano{
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--color-7) 0%, var(--color-7) 10%, var(--color-7) 10%, rgba(255, 255, 255, 0.589) 100%);
    pointer-events: none;
}
#laGuitarra{
    pointer-events: none;
    user-select: none;
}
.fil2 {fill:#AFA99A}
.fil1 {fill:#B7B09F}
.fil0 {fill:#CAC3B0}
rect {
    user-select: none;
}
.blanca{
    width: 4.5%;
    height: 100%;
    border: solid rgba(128, 128, 128, 0.699) 1px;
}
.negra{
    width: 2.3%;
    height: 70%;
    background-color: black;
    position: absolute;
}
#laGuitarra{
    width: 100%
}
#divGuitarra{
    width: 120vw;
    position: absolute;
    top: 10vw;
    user-select: none;
}
.cuerdas{
    user-select: none;
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: #DBD6C8;
    top: calc(50% - 1px);
}
.paraCuerdas {
    user-select: none;
    position:absolute;
    height: 0.7vw;
    width: 82vw;
    left: 18vw;
    border: solid transparent;
}
#cuerda6{top: 24.5vw;}
#cuerda5{top: 25.75vw;}
#cuerda4{top: 27vw;}
#cuerda3{top: 28.25vw;}
#cuerda2{top: 29.5vw;}
#cuerda1{top: 30.75vw;}
#violin{
    position : absolute;
    left : 5vw;
    top: 21vw;
    width : 90vw;
    pointer-events: none;
    user-select: none;
}
.timpani{
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6)
}
#timpani1 {
    width: 32vw;
    height: 32vw;
    top:-1vw;
    left:-1vw;
}
#timpani2 {
    width: 28vw;
    height: 28vw;
    top:23vw;
    left:24vw;
}
#timpani3 {
    width: 26vw;
    height: 26vw;
    top:17vw;
    left:55vw;
}
#timpani4 {
    width: 23vw;
    height: 23vw;
    top:0;
    left:75vw;
}
#percucion .textos p{
    color: white;
}
input{
    width: 80%;
    height: 2vw;
    font-size: 3.5vh;
    font-family: "Arapey";
}
.textos button{
    font-size: 2vw;
    font-family: "Arapey";
    border:black 1px solid;
    background-color:white;
}
.textos button:hover{
    background-color: rgba(237, 239, 240);;
}

@media screen and (max-width: 480px) {/*768px*/

    header {
      display: none;
    }
    .flotantes{
        width:10vw;
    }
    #onda{
        top:30vh;
    }
    #cuentas{
        left: 1%;
        text-align: left;
        top: 60vh;
    }
    .textos{
        right: 2vw;
        width: 84%;
        height: 95%;
        top: 50%;
        left: 54%;
    }
    .entero h1{font-size: 7vw;}
    .mitad h1 {font-size: 5vw;}
    #contactanos h1{font-size: 5.5vw;}
    #contactanos .copiar{
        position: relative;
        right: auto;
        font-size: 5vw;
    }
    h2{
        font-size: 4vw;
    }
    h3 a{
        font-size: 4vw;        
    }
    p{
        font-size: calc(3vw + 8px);
    }
    .entero {display: block;}
    .mitad{
        width: 100%;
        height: 50%;
    }
    #piano{display: flex;}
    #divPiano{
        top:0;
        width: 100vw;
        height: 100vh;
    }
    #divGuitarra{
        transform: rotate(-45deg);
        top: 50%;
        right: -6%;
    }
    #laGuitarra{
        position: absolute;
        top: 10vw;
    }
    #cuerda6{top: 34.5vw;}
    #cuerda5{top: 35.75vw;}
    #cuerda4{top: 37vw;}
    #cuerda3{top: 38.25vw;}
    #cuerda2{top: 39.5vw;}
    #cuerda1{top: 40.75vw;}
    #violin{
        left : -5vw;
        top: 81vw;
        width : 120vw;
        transform: rotate(-45deg);
    }
    #losTimbales{
        position: relative;
        top:60%;
        left:-5%;
        transform: rotate(200deg) scaleX(-1);
    }
    #contactanos .textos p{
        font-size: calc(4vw + 8px)
    }
    #contactanos .textos button{
        display: none;
    }  
}