@media(min-width:430px)
{
*{ 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
}
body{
    background-color: #494669;
    width: 100vw;
}
.maincontent img{
    
    width: 100%;
    max-height:13rem;
}
.maincontainer{
    width: 100%;
    display: flex;
    justify-content: center;
}
.maincontent{
    padding: .3rem;
    margin: .3rem;
    background-color: #939BB8; 
    width: 25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gamename{
    background-color: rgb(239, 234, 234);
    font-weight: 600;
    text-align: center;
    font-size: 1.3rem;
    margin-top: .3rem;
}
.scorecontainer{
    background-color: rgb(239, 234, 234);
    font-weight: 550;
    margin-top: .3rem;
}
#score{
    font-size: 3.5rem;
    padding-left: 1rem;
}
.afterscore{
    padding-left: 1rem;
    font-size: 1.1rem;
}
.playingto{
    padding-left: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    display: inline-block;
}
.maxscore{
    padding-left: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    display: inline-block;
}
.changemaxscore{
    margin-left: .6rem;
}
.playerpoints{
    width: 32.63%;
    height: 2rem;
    margin-top: .4rem;
}
#player1{
    background-color: rgb(205, 37, 37);
}
#player2{
    background-color: rgb(49, 85, 241);
}
#reset{
    background-color: rgb(148, 153, 157);
}
}
@media(max-width:430px)
{
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Nunito', sans-serif;
    }
    body{
        background-color: #494669;
        width: 100vw;
    }
    .maincontent img{
        
        width: 100%;
        max-height:13rem;
    }
    .maincontainer{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .maincontent{
        padding: .3rem;
        margin: .3rem;
        background-color: #939BB8; 
        width: 25rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .gamename{
        background-color: rgb(239, 234, 234);
        font-weight: 600;
        text-align: center;
        font-size: 1.3rem;
        margin-top: .3rem;
    }
    .scorecontainer{
        background-color: rgb(239, 234, 234);
        font-weight: 550;
        margin-top: .3rem;
    }
    #score{
        font-size: 3.5rem;
        padding-left: 1rem;
    }
    .afterscore{
        padding-left: 1rem;
        font-size: 1.1rem;
    }
    .playingto{
        padding-left: 1rem;
        font-size: 1.2rem;
        font-weight: 600;
        display: inline-block;
    }
    .maxscore{
        padding-left: 1rem;
        font-size: 1.2rem;
        font-weight: 600;
        display: inline-block;
    }
    .changemaxscore{
        margin-left: .6rem;
    }
    .playerpoints{
        width: 100%;
        height: 2rem;
        margin-top: .4rem;
    }
    #player1{
        background-color: rgb(205, 37, 37);
    }
    #player2{
        background-color: rgb(49, 85, 241);
    }
    #reset{
        background-color: rgb(148, 153, 157);
    }
}
#col{
    color: green;
}