/*input text field only holds one number, small size ok*/
form input[type=number] {
    padding-left: 3px;
    width: 50px;
}

#dice img {
    width: 40px;
    height: auto;
}

details #theoretical {
    background-color: #EEE;
    padding: 20px;
    border-radius: 10px;
    border: #CCC 1px solid;
}

details#expectation {
    margin-top: 15px;
    margin-bottom: 0px;
}

details#expectation h4 {
    margin-bottom: 10px;
}

details#expectation h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    color: red;
}

details#expectation ul {
    list-style-type: disc;
    list-style-position: inside;
}

details#expectation ol {
    list-style-type: decimal;
    list-style-position: inside;
}

details#expectation ul ul,
details#expectation ol ul {
    list-style-type: circle;
    list-style-position: inside;
    margin-left: 15px;
}

details#expectation ol ol,
details#expectation ul ol {
    list-style-type: lower-latin;
    list-style-position: inside;
    margin-left: 15px;
}

/*gray band*/
@media (min-width: 200px) {}

/*black band*/
@media (min-width: 400px) {
    header h1::after {
        content: "";
    }
}

/*red band*/
@media (min-width: 600px) {
    header #mastheadText p::before {
        content: "";
    }

    main figure.appStyle {
        width: 20%;
    }
}

/*blue band*/
@media (min-width: 800px) {
    main {
        padding-top: 10px;
        padding-left: 20%;
        padding-right: 20%;
        padding-bottom: 5px;
    }

    #bigContent main details p {
        font-size: 16px;
    }

    form fieldset {
        padding-top: 5px;
        padding-bottom: 10px;
    }

    div#current_game h3,
    div#gaming_summary h3 {
        font-size: 20px;
    }

    div#current_game p,
    div#gaming_summary p {
        font-size: 15px;
    }
}

/*green band*/
@media (min-width: 1200px) {

    main {
        padding-left: 30%;
        padding-right: 30%;
    }
    
    form#getLuckyNumber{
        width: 80%;
    }
}