*{
    padding: 0%;
    margin: 0%;
}

canvas{
    display: none;
}

*{
    padding: 0%;
    margin: 0%; 
}

body{
    width: 100vw;
    height: 100vh;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

#piano_tiles_first_page{
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    background: url('Image/piano_first_page.jpg') center center/cover;
    background-repeat: no-repeat;
}

svg {
    font: 11em '';
    height: 20%;
    width: 56%;
    position: absolute;
    background-color: navy;
    top: 0%;
    left: 22%;
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 7px;
    stroke-dashoffset: 0%;
    animation: piano_master 5.5s infinite linear;
}

.text-copy:nth-child(1){
  stroke: white;
  animation-delay: -1;
}

.text-copy:nth-child(2){
  stroke: lightblue;
  animation-delay: -2s;
}

.text-copy:nth-child(3){
  stroke: pink;
  animation-delay: -3s;
}

.text-copy:nth-child(4){
  stroke: bisque;
  animation-delay: -4s;
}

.text-copy:nth-child(5){
  stroke: lightgreen;
  animation-delay: -5s;
}

@keyframes piano_master{
  100% {stroke-dashoffset: -35%;}
}

#piano_tiles_exit_button,
.piano_tiles_game_button
{
    border: 6px double rgb(84, 144, 234);
    border-radius: 20%;
    padding: 1% 1%;
    font-size: 140%;
    font-weight: bold;
    cursor: pointer;
    margin: 30px 0px;
    background-color: rgb(22, 6, 127);
    color: lightblue;
    position: absolute;
    border-color: rgb(128, 0, 0);
    left: 40%;
    width: 20%;
}

#piano_tiles_exit_button:hover,
.piano_tiles_game_button:hover
{
    background-color: rgb(158, 199, 249);
    color: rgb(22, 6, 127);
    border-color: rgb(100, 47, 9);
    transform: scale(1.1, 1.1);
}

#piano_tiles_game_start{
    top:50%;
}

#piano_tiles_game_about{
    top:60%;
}

#piano_tiles_game_setting{
    top:70%;
}

#piano_tiles_game_quit{
    top:80%;
}

.piano_tiles_setting_r,
.piano_tiles_about_r{
    width: 30%;
    height: 45%;
    background-color: lightblue;
    color: darkblue;
    opacity: 78%;
    font-size: 1.2em;
    position: absolute;
    top: 22.5%;
    left: 35%;
    box-shadow: 0 20px 20px rgba(161, 125, 232, 0.6), 0 20px 20px rgb(122, 122, 216);
}

.exit_button{
    border: 6px double rgb(245, 214, 214);
    border-radius: 20%;
    padding: 1% 1%;
    font-size: 140%;
    font-weight: bold;
    cursor: pointer;
    margin: 30px 0px;
    width: 60%;
    height: 20%;
    background-color: midnightblue;
    color: rgb(226, 218, 218);
    border-color: rgb(243, 127, 127);
}

.exit_button:hover
{
    background-color: rgb(226, 218, 218);
    color: midnightblue;
    border-color: rgb(100, 47, 9);
    transform: scale(1.1, 1.1);
}

#on_music{
    margin-top: 50px;
    height: 40%;
    width: 40%;
    padding: 0%;
    top: 10%;
    left: 0%;
}

#off_music{
    margin-top: 50px;
    height: 40%;
    width: 40%;
    padding: 0%;
    top: 10%;
    left: 60%;
}

#on_music:hover,
#off_music:hover{
    transform: scale(1.1);
}

.piano_tiles_about,
.piano_tiles_setting,
.piano_tiles_quit,
.piano_tiles_button{
    display: none;
}

#piano_tiles_exit_button{
    left: 40%;
    top: 50%;
    background-color:rgb(243, 123, 143);
    color: rgb(55, 2, 2);
}

@media (max-width : 600px){

    svg {
        height: 20%;
        width: 80%;
        left: 10%;
    }

    .piano_tiles_game_button{
        font-size: 170%;
        left: 20%;
        width: 60%;
    } 
    
    .piano_tiles_about_r{
        width: 80%;
        height: 100%;
        font-size: 90%;
        left: 10%;
        height: 50%;
    }

    #piano_tiles_game_start{
        top:50%;
    
    }
    
    #piano_tiles_game_about{
        top:60%;
    }
    
    #piano_tiles_game_setting{
        top:70%;
    }
    
    #piano_tiles_game_quit{
        top:80%;
    }
    
    #piano_tiles_exit_button{
        font-size: 150%;
        left: 25%;
        top: 55%;
        width: 50%;
    }

    .piano_tiles_setting{
        width: 80%;
        left: 10%;
    }
}

@media (max-height : 600px){
   
    svg {
        height: 20%;
        width: 80%;
        left: 10%;
    }

    .piano_tiles_game_button{
        font-size: 130%;
        left: 36%;
        height: 15%;
        width: 30%;
    } 
    
    .piano_tiles_setting,
    .piano_tiles_about_r{
        width: 80%;
        height: 80%;
        font-size: 100%;
        left: 10%;
        top:10%
    }

    #piano_tiles_game_start{
        top:22%;
    }
    
    #piano_tiles_game_about{
        top:38%;
    }
    
    #piano_tiles_game_setting{
        top:54%;
    }
    
    #piano_tiles_game_quit{
        top:70%;
    }

    #piano_tiles_exit_button{
        font-size: 150%;
        left: 40%;
        top: 65%;
        width: 20%;
    }
}