body {

    
    font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    text-align: center;
    
    
}
.container {

        background-image: linear-gradient(
        45deg,
        hsl(240deg 100% 20%) 0%,
        hsl(289deg 100% 21%) 11%,
        hsl(315deg 100% 27%) 22%,
        hsl(329deg 100% 36%) 33%,
        hsl(337deg 100% 43%) 44%,
        hsl(357deg 91% 59%) 56%,
        hsl(17deg 100% 59%) 67%,
        hsl(34deg 100% 53%) 78%,
        hsl(45deg 100% 50%) 89%,
        hsl(55deg 100% 50%) 100%);
        background-size: cover;
        background-repeat: no-repeat;

        width: 25%;
        height: auto;
        margin: auto;
        padding: 160px 30px;
        border:  6px solid hsl(0, 5%, 7%);
        border-radius: 30px;
        box-shadow: inset 0px 0px 30px 2px black  ;
}

h1 {
    margin-top: 10px;
    margin-bottom: 10px;
    text-transform: uppercase;
    margin:  0 30px;
    font-size: 25px;
    color: white;
    
}

h2 {
    font-size: 50px;
    margin-top: 0;
    margin-bottom: 20px;
    color: white;
}
p{
    margin: 0 20px;
    text-shadow: 0px 0px 5px rgb(0, 0, 0);
    text-transform: uppercase;
    font-size: 13px;
    color: hsl(55deg 100% 50%);
}

button {
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    text-shadow: 1px 1px 5px black;
    font-weight: bold;
    width: 200px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgb(105, 102, 102), 0px 0px 10px 3px black;
    cursor: pointer;
    
}

#increment-btn {
    background: hsl(17deg 100% 59%);
    
    
}

#save-btn {
    background: hsl(34deg 100% 53%);
   
    

}

#reset-all{

    background: hsl(315deg 100% 27%);
    
    

}