@media only screen and (min-width: 769px){
    .playerContainer{
        width: 30%;
    }
    .lyricsInput{
        width: 65%;
    }
    .buttons{
        justify-content: space-evenly;
    }
    .tick{
        height: 15px;
    }
    #iconContainer1{
        position: fixed;
        top: 3vh;
        right: 23vw;
    }
}

@media only screen and (min-width: 1025px){
    .playerContainer{
        width: 22%;
    }
    .confirmAudio,.confirmLyrics{
        width: 23%;
    }
    .askLyrics{
        font-size: 10px;
    }
    .lyricsInput{
        width: 50%;
    }
    .buttons{
        width: 50%;
        left: 25%;
    }
    .mainContainer{
        height: 450px;
    }
}

@media only screen and (min-width: 1441px){
    h1{
        margin-top: 5vh;
        transform: scale(2);
    }
    h3{
        margin-top: 4vh;
        transform: scale(1.5);
    }
    .input{
        transform: scale(0.5);
    }
    .playerContainer{
        transform: scale(1.15);
        width: 15%;
        overflow: hidden;
    }
    .inputContainer,.confirmAudio{
        transform: scale(2.25);
    }
    .playerContainer,.inputContainer,.confirmAudio{
        margin-top: 5vh;
    }
    .confirmAudio{
        width: 10%;
        margin-top: 2vh;
        transform: scale(1.10);
    }
    .askLyrics,.timer{
        margin-top: 5vh;
        transform: scale(2);
    }
    .mainContainer{
        margin-top: 3vh;
        height: 400px;
    }
    .lyricsInput{
        font-size: 20px;
        height: 80%;
        padding-left: 10px;
        padding-top: 10px;
    } 
    .buttons{
        transform: scale(1.25);
        width: 30%;
        justify-content: space-around;
        position: relative;
        top: 3%;
        left: 35%;
    }
}