styles.css

* {
    box-sizing: border-box;

}



.app{


 background-image: url("back-77.png");
 width: 700px;
 background-size:cover;
 height: 100%;
 overflow: hidden;
 margin: auto;
 border: 5px solid gold;
}

body {
    background-image: url("back4.png");
    background-size:cover;
  
    
    font-family: 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    text-align: center;
    


    box-sizing: border-box;
    margin: auto;

}

h1 {
    margin-top: 7%;
    margin-bottom: 10%;
}

h2 {
    font-size: 50px;
    margin-top: 12%;
    margin-bottom: 2%;
}

p{
    margin: 15% auto 0%;
    height: 15%;
    width: 60%;
    overflow-y: auto;
    background-color: ghostwhite;
    opacity: 0.9;
    padding: 1% 2%;
    border-radius: 10px;
}

button {
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    font-weight: bold;
    width: 40%;
    height: 7%;
    margin-top: 55%;
    margin-bottom: 15px;
    border-radius: 5px;
}

#increment-btn {
    background: rgb(221, 44, 13);
}

#save-btn {
    background: darkgreen;
}   


@media (max-width: 700px) {
    .app{
        width: 100vw;
        height: 100vh;
    }
}

    @media (max-height: 600px) {

        .app{
          
            height: fit-content;
        }
   
    }