@font-face {
    font-family: "Artifika";
    src: url('../font/Artifika-Regular.ttf') format('truetype');
}

@font-face {
    font-family: "SF Cartoonist Hand";
    src: url('../font/SF_Cartoonist_Hand.ttf') format('truetype');
}

@font-face {
    font-family: "Delius";
    src: url('../font/delius-regular.ttf') format('truetype');
}

@font-face {
    font-family: "Architects Daughter";
    src: url('../font/ArchitectsDaughter.ttf') format('truetype');
}

@font-face {
    font-family: "Banksia";
    src: url('../font/banksia.ttf') format('truetype');
}

@media screen and (max-width:500px) {
    body {
        background-color: rgb(224, 224, 224);
    }
    
    .waktuMundur {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 8%;
    }
    
    .waktuMundur div {
        display: inline-block;
    }
    
    .waktuMundur .hari,
    .waktuMundur .jam,
    .waktuMundur .menit,
    .waktuMundur .detik {
        margin: 1.5vw;
    }
    
    .waktuMundur div div {
        font-size: 10vw;
        font-family: "Banksia";
        text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
    }
    
    .waktuMundur div p {
        font-size: 3vw;
        font-family: "Artifika";
        text-align: center;
        text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
        margin-top: .2vw;
    }
}

@media screen and (min-width:500px) {
    body {
        background-color: rgb(224, 224, 224);
    }
    
    .waktuMundur {
        position: absolute;
        top: 7%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .waktuMundur div {
        display: inline-block;
    }
    
    .waktuMundur .hari,
    .waktuMundur .jam,
    .waktuMundur .menit,
    .waktuMundur .detik {
        margin: 1.5vw;
    }
    
    .waktuMundur div div {
        font-size: 2vw;
        font-family: "Banksia";
        text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
    }
    
    .waktuMundur div p {
        font-size: .9vw;
        font-family: "Artifika";
        text-align: center;
        text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
        margin-top: .2vw;
    }
}