body {

    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #111;
    color: white;

}


#app {

    width: 90%;
    max-width: 500px;
    margin: 30px auto;
    text-align: center;
    padding: 20px;

}


h1 {

    font-size: 28px;
    margin-bottom: 25px;

}


h2 {

    margin-top: 25px;
    font-size: 20px;

}


button {

    width: 45%;
    padding: 15px;
    margin: 8px;
    font-size: 18px;
    border-radius: 10px;
    border: none;
    cursor: pointer;

}


select {

    width: 90%;
    padding: 12px;
    font-size: 18px;
    border-radius: 10px;

}


input[type="range"] {

    width: 90%;
    height: 8px;

}


span {

    display: block;
    margin-top: 8px;
    font-size: 18px;

}


@media (max-width:600px) {

    button {

        width: 90%;
        font-size: 20px;

    }


    h1 {

        font-size: 24px;

    }

}