body{
   /* max-height: 100%;
    width: 99%;*/
    background-color: #1a1d24;
    color: #00cc99;
    font-family: 'Cabin Condensed', sans-serif;
    /*display: flex;
    justify-content:flex-start;
    flex-direction: column;*/
}
#circle {
    width: 70px;
    height: 70px;
    background: #00cc99;
    border-radius: 50px;
    margin: 0;
    padding: 0;
    position: fixed;
    left: 40%;
    top: 0%;
}

.main-container{
    display: flex;
    justify-content: space-between;
    width: 100%;

    /*flex-direction:column;*/
}

.key-binary{
     color:  #3399ff;
    padding-top: 5em;
}

.clock-container{
    /*width: 80%;*/
    margin: 0 auto;
    padding-top: 10em;
    display: flex;
    justify-content:space-around;
    flex-direction:column;
}
#meridiem{
    font-size: 40px;
}

.clock{
    text-align: center;
    margin: 0 auto;
     font-size: 180px;
}
.date{
    font-size: 36px;
    text-align: center;
}

.buttons{
    margin: 0 auto;
}

.button{
    background-color:#00cc99;
    border:1px solid #241d13;
    cursor:pointer;
    color:#1a1d24;
    font-size:15px;
    font-weight:bold;
    padding:9px 23px;
}

.button:hover{
    opacity: .6;
}


.key-hex{
     color:  #ffdb4d;
     padding-top: 5em;
}

footer{
    /*background-color: red;*/
    margin-top: 8em;
    text-align: center;
}


@media (max-width: 950px){
    .main-container{
        flex-wrap:wrap;
/*        flex-direction:column;
*/    }

    .clock-container{
        order:0;
        width: 100%;
    }
    .key-binary{
        margin-left: 10em;
        order:1;
    }
    .key-hex{
        margin-right: 8em;
        order:1;
    }
}

@media (max-width: 750px){
    .clock{
        font-size: 130px;
    }
}

@media (max-width: 560px){
    .clock{
        font-size: 90px;
    }

    .date{
        font-size: 28px;
    }
    .button{
        padding: 10px 14px;
        font-size: 11px;
    }

    .key-binary{
        margin-left: 0;
        order:1;
    }
    .key-hex{
        margin-right: 0;
        order:1;
    }
}