body {
    font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow: hidden;
}

.center {
    text-align: center;
    }
@media (min-width:800px) {

    #clock {
        font-family: 'Ubuntu Condensed', monospace, monospace;
        position: absolute;
        top: 0;
        left: 0;
        width: 800px;
        height: 300px;
        background-color: #000000;
        /*font-size: 180px;*/
        font-size:20vw;
        text-align: center;
        vertical-align: middle;
        color: #dcecff;
    }

    #clockDisplay {
        margin-top: 50;
    }

    #weather {
        position: absolute;
        top: 300px;
        left: 0;
        width: 800px;
        height: 100px;
        /*background-color: #312121;*/
        background-color: #000000;
        overflow: hidden;
    }

    #misc {
        position: absolute;
        top: 450px;
        left: 0;
        width: 800px;
        height: 150px;
        background-color: #213121;
    }

    #datearea {
        width:100%;
        position:absolute;
        top:0;
        left:0;
        display:table;
        }
    .weatherBit {
        color: #dcecff;
        font-size: 2.8vw;
    }

  .weatherIcon {
             color: #fff;
             font-size: 48px;
    margin-top:10px;
         }

    #day, #date {
        color: #dcecff;
        font-size: 5vw;

        font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, sans-serif;
        width:50%;
        display:table-cell;
        }
    .wday {
        color: #dcecff;
        text-align: center;
        text-transform: capitalize;
    }
}

@media (min-width:1024px){

    body {
        font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, sans-serif;
        background-color: #212121;
        color: #fff;
    }

    #clock {
        font-family: 'Ubuntu Condensed', monospace, monospace;
        position: absolute;
        top: 0;
        left: 0;
        width: 1024px;
        height: 384px;
        background-color: #212121;
        /*font-size: 180px;*/
        font-size:25vw;
        text-align: center;
        vertical-align: middle;
        color: #fff;
    }

    #clockDisplay {
        margin-top: 50;
    }

    #weather {
        position: absolute;
        top: 384px;
        left: 0;
        width: 1024px;
        height: 192px;
        background-color: #312121;
    }

    #misc {
        position: absolute;
        top: 576px;
        left: 0;
        width: 1024px;
        height: 192px;
        background-color: #213121;
    }

    .weatherBit {
        color: #fff;
        font-size: 3vw;
    }

  .weatherIcon {
            color: #fff;
            font-size: 48px;
        }

    .wday {
        color: #fff;
        text-align: center;
        text-transform: capitalize;
    }

}

@media (min-width:1280px){

    body {
        font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, Arial, sans-serif;
        background-color: #212121;
        color: #fff;
    }

    #clock {
        font-family: 'Ubuntu Condensed', monospace, monospace;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 512px;
        background-color: #212121;
        /*font-size: 300px;*/
        font-size:25vw;
        text-align: center;
        vertical-align: middle;
        color: #fff;
    }

    #clockDisplay {
        margin-top: 50;
    }

    #weather {
        position: absolute;
        top: 512px;
        left: 0;
        width: 100%;
        height: 256px;
        background-color: #312121;
    }

    #misc {
        position: absolute;
        top: 768px;
        left: 0;
        width: 100%;
        height: 256px;
        background-color: #213121;
    }

    .weatherBit {
        color: #fff;
        font-size: 36px;
    }

  .weatherIcon {
          color: #fff;
          font-size: 48px;
      }

    .wday {
        color: #fff;
        text-align: center;
        text-transform: capitalize;
    }


}