.elementor-2031 .elementor-element.elementor-element-918a593{--display:flex;--min-height:1000px;}.elementor-2031 .elementor-element.elementor-element-9b4752b{width:100%;max-width:100%;}.elementor-2031 .elementor-element.elementor-element-9b4752b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-2031 .elementor-element.elementor-element-9b4752b.elementor-element{--align-self:center;--order:-99999 /* order start hack */;--flex-grow:1;--flex-shrink:0;}/* Start custom CSS */body{
    background-color:rgb(255,255,255);
    font-family:"Josefin Sans";
    user-select:none;
    overflow-x:hidden;
    overflow-y:auto;
}
.head{
    border-bottom:1px solid rgb(50,50,50);
    background-color:rgb(70,70,70);
    color:rgb(255,255,255);
    justify-content:center;
    align-items:center;
    position:absolute;
    display:flex;
    height:4rem;
    width:100%;
    left:0px;
    top:0px;
    z-index:2;
}
.head-text{
    font-size:2rem;
    margin:1rem;
    height:100%;
    width:10rem;
    
    justify-content:center;
    align-items:center;
    display:flex;
}
.head-button{
    border:1px solid rgb(40,40,40);
    transform:translateY(0px);
    right:calc(0.5rem - 1px);
    top:calc(0.5rem - 1px);
    border-radius:100%;
    font-size:2rem;
    height:3rem;
    width:3rem;
    
    justify-content:center;
    align-items:center;
    position:absolute;
    cursor:pointer;
    display:flex;

    background-image:url("https://methodtothemelody.com/wp-content/uploads/2025/11/gear.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:65%;
}
.head-button:hover{
    transform:translateY(-1px);
}
.head-button:active{
    transform:translateY(1px);
}
.head-button-mask{
    background-color:rgba(0,0,0,0.2);
    border:1px solid rgb(40,40,40);
    right:calc(0.5rem - 1px);
    top:calc(0.5rem - 1px);
    border-radius:100%;
    position:absolute;
    display:none;
    height:3rem;
    width:3rem;
}
.head-rect-button{
    border:1px solid rgb(40,40,40);
    top:calc(0.5rem - 1px);
    border-radius:0.5rem;
    font-size:1.2rem;
    height:3rem;
    width:9rem;
    position:absolute;
    overflow:hidden;
}
.head-rect-button-swicth{
    transform:translateY(0px);
    font-size:1.2rem;
    height:100%;
    width:100%;
    left:0px;
    top:0px;

    justify-content:center;
    align-items:center;
    position:absolute;
    cursor:pointer;
    display:flex;
}
.head-rect-button-swicth:hover{
    transform:translateY(-1px);
}
.head-rect-button-swicth:active{
    transform:translateY(1px);
}
.head-rect-button-mask{
    background-color:rgba(0,0,0,0.2);
    position:absolute;
    display:none;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
#rhythm-game{
    right:4rem;
}
#note-game{
    right:14rem;
}
#note-mask{
    display:block;
}

.body{
    height:calc(100% - 4rem - 1px);
    transform:translate(-50%);
    top:calc(4rem + 1px);
    max-width:100%;
    width:40rem;
    left:50%;
    z-index:1;
    position:absolute;
    overflow-x:hidden;
}
.note-image{
    background-image:url("https://methodtothemelody.com/wp-content/uploads/2025/11/Starting-Screen.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:80%;
    position:relative;

    margin-top:-20%;
    aspect-ratio:1;
    width:100%;
    margin-left:1rem;
    max-width:calc(100% - 2rem);
}
.bass-clef{
    background-image:url("https://methodtothemelody.com/wp-content/uploads/2025/11/Bass-Clef-overlay.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:80%;
    position:absolute;
    display:none;

    height:100%;
    width:33.4%;
    left:0.5rem;
    top:0px;
}
.button-holder{
    margin-top:-17.5%;
    width:100%;
}
.button-row{
    justify-content:center;
    align-items:center;
    display:flex;
    width:100%;
}
.button{ 
    background-image:url("https://methodtothemelody.com/wp-content/uploads/2025/11/button.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    position:relative;
    overflow:hidden;
    cursor:pointer;

    justify-content:center;
    align-items:center;
    display:flex;

    font-size:1.5rem;
    border-radius:12%;
    transform:translateY(0px);
    margin:0.25rem;
    aspect-ratio:1;
    width:4.5rem;
}
.button:hover{
    transform:translateY(-1px);
}
.button:active{
    transform:translateY(1px);
}
.button-mask-wrong{
    background-color:rgba(255,0,0,0.5);
    position:absolute;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
    border-radius:12%;

    -webkit-animation:fadeIn ease-in-out 0.2s;
    -moz-animation:fadeIn ease-in-out 0.2s;
    animation:fadeIn ease-in-out 0.2s;
}
.button-mask-right{
    background-color:rgba(0,255,0,0.5);
    position:absolute;
    height:100%;
    width:100%;
    left:0px;
    top:0px;

    -webkit-animation:fadeIn ease-in-out 0.2s;
    -moz-animation:fadeIn ease-in-out 0.2s;
    animation:fadeIn ease-in-out 0.2s;
}
.text{
    width:calc(100% - 2rem);
    transform:translate(-50%);
    font-size:1.75rem;
    margin-left:50%;
    margin-top:1rem;

    justify-content:center;
    align-items:center;
    text-align:center;
    display:flex;
}
button{
    background-image:radial-gradient(rgb(255,255,255),rgb(150,150,150));
    border:1px solid rgb(150,150,150);
    transform:translate(-50%,0px);
    border-radius:0.5rem;
    font-size:1.5rem;
    max-width:100%;
    width:30rem;
    height:3rem;
    margin-left:50%;
    margin-top:1rem;
    max-width:calc(100% - 2rem);

    cursor:pointer;
    border:none;
}
button:hover{
    transform:translate(-50%,-1px);
}
button:active{
    transform:translate(-50%,1px);
}
.alert{
    box-shadow:0px 0px min(1vh,1vw) rgba(0,0,0,0.5);
    background-color:rgb(255,255,255);
    transform:translate(-50%);
    border-radius:0.5rem;
    font-size:1.5rem;
    padding:1rem;
    left:50%;
    top:5%;

    text-align:center;
    position:absolute;
    display:none;
    z-index:3;
}

.side-window{
    box-shadow:0px 0px 1rem rgba(0,0,0,0.5);
    background-color:rgb(255,255,255);
    height:calc(100% - 4rem - 1px);
    top:calc(4rem + 1px);
    position:absolute;
    width:20rem;
    right:100%;
    z-index:2;
}
.side-window-title{
    justify-content:center;
    align-items:center;
    display:flex;

    border-bottom:1px solid rgb(200,200,200);
    border-top:1px solid rgb(200,200,200);
    font-size:2rem;
    height:4rem;
    width:100%;
}
.side-window-row{
    justify-content:flex-start;
    align-items:center;
    display:flex;

    height:3rem;
    width:100%;
}
.side-window-row-text{
    justify-content:flex-start;
    white-space:nowrap;
    align-items:center;
    display:flex;

    font-size:1.25rem;
    margin-left:5%;
    height:100%;
    width:45%;
}
.side-window-row-value{
    justify-content:flex-end;
    align-items:center;
    display:flex;

    width:calc(50% - 0.5rem);
    height:100%;
}
.side-button{
    border:1px solid rgb(200,200,200);
    transform:translateY(0px);
    border-radius:0.5rem;
    font-size:1.25rem;
    height:2.5rem;
    width:5rem;
    
    justify-content:center;
    align-items:center;
    cursor:pointer;
    display:flex;
}
.side-button:hover{
    transform:translateY(-1px);
}
.side-button:active{
    transform:translateY(1px);
}
#range-title{
    margin-top:3rem;
}

.range-note{
    width:calc(50% - 6rem);
    padding-right:0.5rem;
    font-size:1.75rem;
    height:100%;

    justify-content:flex-end;
    align-items:center;
    display:flex;
}
.range-button-holder{
    justify-content:center;
    align-items:center;
    display:flex;

    height:3rem;
    width:3rem;
}
.range-button{
    border:1px solid rgb(200,200,200);
    transform:translateY(0px);
    border-radius:0.5rem;
    font-size:1.75rem;
    height:2.5rem;
    width:2.5rem;

    justify-content:center;
    align-items:center;
    font-weight:bold;
    cursor:pointer;
    display:flex;
}
.range-button:hover{
    transform:translateY(-1px);
}
.range-button:active{
    transform:translateY(1px);
}

.rhythm-game-holder{
    background-color:rgb(255,255,255);
    height:calc(100% - 4rem - 1px);
    transform:translate(-50%);
    top:calc(4rem + 1px);
    max-width:100%;
    width:40rem;
    left:50%;
    z-index:1;

    position:absolute;
    display:none;
}
.rhythm-guess{
    margin-bottom:5%;
    margin-left:1rem;
    margin-top:5%;
    height:25%;
    width:100%;
    max-width:calc(100% - 2rem);

    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
}
.rhythm-answer-holder{
    min-height:21rem;
    height:40%;
    width:100%;
}
.rhythm-answer-row{
    justify-content:center;
    align-items:center;
    display:flex;
    height:50%;
    width:100%;
}
.rhythm-answer{
    background-image:url("https://methodtothemelody.com/wp-content/uploads/2025/11/rhythm-button.png");
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;

    transform:translateY(0px);
    position:relative;
    margin-right:5%;
    margin-left:5%;
    height:80%;
    width:40%;
    overflow:hidden;
    border-radius:0.5rem;
}
.rhythm-answer:hover{
    transform:translateY(-1px);
}
.rhythm-answer:active{
    transform:translateY(1px);
}
.rhythm-answer-body{
    position:absolute;
    cursor:pointer;
    height:100%;
    width:100%;
    left:0px;
    top:0px;

    background-position:center center;
    background-repeat:no-repeat;
    background-size:80%;
}
.rhythm-answer-mask{
    border-radius:0.5rem;
    position:absolute;
    display:none;
    height:100%;
    width:100%;
    left:0px;
    top:0px;
}
.rhythm-text{
    transform:translate(-50%);
    font-size:1.5rem;
    margin-left:50%;
    margin-top:1rem;
    width:100%;

    justify-content:center;
    align-items:center;
    text-align:center;
    display:flex;
}
.rhythm-setting-screen{
    height:calc(100% - 4rem);
    background-color:rgb(255,255,255);
    position:absolute;
    display:none;
    width:100%;
    left:0px;
    top:calc(4rem + 2px);
}

@keyframes fadeIn{
    from {opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes fadeIn{
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes fadeIn{
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes fadeOut{
    from {opacity:1;}
    to {opacity:0;}
}
@-moz-keyframes fadeOut{
    from {opacity:1;}
    to {opacity:0;}
}
@-webkit-keyframes fadeOut{
    from {opacity:1;}
    to {opacity:0;}
}

@keyframes slideIn{
    from {right:-100%;}
    to {right:0%;}
}
@-moz-keyframes slideIn{
    from {right:-100%;}
    to {right:0%;}
}
@-webkit-keyframes slideIn{
    from {right:-100%;}
    to {right:0%;}
}

@keyframes slideOut{
    from {right:0%;}
    to {right:-100%;}
}
@-moz-keyframes slideOut{
    from {right:0%;}
    to {right:-100%;}
}
@-webkit-keyframes slideOut{
    from {right:0%;}
    to {right:-100%;}
}

@media screen and (max-width:1000px){
    .head{
        justify-content:flex-start;
    }
}
@media screen and (max-width:768px) and (orientation:portrait){
    :root{
        font-size:12px;
    }
    .head-text{
        margin-left:0rem;
        width:5rem;
    }
    .rhythm-answer-holder{
        min-height:10rem;
        max-height:20rem;
    }
    .button-holder{
        width:calc(100% - 2rem);
        margin-left:1rem;
    }
}
@media only screen and (max-width: 480px) and (orientation:portrait){
    .head-rect-button{
        text-align:center;
        width:5rem;
    }
    .head-rect-button-swicth{
        line-height:1rem;
        font-size:1rem;
    }
    #note-game{
        right:10rem;
    }
}
@media screen and (max-width:768px) and (orientation:landscape){
    :root{
        font-size:12px;
    }
    body{
        overflow-x:hidden;
        overflow-y:auto;
    }
    .side-window{
        min-height:31rem;
    }
    .body{
        padding-bottom:1rem;
        min-height:30rem;
    }
    .rhythm-setting-screen{
        min-height:31rem;
    }
}/* End custom CSS */