@font-face{
    font-family: colored-crayons;
    src: url(../resources/fonts/colored-crayons.ttf);
}
@font-face{
    font-family: minecraft;
    src: url(../resources/fonts/minecraft.ttf);
}
@font-face{
    font-family: pixel;
    src: url(../resources/fonts/pixel.ttf);
}
@font-face{
    font-family: orange-juice;
    src: url(../resources/fonts/orange-juice.ttf);
}
body {
    background-image:url("../img/backgrounds/background.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%;
}
    .container {
        width:600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    h1.timer {
        font-family: pixel;
        font-size: 150%;
        color:#fff;
        margin-top:-29%;
    }
    h1.stop {
        font-family: pixel;
        font-size: 600%;
        color:#EE8640;
    }
    h3 {
        font-family: "orange-juice"; 
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 500%;
    }
    
    button {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 150%;
    }
    canvas{
    opacity:0.8;
    background:transparent;
    }
text {
font-family:minecraft;
font-size:20px;
}

#small {
    font-family: orange-juice;
}

#stop {
    -moz-box-shadow:inset 0px 0px 0px 0px #01ff73;
    -webkit-box-shadow:inset 0px 0px 0px 0px #01ff73;
    box-shadow:inset 0px 0px 0px 0px #01ff73;
    background-color:#E53935;
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
    border:4px solid #43A047;
    display:inline-block;
    cursor:pointer;
    color:white;
    font-family:colored-crayons;
    font-size:17px;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 0px 0px #01ff73;
}
#stop:hover {
    background-color:#F44336;
}
#stop:active {
    position:relative;
    top:1px;
}
#start{
    -moz-box-shadow:inset 0px 0px 0px 0px #ed7c31;
    -webkit-box-shadow:inset 0px 0px 0px 0px #ed7c31;
    box-shadow:inset 0px 0px 0px 0px #ed7c31;
    background-color:#0288D1;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:12px;
    border:4px solid #FF9800;
    display:inline-block;
    cursor:pointer;
    color:white;
    font-family:colored-crayons;
    font-size:17px;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 0px 0px #ed7c31;
}
#start:hover {
    background-color:#039BE5
;
}
#start:active {
    position:relative;
    top:1px;
}
#clear {
    -moz-box-shadow:inset 0px 0px 0px 0px #ffff33;
    -webkit-box-shadow:inset 0px 0px 0px 0px #ffff33;
    box-shadow:inset 0px 0px 0px 0px #ffff33;
    background-color:#8E24AA;
    -moz-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
    border:4px solid #FDD835;
    display:inline-block;
    cursor:pointer;
    color:white;
    font-family:colored-crayons;
    font-size:17px;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 0px 0px #ffff33;
}
#clear:hover {
    background-color:#9C27B0;
}
#clear:active {
    position:relative;
    top:1px;
}