@import url(https://fonts.googleapis.com/css?family=Roboto);


html { width: 100%;
       height: 100%;
       -webkit-text-size-adjust: 100%;
     }


body { width: 100%;
       height: 100%;
       margin: 0px;
       padding: 0px;
       font-family: Roboto, arial, sans-serif;
       font-size: 20px;
       background: #000;
       color: #fff;
       background-attachment: fixed;
       box-sizing: border-box;
       text-align: center;
     }


h1 { font-size: 40px;
     margin: 0px;
   }

h2 { font-size: 30px;
     margin: 0px;
   }


header { position: relative;
         height: 120px;
         margin: 0px auto 0px auto;
       }

header div { position: relative;
             top: 50%;
             transform: translateY(-50%);
           }


section:first-of-type { height: calc(60% - 120px);
                        color: #aaa;
                      }
section:last-of-type { height: calc(40% - 120px); 
                     }


#counter,
#total { width: 100%;
         height: 140px;
         padding: 0px;
         border: 0px;
         font-size: 140px;
         text-align: center;
         background: #000;
         color: #fff;
       }

#counter { height: 55px;
           font-size: 55px;
           color: #aaa;
         }


.button { display: inline-block;
         width: 100px;
         height: 90px;
         margin: 0px 30px;
         border-radius: 10px;
         box-sizing: border-box;
         border: 0px;
         background-color: #084;
         color: #fff;
         font-family: Roboto, arial, sans-serif;
         font-size: 80px;
         line-height: 90px;
         text-align: center;
         cursor: pointer;
       }

.button:last-of-type { background-color: #d00;
                     }


footer { position: relative;
         height: 120px;
         font-size: 16px;
       }

footer div { position: relative;
             top: 50%;
             max-width: 300px;
             margin: auto;
             transform: translateY(-50%);
           }

footer img { float: left;
             height: 55px;
             margin-right: 20px;
             vertical-align: middle;
             border-radius: 5px;
           }















/*
+------------------------------------------------------------+
| 940px wide or less                                         |
+------------------------------------------------------------+
*/

@media (max-width: 940px)
    {

    h1 { font-size: 35px;
       }

    h2 { font-size: 25px;
       }

    header,
    footer { height: 100px;
           }

    #total { height: 120px;
             font-size: 120px;
           }

    #counter { height: 50px;
               font-size: 50px;
             }

    section:first-of-type { height: calc(60% - 100px); 
                          }
    section:last-of-type { height: calc(40% - 100px); 
                         }

    .button { width: 95px;
            }

    }


















/*
+------------------------------------------------------------+
| 340px wide or less                                         |
+------------------------------------------------------------+
*/

@media (max-width: 340px)
    {

    h1 { font-size: 30px;
       }

    h2 { font-size: 20px;
       }

    header,
    footer { height: 80px;
           }

    #total { height: 100px;
             font-size: 100px;
           }

    #counter { height: 45px;
               font-size: 45px;
             }

    section:first-of-type { height: calc(60% - 80px); 
                          }
    section:last-of-type { height: calc(40% - 80px); 
                         }

    .button { width: 90px;
            }

    footer img { height: 50px;
               }

    }